fixed spelling

adjusted component
fixed usersDropdown import
2026-03-21 00:39:19 +00:00 · 2020-12-24 14:18:22 -05:00 · 2020-12-24 14:17:11 -05:00 · 2020-12-24 14:05:15 -05:00 · 2020-12-23 16:59:20 -05:00 · 2020-12-16 13:07:39 -05:00
28 changed files with 1788 additions and 3039 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+package-lock.json

 # testing
 /coverage
--- a/app/components/UsersDropdown/index.js
+++ b/app/components/UsersDropdown/index.js
@@ -0,0 +1,58 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Link } from 'react-router-dom';
+import { Popover, Row } from 'antd';
+import { UserOutlined } from '@ant-design/icons';
+
+import styles from './index.module.scss';
+
+const UsersDropdown = ({ onLogout }) => {
+  const [popoverVisible, setPopoverVisible] = useState(false);
+
+  const hidePopover = () => {
+    setPopoverVisible(false);
+  };
+
+  const handleVisibleChange = visible => {
+    setPopoverVisible(visible);
+  };
+
+  const userOptions = (
+    <>
+      <Row>
+        <Link onClick={hidePopover} to="/account">
+          Account
+        </Link>
+      </Row>
+      <Row>
+        <Link onClick={onLogout} to="/">
+          Log Out
+        </Link>
+      </Row>
+    </>
+  );
+
+  return (
+    <Popover
+      content={userOptions}
+      trigger="click"
+      getPopupContainer={e => e.parentElement}
+      visible={popoverVisible}
+      onVisibleChange={handleVisibleChange}
+      placement="bottomRight"
+      arrowPointAtCenter
+    >
+      <UserOutlined className={styles.MenuIcon} />
+    </Popover>
+  );
+};
+
+UsersDropdown.propTypes = {
+  onLogout: PropTypes.func,
+};
+
+UsersDropdown.defaultProps = {
+  onLogout: () => {},
+};
+
+export default UsersDropdown;
--- a/app/components/UsersDropdown/index.module.scss
+++ b/app/components/UsersDropdown/index.module.scss
@@ -0,0 +1,7 @@
+.MenuIcon {
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+  }
+  
--- a/app/constants/index.js
+++ b/app/constants/index.js
--- a/app/containers/Accounts/index.js
+++ b/app/containers/Accounts/index.js
@@ -1,11 +1,10 @@
 import React, { useContext } from 'react';
-import { useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
+import { useQuery, useMutation, gql } from '@apollo/client';
+import { Alert, notification } from 'antd';

-import { Accounts as AccountsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Accounts as AccountsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';

 const GET_ALL_USERS = gql`
  query GetAllUsers($customerId: ID!, $context: JSONObject) {
@@ -13,7 +12,7 @@ const GET_ALL_USERS = gql`
      items {
        id
        email: username
-        role
+        roles
        lastModifiedTimestamp
        customerId
      }
@@ -23,10 +22,10 @@ const GET_ALL_USERS = gql`
 `;

 const CREATE_USER = gql`
-  mutation CreateUser($username: String!, $password: String!, $role: String!, $customerId: ID!) {
-    createUser(username: $username, password: $password, role: $role, customerId: $customerId) {
+  mutation CreateUser($username: String!, $password: String!, $roles: [String], $customerId: ID!) {
+    createUser(username: $username, password: $password, roles: $roles, customerId: $customerId) {
      username
-      role
+      roles
      customerId
    }
  }
@@ -37,7 +36,7 @@ const UPDATE_USER = gql`
    $id: ID!
    $username: String!
    $password: String!
-    $role: String!
+    $roles: [String]
    $customerId: ID!
    $lastModifiedTimestamp: String
  ) {
@@ -45,13 +44,13 @@ const UPDATE_USER = gql`
      id: $id
      username: $username
      password: $password
-      role: $role
+      roles: $roles
      customerId: $customerId
      lastModifiedTimestamp: $lastModifiedTimestamp
    ) {
      id
      username
-      role
+      roles
      customerId
      lastModifiedTimestamp
    }
@@ -66,117 +65,121 @@ const DELETE_USER = gql`
  }
 `;

-const Accounts = withQuery(
-  ({ data, fetchMore, refetch }) => {
-    const { customerId } = useContext(UserContext);
+const Accounts = () => {
+  const { customerId, id: currentUserId } = useContext(UserContext);

-    const [createUser] = useMutation(CREATE_USER);
-    const [updateUser] = useMutation(UPDATE_USER);
-    const [deleteUser] = useMutation(DELETE_USER);
+  const { data, loading, error, refetch, fetchMore } = useQuery(GET_ALL_USERS, {
+    variables: { customerId },
+  });
+  const [createUser] = useMutation(CREATE_USER);
+  const [updateUser] = useMutation(UPDATE_USER);
+  const [deleteUser] = useMutation(DELETE_USER);

-    const handleLoadMore = () => {
-      if (!data.getAllUsers.context.lastPage) {
-        fetchMore({
-          variables: { context: data.getAllUsers.context },
-          updateQuery: (previousResult, { fetchMoreResult }) => {
-            const previousEntry = previousResult.getAllUsers;
-            const newItems = fetchMoreResult.getAllUsers.items;
+  const handleLoadMore = () => {
+    if (!data.getAllUsers.context.lastPage) {
+      fetchMore({
+        variables: { context: data.getAllUsers.context },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const previousEntry = previousResult.getAllUsers;
+          const newItems = fetchMoreResult.getAllUsers.items;

-            return {
-              getAllUsers: {
-                context: fetchMoreResult.getAllUsers.context,
-                items: [...previousEntry.items, ...newItems],
-                __typename: previousEntry.__typename,
-              },
-            };
-          },
+          return {
+            getAllUsers: {
+              context: fetchMoreResult.getAllUsers.context,
+              items: [...previousEntry.items, ...newItems],
+              __typename: previousEntry.__typename,
+            },
+          };
+        },
+      });
+    }
+  };
+
+  const handleCreateUser = (email, password, roles) => {
+    createUser({
+      variables: {
+        username: email,
+        password,
+        roles: [roles],
+        customerId,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully created.',
        });
-      }
-    };
-
-    const handleCreateUser = (email, password, role) => {
-      createUser({
-        variables: {
-          username: email,
-          password,
-          role,
-          customerId,
-        },
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Account successfully created.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be created.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Account could not be created.',
-          })
-        );
-    };
+      );
+  };

-    const handleEditUser = (id, email, password, role, lastModifiedTimestamp) => {
-      updateUser({
-        variables: {
-          id,
-          username: email,
-          password,
-          role,
-          customerId,
-          lastModifiedTimestamp,
-        },
+  const handleEditUser = (id, email, password, roles, lastModifiedTimestamp) => {
+    updateUser({
+      variables: {
+        id,
+        username: email,
+        password,
+        roles: [roles],
+        customerId,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully updated.',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Account successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be updated.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Account could not be updated.',
-          })
-        );
-    };
+      );
+  };

-    const handleDeleteUser = id => {
-      deleteUser({ variables: { id } })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Account successfully deleted.',
-          });
+  const handleDeleteUser = id => {
+    deleteUser({ variables: { id } })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Account successfully deleted.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Account could not be deleted.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Account could not be deleted.',
-          })
-        );
-    };
+      );
+  };

-    return (
-      <AccountsPage
-        data={data.getAllUsers.items}
-        onLoadMore={handleLoadMore}
-        onCreateUser={handleCreateUser}
-        onEditUser={handleEditUser}
-        onDeleteUser={handleDeleteUser}
-        isLastPage={data.getAllUsers.context.lastPage}
-      />
-    );
-  },
-  GET_ALL_USERS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { customerId };
+  if (loading) {
+    return <Loading />;
  }
-);

+  if (error) {
+    return <Alert message="Error" description="Failed to load Users." type="error" showIcon />;
+  }
+
+  return (
+    <AccountsPage
+      data={data.getAllUsers.items}
+      currentUserId={currentUserId}
+      onLoadMore={handleLoadMore}
+      onCreateUser={handleCreateUser}
+      onEditUser={handleEditUser}
+      onDeleteUser={handleDeleteUser}
+      isLastPage={data.getAllUsers.context.lastPage}
+    />
+  );
+};
 export default Accounts;
--- a/app/containers/AddProfile/index.js
+++ b/app/containers/AddProfile/index.js
@@ -4,6 +4,7 @@ import { useMutation, useQuery, gql } from '@apollo/client';
 import { notification } from 'antd';
 import { useHistory } from 'react-router-dom';

+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
@@ -37,6 +38,24 @@ const AddProfile = () => {
  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
    variables: { customerId, type: 'ssid' },
  });
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+  });
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+    }
+  );
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_osu_id_provider' },
+    }
+  );
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+  });
  const [createProfile] = useMutation(CREATE_PROFILE);
  const history = useHistory();

@@ -55,7 +74,7 @@ const AddProfile = () => {
          message: 'Success',
          description: 'Profile successfully created.',
        });
-        history.push('/profiles', { refetch: true });
+        history.push(ROUTES.profiles, { refetch: true });
      })
      .catch(() =>
        notification.error({
@@ -83,13 +102,93 @@ const AddProfile = () => {
    return true;
  };

+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchOperatorProfiles = e => {
+    if (operatorProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
  return (
    <AddProfilePage
      onCreateProfile={handleAddProfile}
      ssidProfiles={
        (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
      }
+      venueProfiles={venueProfiles?.getAllProfiles?.items}
+      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
+      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
      onFetchMoreProfiles={handleFetchProfiles}
+      onFetchMoreVenueProfiles={handleFetchVenueProfiles}
+      onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
+      onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
    />
  );
 };
--- a/app/containers/Alarms/index.js
+++ b/app/containers/Alarms/index.js
@@ -1,8 +1,7 @@
 import React, { useContext } from 'react';
-import { gql } from '@apollo/client';
-import { notification } from 'antd';
-import { Alarms as AlarmsPage } from '@tip-wlan/wlan-cloud-ui-library';
-import { withQuery } from 'containers/QueryWrapper';
+import { useQuery, gql } from '@apollo/client';
+import { Alert, notification } from 'antd';
+import { Alarms as AlarmsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';

@@ -24,58 +23,65 @@ const GET_ALL_ALARMS = gql`
  }
 `;

-const Alarms = withQuery(
-  ({ data, refetch, fetchMore }) => {
-    const handleOnReload = () => {
-      refetch()
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Alarms reloaded.',
-          });
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Alarms could not be reloaded.',
-          })
-        );
-    };
+const Alarms = () => {
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data, refetch, fetchMore } = useQuery(GET_ALL_ALARMS, {
+    variables: { customerId },
+    errorPolicy: 'all',
+  });

-    const handleLoadMore = () => {
-      if (!data.getAllAlarms.context.lastPage) {
-        fetchMore({
-          variables: { context: data.getAllAlarms.context },
-          updateQuery: (previousResult, { fetchMoreResult }) => {
-            const previousEntry = previousResult.getAllAlarms;
-            const newItems = fetchMoreResult.getAllAlarms.items;
-
-            return {
-              getAllAlarms: {
-                context: fetchMoreResult.getAllAlarms.context,
-                items: [...previousEntry.items, ...newItems],
-                __typename: previousEntry.__typename,
-              },
-            };
-          },
+  const handleOnReload = () => {
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Alarms reloaded.',
        });
-      }
-    };
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Alarms could not be reloaded.',
+        })
+      );
+  };

-    return (
-      <AlarmsPage
-        data={data.getAllAlarms.items}
-        onReload={handleOnReload}
-        onLoadMore={handleLoadMore}
-        isLastPage={data.getAllAlarms.context.lastPage}
-      />
-    );
-  },
-  GET_ALL_ALARMS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { customerId, errorPolicy: 'all' };
+  const handleLoadMore = () => {
+    if (!data.getAllAlarms.context.lastPage) {
+      fetchMore({
+        variables: { context: data.getAllAlarms.context },
+        updateQuery: (previousResult, { fetchMoreResult }) => {
+          const previousEntry = previousResult.getAllAlarms;
+          const newItems = fetchMoreResult.getAllAlarms.items;
+
+          return {
+            getAllAlarms: {
+              context: fetchMoreResult.getAllAlarms.context,
+              items: [...previousEntry.items, ...newItems],
+              __typename: previousEntry.__typename,
+            },
+          };
+        },
+      });
+    }
+  };
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error && !data?.getAllAlarms?.items) {
+    return <Alert message="Error" description="Failed to load alarms." type="error" showIcon />;
+  }
+
+  return (
+    <AlarmsPage
+      data={data.getAllAlarms.items}
+      onReload={handleOnReload}
+      onLoadMore={handleLoadMore}
+      isLastPage={data.getAllAlarms.context.lastPage}
+    />
+  );
+};

 export default Alarms;
--- a/app/containers/App/index.js
+++ b/app/containers/App/index.js
@@ -2,12 +2,12 @@ import React, { useState } from 'react';
 import { Helmet } from 'react-helmet';
 import { Switch, Redirect } from 'react-router-dom';

-import { ThemeProvider } from '@tip-wlan/wlan-cloud-ui-library';
+import { ThemeProvider, GenericNotFound } from '@tip-wlan/wlan-cloud-ui-library';

 import logo from 'images/tip-logo.png';
 import logoMobile from 'images/tip-logo-mobile.png';

-import { AUTH_TOKEN, COMPANY } from 'constants/index';
+import { AUTH_TOKEN, COMPANY, ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
 import Login from 'containers/Login';

 import Network from 'containers/Network';
@@ -32,7 +32,7 @@ import ProtectedRouteWithLayout from './components/ProtectedRouteWithLayout';
 const RedirectToDashboard = () => (
  <Redirect
    to={{
-      pathname: '/dashboard',
+      pathname: ROUTES.dashboard,
    }}
  />
 );
@@ -42,7 +42,7 @@ const App = () => {
  let initialUser = {};
  if (token) {
    const { userId, userName, userRole, customerId } = parseJwt(token.access_token);
-    initialUser = { id: userId, email: userName, role: userRole, customerId };
+    initialUser = { id: userId, email: userName, roles: userRole, customerId };
  }
  const [user, setUser] = useState(initialUser);

@@ -50,7 +50,7 @@ const App = () => {
    setItem(AUTH_TOKEN, newToken);
    if (newToken) {
      const { userId, userName, userRole, customerId } = parseJwt(newToken.access_token);
-      setUser({ id: userId, email: userName, role: userRole, customerId });
+      setUser({ id: userId, email: userName, roles: userRole, customerId });
    }
  };

@@ -60,32 +60,43 @@ const App = () => {
    <UserProvider
      id={user.id}
      email={user.email}
-      role={user.role}
+      roles={user.roles}
      customerId={user.customerId}
      updateUser={updateUser}
      updateToken={updateToken}
    >
-      <ThemeProvider company={COMPANY} logo={logo} logoMobile={logoMobile}>
+      <ThemeProvider
+        company={COMPANY}
+        logo={logo}
+        logoMobile={logoMobile}
+        routes={ROUTES}
+        radioTypes={USER_FRIENDLY_RADIOS}
+      >
        <Helmet titleTemplate={`%s - ${COMPANY}`} defaultTitle={COMPANY}>
          <meta name="description" content={COMPANY} />
        </Helmet>

        <Switch>
-          <UnauthenticatedRoute exact path="/login" component={Login} />
-          <ProtectedRouteWithLayout exact path="/" component={RedirectToDashboard} />
-          <ProtectedRouteWithLayout exact path="/dashboard" component={Dashboard} />
-          <ProtectedRouteWithLayout path="/network" component={Network} />
-          <ProtectedRouteWithLayout path="/system" component={System} />
+          <UnauthenticatedRoute exact path={ROUTES.login} component={Login} />
+          <ProtectedRouteWithLayout exact path={ROUTES.root} component={RedirectToDashboard} />
+          <ProtectedRouteWithLayout exact path={ROUTES.dashboard} component={Dashboard} />
+          <ProtectedRouteWithLayout path={ROUTES.network} component={Network} />
+          <ProtectedRouteWithLayout path={ROUTES.system} component={System} />

-          <ProtectedRouteWithLayout exact path="/profiles" component={Profiles} />
-          <ProtectedRouteWithLayout exact path="/profiles/:id" component={ProfileDetails} />
-          <ProtectedRouteWithLayout exact path="/addprofile" component={AddProfile} />
+          <ProtectedRouteWithLayout exact path={ROUTES.profiles} component={Profiles} />
+          <ProtectedRouteWithLayout
+            exact
+            path={`${ROUTES.profiles}/:id`}
+            component={ProfileDetails}
+          />
+          <ProtectedRouteWithLayout exact path={ROUTES.addprofile} component={AddProfile} />

-          <ProtectedRouteWithLayout exact path="/alarms" component={Alarms} />
-          <ProtectedRouteWithLayout exact path="/account/edit" component={EditAccount} />
-          {user.role === 'SuperUser' && (
-            <ProtectedRouteWithLayout exact path="/accounts" component={Accounts} />
+          <ProtectedRouteWithLayout exact path={ROUTES.alarms} component={Alarms} />
+          <ProtectedRouteWithLayout exact path={ROUTES.account} component={EditAccount} />
+          {user?.roles?.[0] === 'SuperUser' && (
+            <ProtectedRouteWithLayout exact path={ROUTES.users} component={Accounts} />
          )}
+          <ProtectedRouteWithLayout component={GenericNotFound} />
        </Switch>
      </ThemeProvider>
    </UserProvider>
--- a/app/containers/Dashboard/index.js
+++ b/app/containers/Dashboard/index.js
@@ -1,10 +1,11 @@
 import React, { useContext, useEffect, useMemo, useState, useRef } from 'react';
+import { Alert } from 'antd';
 import moment from 'moment';
 import { useQuery } from '@apollo/client';
-import { Dashboard as DashboardPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Dashboard as DashboardPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import UserContext from 'contexts/UserContext';
 import { FILTER_SYSTEM_EVENTS, GET_ALL_STATUS } from 'graphql/queries';
-import { withQuery } from 'containers/QueryWrapper';
+import { USER_FRIENDLY_RADIOS } from 'constants/index';

 function formatBytes(bytes, decimals = 2) {
  if (bytes === 0) return '0 Bytes';
@@ -29,13 +30,6 @@ function trafficTooltipFormatter() {
  )}</b><br/>`;
 }

-const USER_FRIENDLY_RADIOS = {
-  is2dot4GHz: '2.4GHz',
-  is5GHzL: '5GHz (L)',
-  is5GHzU: '5GHz (U)',
-  is5GHz: '5GHz',
-};
-
 const lineChartConfig = [
  { key: 'inservicesAPs', title: 'Inservice APs (24 hours)' },
  { key: 'clientDevices', title: 'Client Devices (24 hours)' },
@@ -46,242 +40,242 @@ const lineChartConfig = [
  },
 ];

-const Dashboard = withQuery(
-  ({ data }) => {
-    const { customerId } = useContext(UserContext);
-    const initialGraphTime = useRef({
-      toTime: moment()
-        .valueOf()
-        .toString(),
-      fromTime: moment()
-        .subtract(24, 'hours')
-        .valueOf()
-        .toString(),
-    });
+const Dashboard = () => {
+  const initialGraphTime = useRef({
+    toTime: moment()
+      .valueOf()
+      .toString(),
+    fromTime: moment()
+      .subtract(24, 'hours')
+      .valueOf()
+      .toString(),
+  });
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data } = useQuery(GET_ALL_STATUS, {
+    variables: { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] },
+  });

-    const [lineChartData, setLineChartData] = useState({
-      inservicesAPs: {
-        key: 'Inservice APs',
+  const [lineChartData, setLineChartData] = useState({
+    inservicesAPs: {
+      key: 'Inservice APs',
+      value: [],
+    },
+    clientDevices: {
+      is2dot4GHz: {
+        key: USER_FRIENDLY_RADIOS.is2dot4GHz,
        value: [],
      },
-      clientDevices: {
-        is2dot4GHz: {
-          key: USER_FRIENDLY_RADIOS.is2dot4GHz,
-          value: [],
-        },
-        is5GHz: {
-          key: USER_FRIENDLY_RADIOS.is5GHz,
-          value: [],
-        },
+      is5GHz: {
+        key: USER_FRIENDLY_RADIOS.is5GHz,
+        value: [],
      },
-      traffic: {
-        trafficBytesDownstream: {
-          key: 'Down Stream',
-          value: [],
-        },
-        trafficBytesUpstream: {
-          key: 'Up Stream',
-          value: [],
-        },
+    },
+    traffic: {
+      trafficBytesDownstream: {
+        key: 'Down Stream',
+        value: [],
      },
-    });
+      trafficBytesUpstream: {
+        key: 'Up Stream',
+        value: [],
+      },
+    },
+  });

-    const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
-      FILTER_SYSTEM_EVENTS,
-      {
-        variables: {
-          customerId,
-          fromTime: initialGraphTime.current.fromTime,
-          toTime: initialGraphTime.current.toTime,
-          equipmentIds: [0],
-          dataTypes: ['StatusChangedEvent'],
-          limit: 3000, // TODO: make get all in GraphQL
-        },
-      }
-    );
+  const { loading: metricsLoading, error: metricsError, data: metricsData, fetchMore } = useQuery(
+    FILTER_SYSTEM_EVENTS,
+    {
+      variables: {
+        customerId,
+        fromTime: initialGraphTime.current.fromTime,
+        toTime: initialGraphTime.current.toTime,
+        equipmentIds: [0],
+        dataTypes: ['StatusChangedEvent'],
+        limit: 3000, // TODO: make get all in GraphQL
+      },
+    }
+  );

-    const formatLineChartData = (list = []) => {
-      if (list.length) {
-        setLineChartData(prev => {
-          const inservicesAPs = [];
-          const clientDevices2dot4GHz = [];
-          const clientDevices5GHz = [];
-          const trafficBytesDownstreamData = [];
-          const trafficBytesUpstreamData = [];
-          let totalDown = 0;
-          let totalUp = 0;
+  const formatLineChartData = (list = []) => {
+    if (list.length) {
+      setLineChartData(prev => {
+        const inservicesAPs = [];
+        const clientDevices2dot4GHz = [];
+        const clientDevices5GHz = [];
+        const trafficBytesDownstreamData = [];
+        const trafficBytesUpstreamData = [];
+        let totalDown = 0;
+        let totalUp = 0;

-          list.forEach(
-            ({
-              eventTimestamp,
-              details: {
-                payload: {
-                  details: {
-                    equipmentInServiceCount,
-                    associatedClientsCountPerRadio: radios,
-                    trafficBytesDownstream,
-                    trafficBytesUpstream,
-                  },
+        list.forEach(
+          ({
+            eventTimestamp,
+            details: {
+              payload: {
+                details: {
+                  equipmentInServiceCount,
+                  associatedClientsCountPerRadio: radios,
+                  trafficBytesDownstream,
+                  trafficBytesUpstream,
                },
              },
-            }) => {
-              inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);
-
-              let total5GHz = 0;
-              total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios
-
-              clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
-              clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);
-
-              trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
-              trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);
-
-              totalDown += trafficBytesDownstream || 0;
-              totalUp += trafficBytesUpstream || 0;
-            }
-          );
-
-          return {
-            inservicesAPs: {
-              ...prev.inservicesAPs,
-              value: [...prev.inservicesAPs.value, ...inservicesAPs],
            },
-            clientDevices: {
-              is2dot4GHz: {
-                ...prev.clientDevices.is2dot4GHz,
-                value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
-              },
-              is5GHz: {
-                ...prev.clientDevices.is5GHz,
-                value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
-              },
-            },
-            traffic: {
-              trafficBytesDownstream: {
-                ...prev.traffic.trafficBytesDownstream,
-                value: [
-                  ...prev.traffic.trafficBytesDownstream.value,
-                  ...trafficBytesDownstreamData,
-                ],
-              },
-              trafficBytesUpstream: {
-                ...prev.traffic.trafficBytesUpstream,
-                value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
-              },
-            },
-            totalDownstreamTraffic: totalDown,
-            totalUpstreamTraffic: totalUp,
-          };
-        });
-      }
-    };
+          }) => {
+            inservicesAPs.push([eventTimestamp, equipmentInServiceCount]);

-    useEffect(() => {
-      const interval = setInterval(() => {
-        const toTime = moment()
-          .valueOf()
-          .toString();
-        const fromTime = moment()
-          .subtract(5, 'minutes')
-          .valueOf()
-          .toString();
-        fetchMore({
-          variables: {
-            fromTime,
-            toTime,
-          },
-          updateQuery: (_, { fetchMoreResult }) => {
-            formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
-          },
-        });
-      }, 300000);
+            let total5GHz = 0;
+            total5GHz += (radios?.is5GHz || 0) + (radios?.is5GHzL || 0) + (radios?.is5GHzU || 0); // combine all 5GHz radios

-      return () => clearInterval(interval);
-    }, []);
+            clientDevices2dot4GHz.push([eventTimestamp, radios.is2dot4GHz || 0]);
+            clientDevices5GHz.push([eventTimestamp, total5GHz || 0]);

-    useEffect(() => {
-      formatLineChartData(metricsData?.filterSystemEvents?.items);
-    }, [metricsData]);
+            trafficBytesDownstreamData.push([eventTimestamp, trafficBytesDownstream || 0]);
+            trafficBytesUpstreamData.push([eventTimestamp, trafficBytesUpstream || 0]);

-    const statsData = useMemo(() => {
-      const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
-
-      const {
-        associatedClientsCountPerRadio,
-        totalProvisionedEquipment,
-        equipmentInServiceCount,
-        equipmentWithClientsCount,
-      } = status;
-
-      const clientRadios = {};
-      let totalAssociated = 0;
-      if (associatedClientsCountPerRadio) {
-        Object.keys(associatedClientsCountPerRadio).forEach(i => {
-          if (i.includes('5GHz')) {
-            if (!clientRadios['5GHz']) {
-              clientRadios['5GHz'] = 0;
-            }
-            clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
-          } else {
-            const key = USER_FRIENDLY_RADIOS[i] || i;
-            clientRadios[key] = associatedClientsCountPerRadio[i];
+            totalDown += trafficBytesDownstream || 0;
+            totalUp += trafficBytesUpstream || 0;
          }
-          totalAssociated += associatedClientsCountPerRadio[i];
-        });
-      }
+        );

-      return {
-        totalProvisionedEquipment,
-        equipmentInServiceCount,
-        equipmentWithClientsCount,
-        totalAssociated,
-        clientRadios,
-      };
-    }, [data]);
-
-    const pieChartsData = useMemo(() => {
-      const { clientCountPerOui, equipmentCountPerOui } =
-        data?.getAllStatus?.items[0]?.details || {};
-
-      return [
-        { title: 'AP Vendors', ...equipmentCountPerOui },
-        { title: 'Client Vendors', ...clientCountPerOui },
-      ];
-    }, [data]);
-
-    return (
-      <DashboardPage
-        statsCardDetails={[
-          {
-            title: 'Access Point',
-            'Total Provisioned': statsData?.totalProvisionedEquipment,
-            'In Service': statsData?.equipmentInServiceCount,
-            'With Clients': statsData?.equipmentWithClientsCount,
+        return {
+          inservicesAPs: {
+            ...prev.inservicesAPs,
+            value: [...prev.inservicesAPs.value, ...inservicesAPs],
          },
-          {
-            title: 'Client Devices',
-            'Total Associated': statsData?.totalAssociated,
-            ...statsData?.clientRadios,
+          clientDevices: {
+            is2dot4GHz: {
+              ...prev.clientDevices.is2dot4GHz,
+              value: [...prev.clientDevices.is2dot4GHz.value, ...clientDevices2dot4GHz],
+            },
+            is5GHz: {
+              ...prev.clientDevices.is5GHz,
+              value: [...prev.clientDevices.is5GHz.value, ...clientDevices5GHz],
+            },
          },
-          {
-            title: 'Usage Information (24 hours)',
-            'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
-            'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
+          traffic: {
+            trafficBytesDownstream: {
+              ...prev.traffic.trafficBytesDownstream,
+              value: [...prev.traffic.trafficBytesDownstream.value, ...trafficBytesDownstreamData],
+            },
+            trafficBytesUpstream: {
+              ...prev.traffic.trafficBytesUpstream,
+              value: [...prev.traffic.trafficBytesUpstream.value, ...trafficBytesUpstreamData],
+            },
          },
-        ]}
-        pieChartDetails={pieChartsData}
-        lineChartData={lineChartData}
-        lineChartConfig={lineChartConfig}
-        lineChartLoading={metricsLoading}
-        lineChartError={metricsError}
-      />
-    );
-  },
-  GET_ALL_STATUS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { customerId, statusDataTypes: ['CUSTOMER_DASHBOARD'] };
+          totalDownstreamTraffic: totalDown,
+          totalUpstreamTraffic: totalUp,
+        };
+      });
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const toTime = moment()
+        .valueOf()
+        .toString();
+      const fromTime = moment()
+        .subtract(5, 'minutes')
+        .valueOf()
+        .toString();
+      fetchMore({
+        variables: {
+          fromTime,
+          toTime,
+        },
+        updateQuery: (_, { fetchMoreResult }) => {
+          formatLineChartData(fetchMoreResult?.filterSystemEvents?.items);
+        },
+      });
+    }, 300000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    formatLineChartData(metricsData?.filterSystemEvents?.items);
+  }, [metricsData]);
+
+  const statsData = useMemo(() => {
+    const status = data?.getAllStatus?.items[0]?.detailsJSON || {};
+
+    const {
+      associatedClientsCountPerRadio,
+      totalProvisionedEquipment,
+      equipmentInServiceCount,
+      equipmentWithClientsCount,
+    } = status;
+
+    const clientRadios = {};
+    let totalAssociated = 0;
+    if (associatedClientsCountPerRadio) {
+      Object.keys(associatedClientsCountPerRadio).forEach(i => {
+        if (i.includes('5GHz')) {
+          if (!clientRadios['5GHz']) {
+            clientRadios['5GHz'] = 0;
+          }
+          clientRadios['5GHz'] += associatedClientsCountPerRadio[i];
+        } else {
+          const key = USER_FRIENDLY_RADIOS[i] || i;
+          clientRadios[key] = associatedClientsCountPerRadio[i];
+        }
+        totalAssociated += associatedClientsCountPerRadio[i];
+      });
+    }
+
+    return {
+      totalProvisionedEquipment,
+      equipmentInServiceCount,
+      equipmentWithClientsCount,
+      totalAssociated,
+      clientRadios,
+    };
+  }, [data]);
+
+  const pieChartsData = useMemo(() => {
+    const { clientCountPerOui, equipmentCountPerOui } = data?.getAllStatus?.items[0]?.details || {};
+
+    return [
+      { title: 'AP Vendors', ...equipmentCountPerOui },
+      { title: 'Client Vendors', ...clientCountPerOui },
+    ];
+  }, [data]);
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load Dashboard" type="error" showIcon />;
+  }
+
+  return (
+    <DashboardPage
+      statsCardDetails={[
+        {
+          title: 'Access Point',
+          'Total Provisioned': statsData?.totalProvisionedEquipment,
+          'In Service': statsData?.equipmentInServiceCount,
+          'With Clients': statsData?.equipmentWithClientsCount,
+        },
+        {
+          title: 'Client Devices',
+          'Total Associated': statsData?.totalAssociated,
+          ...statsData?.clientRadios,
+        },
+        {
+          title: 'Usage Information (24 hours)',
+          'Total Traffic (US)': formatBytes(lineChartData?.totalUpstreamTraffic),
+          'Total Traffic (DS)': formatBytes(lineChartData?.totalDownstreamTraffic),
+        },
+      ]}
+      pieChartDetails={pieChartsData}
+      lineChartData={lineChartData}
+      lineChartConfig={lineChartConfig}
+      lineChartLoading={metricsLoading}
+      lineChartError={metricsError}
+    />
+  );
+};

 export default Dashboard;
--- a/app/containers/EditAccount/index.js
+++ b/app/containers/EditAccount/index.js
@@ -1,8 +1,7 @@
 import React, { useContext } from 'react';
-import { useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
-import { EditAccount as EditAccountPage } from '@tip-wlan/wlan-cloud-ui-library';
-import { withQuery } from 'containers/QueryWrapper';
+import { useMutation, useQuery, gql } from '@apollo/client';
+import { notification, Alert } from 'antd';
+import { EditAccount as EditAccountPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';

@@ -11,7 +10,7 @@ const GET_USER = gql`
    getUser(id: $id) {
      id
      username
-      role
+      roles
      customerId
      lastModifiedTimestamp
    }
@@ -23,7 +22,7 @@ const UPDATE_USER = gql`
    $id: ID!
    $username: String!
    $password: String!
-    $role: String!
+    $roles: [String]
    $customerId: ID!
    $lastModifiedTimestamp: String
  ) {
@@ -31,58 +30,60 @@ const UPDATE_USER = gql`
      id: $id
      username: $username
      password: $password
-      role: $role
+      roles: $roles
      customerId: $customerId
      lastModifiedTimestamp: $lastModifiedTimestamp
    ) {
      id
      username
-      role
+      roles
      customerId
      lastModifiedTimestamp
    }
  }
 `;

-const EditAccount = withQuery(
-  ({ data }) => {
-    const { id, email } = useContext(UserContext);
-    const [updateUser] = useMutation(UPDATE_USER);
+const EditAccount = () => {
+  const { id, email } = useContext(UserContext);
+  const { loading, error, data } = useQuery(GET_USER, { variables: { id } });
+  const [updateUser] = useMutation(UPDATE_USER);

-    const handleSubmit = newPassword => {
-      const { role, customerId, lastModifiedTimestamp } = data.getUser;
+  const handleSubmit = newPassword => {
+    const { roles, customerId, lastModifiedTimestamp } = data.getUser;

-      updateUser({
-        variables: {
-          id,
-          username: email,
-          password: newPassword,
-          role,
-          customerId,
-          lastModifiedTimestamp,
-        },
+    updateUser({
+      variables: {
+        id,
+        username: email,
+        password: newPassword,
+        roles,
+        customerId,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Password successfully updated.',
+        });
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Password successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Password could not be updated.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Password could not be updated.',
-          })
-        );
-    };
+      );
+  };

-    return <EditAccountPage onSubmit={handleSubmit} email={email} />;
-  },
-  GET_USER,
-  () => {
-    const { id } = useContext(UserContext);
-    return { id };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load User." type="error" showIcon />;
+  }
+
+  return <EditAccountPage onSubmit={handleSubmit} email={email} />;
+};

 export default EditAccount;
--- a/app/containers/MasterLayout/index.js
+++ b/app/containers/MasterLayout/index.js
@@ -6,14 +6,16 @@ import { AppLayout as Layout } from '@tip-wlan/wlan-cloud-ui-library';

 import { GET_ALARM_COUNT } from 'graphql/queries';

-import { AUTH_TOKEN } from 'constants/index';
+import { AUTH_TOKEN, ROUTES } from 'constants/index';

 import { removeItem } from 'utils/localStorage';

 import UserContext from 'contexts/UserContext';

+import UsersDropdown from 'components/UsersDropdown';
+
 const MasterLayout = ({ children }) => {
-  const { role, customerId } = useContext(UserContext);
+  const { roles, customerId, email } = useContext(UserContext);

  const client = useApolloClient();
  const location = useLocation();
@@ -30,75 +32,56 @@ const MasterLayout = ({ children }) => {
  const menuItems = [
    {
      key: 'dashboard',
-      path: '/dashboard',
+      path: ROUTES.dashboard,
      text: 'Dashboard',
    },
    {
      key: 'network',
-      path: '/network',
+      path: ROUTES.network,
      text: 'Network',
    },
    {
      key: 'profiles',
-      path: '/profiles',
+      path: ROUTES.profiles,
      text: 'Profiles',
    },
    {
      key: 'system',
-      path: '/system',
+      path: ROUTES.system,
      text: 'System',
    },
  ];

  const mobileMenuItems = [
-    {
-      key: 'dashboard',
-      path: '/dashboard',
-      text: 'Dashboard',
-    },
-    {
-      key: 'network',
-      path: '/network',
-      text: 'Network',
-    },
-    {
-      key: 'profiles',
-      path: '/profiles',
-      text: 'Profiles',
-    },
-    {
-      key: 'system',
-      path: '/system',
-      text: 'System',
-    },
+    ...menuItems,
    {
      key: 'settings',
      text: 'Settings',
      children: [
        {
          key: 'editAccount',
-          path: '/account/edit',
-          text: 'Edit Account',
+          path: ROUTES.account,
+          text: 'Account',
        },
        {
          key: 'logout',
-          path: '/',
+          path: ROUTES.root,
          text: 'Log Out',
        },
      ],
    },
  ];

-  if (role === 'SuperUser') {
+  if (roles?.[0] === 'SuperUser') {
    menuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
    });
    mobileMenuItems.push({
-      key: 'accounts',
-      path: '/accounts',
-      text: 'Accounts',
+      key: 'users',
+      path: ROUTES.users,
+      text: 'Users',
    });
  }

@@ -109,6 +92,8 @@ const MasterLayout = ({ children }) => {
      menuItems={menuItems}
      mobileMenuItems={mobileMenuItems}
      totalAlarms={data && data.getAlarmCount}
+      currentUserEmail={email}
+      usersDropdown={<UsersDropdown onLogout={handleLogout} />}
    >
      {children}
    </Layout>
--- a/app/containers/Network/containers/AccessPointDetails/index.js
+++ b/app/containers/Network/containers/AccessPointDetails/index.js
@@ -1,10 +1,13 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
+import { Alert, notification } from 'antd';
 import moment from 'moment';
-import { AccessPointDetails as AccessPointDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import {
+  AccessPointDetails as AccessPointDetailsPage,
+  Loading,
+} from '@tip-wlan/wlan-cloud-ui-library';

 import { FILTER_SERVICE_METRICS, GET_ALL_FIRMWARE, GET_ALL_PROFILES } from 'graphql/queries';
 import {
@@ -14,7 +17,6 @@ import {
 } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';

 const GET_EQUIPMENT = gql`
  query GetEquipment($id: ID!) {
@@ -40,16 +42,14 @@ const GET_EQUIPMENT = gql`
          details
        }
      }
+      baseMacAddress
+      manufacturer
      status {
        firmware {
          detailsJSON
        }
        protocol {
          detailsJSON
-          details {
-            reportedMacAddr
-            manufacturer
-          }
        }
        radioUtilization {
          detailsJSON
@@ -121,225 +121,270 @@ const UPDATE_EQUIPMENT = gql`
  }
 `;

+const DELETE_EQUIPMENT = gql`
+  mutation DeleteEquipment($id: ID!) {
+    deleteEquipment(id: $id) {
+      id
+    }
+  }
+`;
+
 const toTime = moment();
 const fromTime = moment().subtract(1, 'hour');

-const AccessPointDetails = withQuery(
-  ({ data, refetch, locations }) => {
-    const { id } = useParams();
-    const { customerId } = useContext(UserContext);
+const AccessPointDetails = ({ locations }) => {
+  const { id } = useParams();
+  const { customerId } = useContext(UserContext);
+  const history = useHistory();

-    const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
-      GET_ALL_FIRMWARE,
-      {
-        skip: !data?.getEquipment?.model,
-        variables: { modelId: data?.getEquipment?.model },
-      }
-    );
+  const { loading, error, data, refetch } = useQuery(GET_EQUIPMENT, {
+    variables: {
+      id,
+    },
+    fetchPolicy: 'network-only',
+  });

-    const {
-      data: dataProfiles,
-      error: errorProfiles,
-      loading: loadingProfiles,
-      fetchMore,
-    } = useQuery(
-      GET_ALL_PROFILES(`
+  const { data: dataFirmware, error: errorFirmware, loading: loadingFirmware } = useQuery(
+    GET_ALL_FIRMWARE,
+    {
+      skip: !data?.getEquipment?.model,
+      variables: { modelId: data?.getEquipment?.model },
+    }
+  );
+
+  const {
+    data: dataProfiles,
+    error: errorProfiles,
+    loading: loadingProfiles,
+    fetchMore,
+  } = useQuery(
+    GET_ALL_PROFILES(`
    childProfiles {
      id
      name
      details
    }`),
-      {
-        variables: { customerId, type: 'equipment_ap' },
-      }
-    );
+    {
+      variables: { customerId, type: 'equipment_ap' },
+    }
+  );

-    const {
-      loading: metricsLoading,
-      error: metricsError,
-      data: metricsData,
-      refetch: metricsRefetch,
-    } = useQuery(FILTER_SERVICE_METRICS, {
+  const {
+    loading: metricsLoading,
+    error: metricsError,
+    data: metricsData,
+    refetch: metricsRefetch,
+  } = useQuery(FILTER_SERVICE_METRICS, {
+    variables: {
+      customerId,
+      fromTime: fromTime.valueOf().toString(),
+      toTime: toTime.valueOf().toString(),
+      equipmentIds: [id],
+      dataTypes: ['ApNode'],
+      limit: 100,
+    },
+  });
+
+  const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
+  const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
+  const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
+  const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
+  const [deleteEquipment] = useMutation(DELETE_EQUIPMENT);
+
+  const refetchData = () => {
+    refetch();
+    metricsRefetch();
+  };
+
+  const handleUpdateEquipment = (
+    equipmentId,
+    equipmentType,
+    inventoryId,
+    custId,
+    profileId,
+    locationId,
+    name,
+    latitude,
+    longitude,
+    serial,
+    lastModifiedTimestamp,
+    details
+  ) => {
+    updateEquipment({
      variables: {
-        customerId,
-        fromTime: fromTime.valueOf().toString(),
-        toTime: toTime.valueOf().toString(),
-        equipmentIds: [id],
-        dataTypes: ['ApNode'],
-        limit: 100,
+        id: equipmentId,
+        equipmentType,
+        inventoryId,
+        customerId: custId,
+        profileId,
+        locationId,
+        name,
+        latitude,
+        longitude,
+        serial,
+        lastModifiedTimestamp,
+        details,
      },
-    });
-
-    const [updateEquipment] = useMutation(UPDATE_EQUIPMENT);
-    const [updateEquipmentFirmware] = useMutation(UPDATE_EQUIPMENT_FIRMWARE);
-    const [requestEquipmentSwitchBank] = useMutation(REQUEST_EQUIPMENT_SWITCH_BANK);
-    const [requestEquipmentReboot] = useMutation(REQUEST_EQUIPMENT_REBOOT);
-
-    const refetchData = () => {
-      refetch();
-      metricsRefetch();
-    };
-
-    const handleUpdateEquipment = (
-      equipmentId,
-      equipmentType,
-      inventoryId,
-      custId,
-      profileId,
-      locationId,
-      name,
-      latitude,
-      longitude,
-      serial,
-      lastModifiedTimestamp,
-      details
-    ) => {
-      updateEquipment({
-        variables: {
-          id: equipmentId,
-          equipmentType,
-          inventoryId,
-          customerId: custId,
-          profileId,
-          locationId,
-          name,
-          latitude,
-          longitude,
-          serial,
-          lastModifiedTimestamp,
-          details,
-        },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Equipment settings successfully updated.',
+        });
      })
-        .then(() => {
+
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment settings could not be updated.',
+        })
+      );
+  };
+
+  const handleDeleteEquipment = () => {
+    deleteEquipment({
+      variables: { id },
+    })
+      .then(() => {
+        history.push('/network/access-points');
+        notification.success({
+          message: 'Success',
+          description: 'Equipment successfully deleted',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment could not be deleted.',
+        })
+      );
+  };
+
+  const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
+    updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
+      .then(firmwareResp => {
+        if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
          notification.success({
            message: 'Success',
-            description: 'Equipment settings successfully updated.',
+            description: 'Equipment Firmware Upgrade in progress',
          });
-        })
-
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Equipment settings could not be updated.',
-          })
-        );
-    };
-
-    const handleUpdateEquipmentFirmware = (equipmentId, firmwareVersionId) =>
-      updateEquipmentFirmware({ variables: { equipmentId, firmwareVersionId } })
-        .then(firmwareResp => {
-          if (firmwareResp?.data?.updateEquipmentFirmware?.success === true) {
-            notification.success({
-              message: 'Success',
-              description: 'Equipment Firmware Upgrade in progress',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'Equipment Firmware Upgrade could not be updated.',
-            });
-          }
-        })
-        .catch(() =>
+        } else {
          notification.error({
            message: 'Error',
            description: 'Equipment Firmware Upgrade could not be updated.',
-          })
-        );
-
-    const handleRequestEquipmentSwitchBank = equipmentId =>
-      requestEquipmentSwitchBank({ variables: { equipmentId } })
-        .then(firmwareResp => {
-          if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
-            notification.success({
-              message: 'Success',
-              description: 'Equipment Firmware in progress',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'Equipment Firmware could not be updated.',
-            });
-          }
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware Upgrade could not be updated.',
        })
-        .catch(() =>
+      );
+
+  const handleRequestEquipmentSwitchBank = equipmentId =>
+    requestEquipmentSwitchBank({ variables: { equipmentId } })
+      .then(firmwareResp => {
+        if (firmwareResp?.data?.requestEquipmentSwitchBank?.success === true) {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware in progress',
+          });
+        } else {
          notification.error({
            message: 'Error',
            description: 'Equipment Firmware could not be updated.',
-          })
-        );
-
-    const handleRequestEquipmentReboot = equipmentId =>
-      requestEquipmentReboot({ variables: { equipmentId } })
-        .then(firmwareResp => {
-          if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
-            notification.success({
-              message: 'Success',
-              description: 'Equipment Firmware in progress',
-            });
-          } else {
-            notification.error({
-              message: 'Error',
-              description: 'Equipment Firmware could not be updated.',
-            });
-          }
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware could not be updated.',
        })
-        .catch(() =>
+      );
+
+  const handleRequestEquipmentReboot = equipmentId =>
+    requestEquipmentReboot({ variables: { equipmentId } })
+      .then(firmwareResp => {
+        if (firmwareResp?.data?.requestEquipmentReboot?.success === true) {
+          notification.success({
+            message: 'Success',
+            description: 'Equipment Firmware in progress',
+          });
+        } else {
          notification.error({
            message: 'Error',
            description: 'Equipment Firmware could not be updated.',
-          })
-        );
+          });
+        }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment Firmware could not be updated.',
+        })
+      );

-    const handleFetchProfiles = e => {
-      if (dataProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
+  const handleFetchProfiles = e => {
+    if (dataProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }

-      e.persist();
-      const { target } = e;
+    e.persist();
+    const { target } = e;

-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMore({
-          variables: { context: { ...dataProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
-        });
-      }
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...dataProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }

-      return true;
-    };
+    return true;
+  };

+  if (loading) {
+    return <Loading />;
+  }
+
+  if (error) {
    return (
-      <AccessPointDetailsPage
-        handleRefresh={refetchData}
-        onUpdateEquipment={handleUpdateEquipment}
-        data={data?.getEquipment}
-        profiles={dataProfiles?.getAllProfiles?.items}
-        osData={{
-          loading: metricsLoading,
-          error: metricsError,
-          data: metricsData && metricsData.filterServiceMetrics.items,
-        }}
-        firmware={dataFirmware?.getAllFirmware}
-        locations={locations}
-        onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
-        onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
-        onRequestEquipmentReboot={handleRequestEquipmentReboot}
-        loadingProfiles={loadingProfiles}
-        errorProfiles={errorProfiles}
-        loadingFirmware={loadingFirmware}
-        errorFirmware={errorFirmware}
-        onFetchMoreProfiles={handleFetchProfiles}
-        isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
+      <Alert
+        message="Error"
+        description="Failed to load Access Point data."
+        type="error"
+        showIcon
      />
    );
-  },
-  GET_EQUIPMENT,
-  () => {
-    const { id } = useParams();
-    return { id };
  }
-);
+
+  return (
+    <AccessPointDetailsPage
+      handleRefresh={refetchData}
+      onUpdateEquipment={handleUpdateEquipment}
+      onDeleteEquipment={handleDeleteEquipment}
+      data={data?.getEquipment}
+      profiles={dataProfiles?.getAllProfiles?.items}
+      osData={{
+        loading: metricsLoading,
+        error: metricsError,
+        data: metricsData && metricsData.filterServiceMetrics.items,
+      }}
+      firmware={dataFirmware?.getAllFirmware}
+      locations={locations}
+      onUpdateEquipmentFirmware={handleUpdateEquipmentFirmware}
+      onRequestEquipmentSwitchBank={handleRequestEquipmentSwitchBank}
+      onRequestEquipmentReboot={handleRequestEquipmentReboot}
+      loadingProfiles={loadingProfiles}
+      errorProfiles={errorProfiles}
+      loadingFirmware={loadingFirmware}
+      errorFirmware={errorFirmware}
+      onFetchMoreProfiles={handleFetchProfiles}
+      isLastProfilesPage={dataProfiles?.getAllProfiles?.context?.lastPage}
+    />
+  );
+};

 AccessPointDetails.propTypes = {
  locations: PropTypes.instanceOf(Array).isRequired,
--- a/app/containers/Network/containers/AccessPoints/index.js
+++ b/app/containers/Network/containers/AccessPoints/index.js
@@ -6,6 +6,7 @@ import { notification } from 'antd';
 import { floor, padStart } from 'lodash';
 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';

+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_EQUIPMENT } from 'graphql/queries';

@@ -58,12 +59,12 @@ const accessPointsTableColumns = [
  },
  {
    title: 'MAC',
-    dataIndex: ['status', 'protocol', 'details', 'reportedMacAddr'],
+    dataIndex: 'baseMacAddress',
    render: renderTableCell,
  },
  {
    title: 'MANUFACTURER',
-    dataIndex: ['status', 'protocol', 'details', 'manufacturer'],
+    dataIndex: 'manufacturer',
    render: renderTableCell,
  },
  {
@@ -165,7 +166,7 @@ const AccessPoints = ({ checkedLocations }) => {

  return (
    <NetworkTableContainer
-      activeTab="/network/access-points"
+      activeTab={ROUTES.accessPoints}
      onRefresh={handleOnRefresh}
      tableColumns={accessPointsTableColumns}
      tableData={equipData && equipData.filterEquipment && equipData.filterEquipment.items}
--- a/app/containers/Network/containers/BulkEditAccessPoints/index.js
+++ b/app/containers/Network/containers/BulkEditAccessPoints/index.js
@@ -1,7 +1,7 @@
 import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Alert, notification } from 'antd';
-import { useParams, Redirect } from 'react-router-dom';
+import { useParams } from 'react-router-dom';
 import { useQuery, useMutation } from '@apollo/client';
 import { BulkEditAccessPoints, Loading } from '@tip-wlan/wlan-cloud-ui-library';

@@ -348,12 +348,6 @@ const BulkEditAPs = ({ locations, checkedLocations }) => {
  }

  if (filterEquipmentError) {
-    if (
-      filterEquipmentError.message === '403: Forbidden' ||
-      filterEquipmentError.message === '401: Unauthorized'
-    ) {
-      return <Redirect to="/login" />;
-    }
    return (
      <Alert message="Error" description="Failed to load equipments data." type="error" showIcon />
    );
--- a/app/containers/Network/containers/ClientDeviceDetails/index.js
+++ b/app/containers/Network/containers/ClientDeviceDetails/index.js
@@ -2,73 +2,80 @@ import React, { useContext } from 'react';
 import { useParams } from 'react-router-dom';
 import { useQuery } from '@apollo/client';
 import moment from 'moment';
-import { notification } from 'antd';
-import { ClientDeviceDetails as ClientDevicesDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Alert, notification } from 'antd';
+import {
+  Loading,
+  ClientDeviceDetails as ClientDevicesDetailsPage,
+} from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 import { GET_CLIENT_SESSION, FILTER_SERVICE_METRICS } from 'graphql/queries';
-import { withQuery } from 'containers/QueryWrapper';

 const toTime = moment();
 const fromTime = moment().subtract(4, 'hours');

-const ClientDeviceDetails = withQuery(
-  ({ data, refetch }) => {
-    const { id } = useParams();
-    const { customerId } = useContext(UserContext);
+const ClientDeviceDetails = () => {
+  const { id } = useParams();
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data, refetch } = useQuery(GET_CLIENT_SESSION, {
+    variables: { customerId, macAddress: id },
+    errorPolicy: 'all',
+  });
+  const {
+    loading: metricsLoading,
+    error: metricsError,
+    data: metricsData,
+    refetch: metricsRefetch,
+  } = useQuery(FILTER_SERVICE_METRICS, {
+    variables: {
+      customerId,
+      fromTime: fromTime.valueOf().toString(),
+      toTime: toTime.valueOf().toString(),
+      clientMacs: [id],
+      dataTypes: ['Client'],
+      limit: 1000,
+    },
+  });

-    const {
-      loading: metricsLoading,
-      error: metricsError,
-      data: metricsData,
-      refetch: metricsRefetch,
-    } = useQuery(FILTER_SERVICE_METRICS, {
-      variables: {
-        customerId,
-        fromTime: fromTime.valueOf().toString(),
-        toTime: toTime.valueOf().toString(),
-        clientMacs: [id],
-        dataTypes: ['Client'],
-        limit: 1000,
-      },
-    });
-
-    const handleOnRefresh = () => {
-      metricsRefetch();
-      refetch()
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Successfully reloaded.',
-          });
+  const handleOnRefresh = () => {
+    metricsRefetch();
+    refetch()
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Successfully reloaded.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Could not be reloaded.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Could not be reloaded.',
-          })
-        );
-    };
+      );
+  };

-    return (
-      <ClientDevicesDetailsPage
-        data={data.getClientSession[0]}
-        onRefresh={handleOnRefresh}
-        metricsLoading={metricsLoading}
-        metricsError={metricsError}
-        metricsData={
-          metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
-        }
-        historyDate={{ toTime, fromTime }}
-      />
-    );
-  },
-  GET_CLIENT_SESSION,
-  () => {
-    const { id } = useParams();
-    const { customerId } = useContext(UserContext);
-    return { customerId, macAddress: id, errorPolicy: 'all' };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error && !data?.getClientSession) {
+    return (
+      <Alert message="Error" description="Failed to load Client Device." type="error" showIcon />
+    );
+  }
+
+  return (
+    <ClientDevicesDetailsPage
+      data={data.getClientSession[0]}
+      onRefresh={handleOnRefresh}
+      metricsLoading={metricsLoading}
+      metricsError={metricsError}
+      metricsData={
+        metricsData && metricsData.filterServiceMetrics && metricsData.filterServiceMetrics.items
+      }
+      historyDate={{ toTime, fromTime }}
+    />
+  );
+};

 export default ClientDeviceDetails;
--- a/app/containers/Network/containers/ClientDevices/index.js
+++ b/app/containers/Network/containers/ClientDevices/index.js
@@ -5,6 +5,7 @@ import { notification } from 'antd';

 import { NetworkTableContainer } from '@tip-wlan/wlan-cloud-ui-library';

+import { ROUTES, USER_FRIENDLY_RADIOS } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { FILTER_CLIENT_SESSIONS } from 'graphql/queries';

@@ -22,7 +23,11 @@ const clientDevicesTableColumns = [
  { title: 'HOST NAME', dataIndex: 'hostname' },
  { title: 'ACCESS POINT', dataIndex: ['equipment', 'name'] },
  { title: 'SSID', dataIndex: 'ssid' },
-  { title: 'BAND', dataIndex: 'radioType' },
+  {
+    title: 'BAND',
+    dataIndex: 'radioType',
+    render: band => USER_FRIENDLY_RADIOS[band],
+  },
  { title: 'SIGNAL', dataIndex: 'signal' },
  {
    title: 'STATUS',
@@ -96,7 +101,7 @@ const ClientDevices = ({ checkedLocations }) => {

  return (
    <NetworkTableContainer
-      activeTab="/network/client-devices"
+      activeTab={ROUTES.clientDevices}
      tableColumns={clientDevicesTableColumns}
      tableData={data?.filterClientSessions?.items}
      onLoadMore={handleLoadMore}
--- a/app/containers/Network/index.js
+++ b/app/containers/Network/index.js
@@ -1,16 +1,15 @@
 import React, { useMemo, useContext, useState } from 'react';
 import { Switch, Route, useRouteMatch, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, useLazyQuery } from '@apollo/client';
-import { notification } from 'antd';
+import { Alert, notification } from 'antd';
 import _ from 'lodash';
-import { Network as NetworkPage, PopoverMenu } from '@tip-wlan/wlan-cloud-ui-library';
+import { Network as NetworkPage, PopoverMenu, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import AccessPointDetails from 'containers/Network/containers/AccessPointDetails';
 import AccessPoints from 'containers/Network/containers/AccessPoints';
 import ClientDevices from 'containers/Network/containers/ClientDevices';
 import ClientDeviceDetails from 'containers/Network/containers/ClientDeviceDetails';
 import BulkEditAccessPoints from 'containers/Network/containers/BulkEditAccessPoints';
-import { withQuery } from 'containers/QueryWrapper';

 import UserContext from 'contexts/UserContext';
 import {
@@ -27,300 +26,301 @@ import {
 } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';

-const Network = withQuery(
-  ({ data, refetch }) => {
-    const { path } = useRouteMatch();
-    const { customerId } = useContext(UserContext);
+const Network = () => {
+  const { path } = useRouteMatch();
+  const { customerId } = useContext(UserContext);
+  const { loading, error, refetch, data } = useQuery(GET_ALL_LOCATIONS, {
+    variables: { customerId },
+  });
+  const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'equipment_ap' },
+    }
+  );

-    const { loading: loadingProfile, error: errorProfile, data: apProfiles, fetchMore } = useQuery(
-      GET_ALL_PROFILES(),
+  const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
+  const [createLocation] = useMutation(CREATE_LOCATION);
+  const [updateLocation] = useMutation(UPDATE_LOCATION);
+  const [deleteLocation] = useMutation(DELETE_LOCATION);
+  const [checkedLocations, setCheckedLocations] = useState([]);
+  const [deleteModal, setDeleteModal] = useState(false);
+  const [editModal, setEditModal] = useState(false);
+  const [addModal, setAddModal] = useState(false);
+  const [apModal, setApModal] = useState(false);
+
+  const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
+    refetchQueries: [
      {
-        variables: { customerId, type: 'equipment_ap' },
-      }
-    );
+        query: FILTER_EQUIPMENT,
+        variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
+      },
+    ],
+  });

-    const [getLocation, { data: selectedLocation }] = useLazyQuery(GET_LOCATION);
-    const [createLocation] = useMutation(CREATE_LOCATION);
-    const [updateLocation] = useMutation(UPDATE_LOCATION);
-    const [deleteLocation] = useMutation(DELETE_LOCATION);
-    const [checkedLocations, setCheckedLocations] = useState([]);
-    const [deleteModal, setDeleteModal] = useState(false);
-    const [editModal, setEditModal] = useState(false);
-    const [addModal, setAddModal] = useState(false);
-    const [apModal, setApModal] = useState(false);
-
-    const [createEquipment] = useMutation(CREATE_EQUIPMENT, {
-      refetchQueries: [
-        {
-          query: FILTER_EQUIPMENT,
-          variables: { customerId, locationIds: checkedLocations, equipmentType: 'AP' },
-        },
-      ],
+  const handleGetSingleLocation = id => {
+    getLocation({
+      variables: { id },
    });
+  };

-    const handleGetSingleLocation = id => {
-      getLocation({
-        variables: { id },
-      });
-    };
+  const formatLocationListForTree = (list = []) => {
+    const checkedTreeLocations = ['0'];
+    list.forEach(ele => {
+      checkedTreeLocations.push(ele.id);
+    });
+    setCheckedLocations(checkedTreeLocations);

-    const formatLocationListForTree = (list = []) => {
-      const checkedTreeLocations = ['0'];
-      list.forEach(ele => {
-        checkedTreeLocations.push(ele.id);
-      });
-      setCheckedLocations(checkedTreeLocations);
-
-      function unflatten(array, p, t) {
-        let tree = typeof t !== 'undefined' ? t : [];
-        const parent = typeof p !== 'undefined' ? p : { id: '0' };
-        let children = _.filter(array, child => child.parentId === parent.id);
-        children = children.map(c => ({
-          title: (
-            <PopoverMenu
-              locationId={c.id}
-              locationType={c.locationType}
-              setAddModal={setAddModal}
-              setEditModal={setEditModal}
-              setDeleteModal={setDeleteModal}
-              setApModal={setApModal}
-            >
-              {c.name}
-            </PopoverMenu>
-          ),
-          value: `${c.id}`,
-          key: c.id,
-          ...c,
-        }));
-        if (!_.isEmpty(children)) {
-          if (parent.id === '0') {
-            tree = children;
-          } else {
-            parent.children = children;
-          }
-          _.each(children, child => unflatten(array, child));
+    function unflatten(array, p, t) {
+      let tree = typeof t !== 'undefined' ? t : [];
+      const parent = typeof p !== 'undefined' ? p : { id: '0' };
+      let children = _.filter(array, child => child.parentId === parent.id);
+      children = children.map(c => ({
+        title: (
+          <PopoverMenu
+            locationId={c.id}
+            locationType={c.locationType}
+            setAddModal={setAddModal}
+            setEditModal={setEditModal}
+            setDeleteModal={setDeleteModal}
+            setApModal={setApModal}
+          >
+            {c.name}
+          </PopoverMenu>
+        ),
+        value: `${c.id}`,
+        key: c.id,
+        ...c,
+      }));
+      if (!_.isEmpty(children)) {
+        if (parent.id === '0') {
+          tree = children;
+        } else {
+          parent.children = children;
        }
-        return tree;
+        _.each(children, child => unflatten(array, child));
      }
-      return [
-        {
-          title: (
-            <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
-              Network
-            </PopoverMenu>
-          ),
-          id: '0',
-          key: '0',
-          value: '0',
-          children: unflatten(list),
-        },
-      ];
-    };
+      return tree;
+    }
+    return [
+      {
+        title: (
+          <PopoverMenu locationId="0" locationType="NETWORK" setAddModal={setAddModal}>
+            Network
+          </PopoverMenu>
+        ),
+        id: '0',
+        key: '0',
+        value: '0',
+        children: unflatten(list),
+      },
+    ];
+  };

-    const handleAddLocation = ({ location }) => {
-      setAddModal(false);
-      let id;
-      let locationType;
+  const handleAddLocation = ({ location }) => {
+    setAddModal(false);
+    let id;
+    let locationType;

-      // adding location from root makes selecetedLocation null so we check for that
-      if (selectedLocation && selectedLocation.getLocation) {
-        id = selectedLocation.getLocation.id;
-        locationType = 'SITE';
-      } else {
-        id = '0';
-        locationType = 'COUNTRY';
-      }
+    // adding location from root makes selecetedLocation null so we check for that
+    if (selectedLocation && selectedLocation.getLocation) {
+      id = selectedLocation.getLocation.id;
+      locationType = 'SITE';
+    } else {
+      id = '0';
+      locationType = 'COUNTRY';
+    }

-      createLocation({
-        variables: {
-          locationType,
-          customerId,
-          parentId: id,
-          name: location,
-        },
-      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Location successfully added.',
-          });
-          refetch();
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Location could not be added.',
-          })
-        );
-    };
-
-    const handleEditLocation = ({ name }) => {
-      setEditModal(false);
-      const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;
-
-      updateLocation({
-        variables: {
-          customerId,
-          id,
-          parentId,
-          name,
-          locationType,
-          lastModifiedTimestamp,
-        },
-      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Location successfully edited.',
-          });
-          refetch();
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Location could not be edited.',
-          })
-        );
-    };
-
-    const handleDeleteLocation = () => {
-      setDeleteModal(false);
-      const { id } = selectedLocation.getLocation;
-
-      deleteLocation({ variables: { id } })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Location successfully deleted.',
-          });
-          refetch();
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Location could not be deleted.',
-          })
-        );
-    };
-
-    const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
-      setApModal(false);
-      const { id: locationId } = selectedLocation.getLocation;
-
-      createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Equipment successfully created.',
-          });
-          refetch();
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Equipment could not be created.',
-          })
-        );
-    };
-
-    const onSelect = (selectedKeys, info) => {
-      const { id } = info.node;
-      handleGetSingleLocation(id);
-    };
-
-    const onCheck = checkedKeys => {
-      setCheckedLocations(checkedKeys.checked);
-    };
-
-    const handleFetchProfiles = e => {
-      if (apProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
-
-      e.persist();
-      const { target } = e;
-
-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMore({
-          variables: { context: { ...apProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
+    createLocation({
+      variables: {
+        locationType,
+        customerId,
+        parentId: id,
+        name: location,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully added.',
        });
-      }
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be added.',
+        })
+      );
+  };

-      return true;
-    };
+  const handleEditLocation = ({ name }) => {
+    setEditModal(false);
+    const { id, parentId, locationType, lastModifiedTimestamp } = selectedLocation.getLocation;

-    const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
-      data,
-    ]);
+    updateLocation({
+      variables: {
+        customerId,
+        id,
+        parentId,
+        name,
+        locationType,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully edited.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be edited.',
+        })
+      );
+  };

-    return (
-      <NetworkPage
-        onSelect={onSelect}
-        onCheck={onCheck}
-        checkedLocations={checkedLocations}
-        locations={locationsTree}
-        selectedLocation={selectedLocation && selectedLocation.getLocation}
-        addModal={addModal}
-        editModal={editModal}
-        deleteModal={deleteModal}
-        apModal={apModal}
-        setAddModal={setAddModal}
-        setEditModal={setEditModal}
-        setDeleteModal={setDeleteModal}
-        setApModal={setApModal}
-        onAddLocation={handleAddLocation}
-        onEditLocation={handleEditLocation}
-        onDeleteLocation={handleDeleteLocation}
-        onCreateEquipment={handleCreateEquipment}
-        profiles={
-          (apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []
-        }
-        loadingProfile={loadingProfile}
-        errorProfile={errorProfile}
-        onFetchMoreProfiles={handleFetchProfiles}
-        isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
-      >
-        <Switch>
-          <Route
-            exact
-            path={`${path}/access-points/bulk-edit/:id`}
-            render={props => (
-              <BulkEditAccessPoints
-                locations={locationsTree}
-                checkedLocations={checkedLocations}
-                {...props}
-              />
-            )}
-          />
-          <Route
-            exact
-            path={`${path}/access-points`}
-            render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
-          />
-          <Route
-            exact
-            path={`${path}/access-points/:id/:tab`}
-            render={props => <AccessPointDetails locations={locationsTree} {...props} />}
-          />
+  const handleDeleteLocation = () => {
+    setDeleteModal(false);
+    const { id } = selectedLocation.getLocation;

-          <Route
-            exact
-            path={`${path}/client-devices`}
-            render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
-          />
-          <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
-          <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
-          <Redirect from={path} to={`${path}/access-points`} />
-        </Switch>
-      </NetworkPage>
-    );
-  },
-  GET_ALL_LOCATIONS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { customerId };
+    deleteLocation({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Location successfully deleted.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Location could not be deleted.',
+        })
+      );
+  };
+
+  const handleCreateEquipment = ({ inventoryId, name, profileId }) => {
+    setApModal(false);
+    const { id: locationId } = selectedLocation.getLocation;
+
+    createEquipment({ variables: { customerId, inventoryId, locationId, name, profileId } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Equipment successfully created.',
+        });
+        refetch();
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Equipment could not be created.',
+        })
+      );
+  };
+
+  const onSelect = (selectedKeys, info) => {
+    const { id } = info.node;
+    handleGetSingleLocation(id);
+  };
+
+  const onCheck = checkedKeys => {
+    setCheckedLocations(checkedKeys.checked);
+  };
+
+  const handleFetchProfiles = e => {
+    if (apProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...apProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const locationsTree = useMemo(() => formatLocationListForTree(data && data.getAllLocations), [
+    data,
+  ]);
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load locations." type="error" showIcon />;
+  }
+
+  return (
+    <NetworkPage
+      onSelect={onSelect}
+      onCheck={onCheck}
+      checkedLocations={checkedLocations}
+      locations={locationsTree}
+      selectedLocation={selectedLocation && selectedLocation.getLocation}
+      addModal={addModal}
+      editModal={editModal}
+      deleteModal={deleteModal}
+      apModal={apModal}
+      setAddModal={setAddModal}
+      setEditModal={setEditModal}
+      setDeleteModal={setDeleteModal}
+      setApModal={setApModal}
+      onAddLocation={handleAddLocation}
+      onEditLocation={handleEditLocation}
+      onDeleteLocation={handleDeleteLocation}
+      onCreateEquipment={handleCreateEquipment}
+      profiles={(apProfiles && apProfiles.getAllProfiles && apProfiles.getAllProfiles.items) || []}
+      loadingProfile={loadingProfile}
+      errorProfile={errorProfile}
+      onFetchMoreProfiles={handleFetchProfiles}
+      isLastProfilesPage={apProfiles?.getAllProfiles?.context?.lastPage}
+    >
+      <Switch>
+        <Route
+          exact
+          path={`${path}/access-points/bulk-edit/:id`}
+          render={props => (
+            <BulkEditAccessPoints
+              locations={locationsTree}
+              checkedLocations={checkedLocations}
+              {...props}
+            />
+          )}
+        />
+        <Route
+          exact
+          path={`${path}/access-points`}
+          render={props => <AccessPoints checkedLocations={checkedLocations} {...props} />}
+        />
+        <Route
+          exact
+          path={`${path}/access-points/:id/:tab`}
+          render={props => <AccessPointDetails locations={locationsTree} {...props} />}
+        />
+
+        <Route
+          exact
+          path={`${path}/client-devices`}
+          render={props => <ClientDevices checkedLocations={checkedLocations} {...props} />}
+        />
+        <Route exact path={`${path}/client-devices/:id`} component={ClientDeviceDetails} />
+        <Redirect from={`${path}/access-points/:id`} to={`${path}/access-points/:id/general`} />
+        <Redirect from={path} to={`${path}/access-points`} />
+      </Switch>
+    </NetworkPage>
+  );
+};

 export default Network;
--- a/app/containers/ProfileDetails/index.js
+++ b/app/containers/ProfileDetails/index.js
@@ -1,14 +1,14 @@
 import React, { useState, useContext } from 'react';
 import { useParams, Redirect } from 'react-router-dom';
 import { useQuery, useMutation, gql } from '@apollo/client';
-import { notification } from 'antd';
-import { ProfileDetails as ProfileDetailsPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Alert, notification } from 'antd';
+import { ProfileDetails as ProfileDetailsPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

+import { ROUTES } from 'constants/index';
 import UserContext from 'contexts/UserContext';
 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { FILE_UPLOAD } from 'graphql/mutations';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
-import { withQuery } from 'containers/QueryWrapper';

 const GET_PROFILE = gql`
  query GetProfile($id: ID!) {
@@ -69,179 +69,288 @@ const DELETE_PROFILE = gql`
  }
 `;

-const ProfileDetails = withQuery(
-  ({ data }) => {
-    const { customerId } = useContext(UserContext);
-    const { id } = useParams();
+const ProfileDetails = () => {
+  const { customerId } = useContext(UserContext);
+  const { id } = useParams();

-    const [redirect, setRedirect] = useState(false);
+  const [redirect, setRedirect] = useState(false);

-    const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
-      variables: { customerId, type: 'ssid' },
-    });
+  const { loading, error, data } = useQuery(GET_PROFILE, {
+    variables: { id },
+    fetchPolicy: 'network-only',
+  });

-    const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'radius' },
-      }
-    );
+  const { data: ssidProfiles, fetchMore } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'ssid' },
+  });

-    const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'captive_portal' },
-      }
-    );
+  const { data: radiusProfiles, fetchMore: fetchMoreRadiusProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'radius' },
+    }
+  );

-    const [updateProfile] = useMutation(UPDATE_PROFILE);
-    const [deleteProfile] = useMutation(DELETE_PROFILE);
+  const { data: captiveProfiles, fetchMore: fetchMoreCaptiveProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'captive_portal' },
+    }
+  );

-    const [fileUpload] = useMutation(FILE_UPLOAD);
+  const { data: venueProfiles, fetchMore: fetchMoreVenueProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'passpoint_venue' },
+  });

-    const handleDeleteProfile = () => {
-      deleteProfile({ variables: { id } })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profile successfully deleted.',
-          });
+  const { data: operatorProfiles, fetchMore: fetchMoreOperatorProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_operator' },
+    }
+  );

-          setRedirect(true);
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Profile could not be deleted.',
-          })
-        );
-    };
+  const { data: idProviderProfiles, fetchMore: fetchMoreIdProviderProfiles } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'passpoint_osu_id_provider' },
+    }
+  );

-    const handleUpdateProfile = (
-      name,
-      details,
-      childProfileIds = data.getProfile.childProfileIds
-    ) => {
-      updateProfile({
-        variables: {
-          ...data.getProfile,
-          name,
-          childProfileIds,
-          details,
-        },
+  const { data: rfProfiles, fetchMore: fetchMoreRfProfiles } = useQuery(GET_ALL_PROFILES(), {
+    variables: { customerId, type: 'rf' },
+  });
+
+  const [updateProfile] = useMutation(UPDATE_PROFILE);
+  const [deleteProfile] = useMutation(DELETE_PROFILE);
+
+  const [fileUpload] = useMutation(FILE_UPLOAD);
+
+  const handleDeleteProfile = () => {
+    deleteProfile({ variables: { id } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profile successfully deleted.',
+        });
+
+        setRedirect(true);
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profile successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profile could not be deleted.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Profile could not be updated.',
-          })
-        );
-    };
+      );
+  };

-    const handleFileUpload = (fileName, file) =>
-      fileUpload({ variables: { fileName, file } })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'File successfully uploaded.',
-          });
+  const handleUpdateProfile = (
+    name,
+    details,
+    childProfileIds = data.getProfile.childProfileIds
+  ) => {
+    updateProfile({
+      variables: {
+        ...data.getProfile,
+        name,
+        childProfileIds,
+        details,
+      },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profile successfully updated.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profile could not be updated.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'File could not be uploaded.',
-          })
-        );
+      );
+  };

-    const handleFetchProfiles = e => {
-      if (ssidProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
-
-      e.persist();
-      const { target } = e;
-
-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMore({
-          variables: { context: { ...ssidProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
+  const handleFileUpload = (fileName, file) =>
+    fileUpload({ variables: { fileName, file } })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'File successfully uploaded.',
        });
-      }
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'File could not be uploaded.',
+        })
+      );

-      return true;
-    };
-
-    const handleFetchRadiusProfiles = e => {
-      if (radiusProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
-
-      e.persist();
-      const { target } = e;
-
-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMoreRadiusProfiles({
-          variables: { context: { ...radiusProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
-        });
-      }
-
-      return true;
-    };
-
-    const handleFetchCaptiveProfiles = e => {
-      if (captiveProfiles.getAllProfiles.context.lastPage) {
-        return false;
-      }
-
-      e.persist();
-      const { target } = e;
-
-      if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
-        fetchMoreCaptiveProfiles({
-          variables: { context: { ...captiveProfiles.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
-        });
-      }
-
-      return true;
-    };
-
-    if (redirect) {
-      return <Redirect to="/profiles" />;
+  const handleFetchProfiles = e => {
+    if (ssidProfiles.getAllProfiles.context.lastPage) {
+      return false;
    }

-    return (
-      <ProfileDetailsPage
-        name={data.getProfile.name}
-        profileType={data.getProfile.profileType}
-        details={data.getProfile.details}
-        childProfileIds={data.getProfile.childProfileIds}
-        onDeleteProfile={handleDeleteProfile}
-        onUpdateProfile={handleUpdateProfile}
-        ssidProfiles={
-          (ssidProfiles && ssidProfiles.getAllProfiles && ssidProfiles.getAllProfiles.items) || []
-        }
-        radiusProfiles={radiusProfiles?.getAllProfiles?.items}
-        captiveProfiles={captiveProfiles?.getAllProfiles?.items}
-        fileUpload={handleFileUpload}
-        onFetchMoreProfiles={handleFetchProfiles}
-        onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
-        onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
-      />
-    );
-  },
-  GET_PROFILE,
-  () => {
-    const { id } = useParams();
-    return { id, fetchPolicy: 'network-only' };
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMore({
+        variables: { context: { ...ssidProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchRadiusProfiles = e => {
+    if (radiusProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRadiusProfiles({
+        variables: { context: { ...radiusProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchCaptiveProfiles = e => {
+    if (captiveProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreCaptiveProfiles({
+        variables: { context: { ...captiveProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchVenueProfiles = e => {
+    if (venueProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreVenueProfiles({
+        variables: { context: { ...venueProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchRfProfiles = e => {
+    if (rfProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreRfProfiles({
+        variables: { context: { ...rfProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchOperatorProfiles = e => {
+    if (operatorProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreOperatorProfiles({
+        variables: { context: { ...operatorProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  const handleFetchIdProviderProfiles = e => {
+    if (idProviderProfiles.getAllProfiles.context.lastPage) {
+      return false;
+    }
+
+    e.persist();
+    const { target } = e;
+
+    if (target.scrollTop + target.offsetHeight === target.scrollHeight) {
+      fetchMoreIdProviderProfiles({
+        variables: { context: { ...idProviderProfiles.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+
+    return true;
+  };
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load profile data." type="error" showIcon />
+    );
+  }
+
+  if (redirect) {
+    return <Redirect to={ROUTES.profiles} />;
+  }
+
+  return (
+    <ProfileDetailsPage
+      name={data.getProfile.name}
+      profileType={data.getProfile.profileType}
+      details={data.getProfile.details}
+      childProfiles={data.getProfile.childProfiles}
+      childProfileIds={data.getProfile.childProfileIds}
+      onDeleteProfile={handleDeleteProfile}
+      onUpdateProfile={handleUpdateProfile}
+      ssidProfiles={ssidProfiles?.getAllProfiles?.items}
+      rfProfiles={rfProfiles?.getAllProfiles?.items}
+      radiusProfiles={radiusProfiles?.getAllProfiles?.items}
+      captiveProfiles={captiveProfiles?.getAllProfiles?.items}
+      venueProfiles={venueProfiles?.getAllProfiles?.items}
+      operatorProfiles={operatorProfiles?.getAllProfiles?.items}
+      idProviderProfiles={idProviderProfiles?.getAllProfiles?.items}
+      fileUpload={handleFileUpload}
+      onFetchMoreProfiles={handleFetchProfiles}
+      onFetchMoreRfProfiles={handleFetchRfProfiles}
+      onFetchMoreRadiusProfiles={handleFetchRadiusProfiles}
+      onFetchMoreCaptiveProfiles={handleFetchCaptiveProfiles}
+      onFetchMoreVenueProfiles={handleFetchVenueProfiles}
+      onFetchMoreOperatorProfiles={handleFetchOperatorProfiles}
+      onFetchMoreIdProviderProfiles={handleFetchIdProviderProfiles}
+    />
+  );
+};

 export default ProfileDetails;
--- a/app/containers/Profiles/index.js
+++ b/app/containers/Profiles/index.js
@@ -1,13 +1,12 @@
 import React, { useContext, useEffect } from 'react';
-import { useMutation, gql } from '@apollo/client';
+import { useQuery, useMutation, gql } from '@apollo/client';
 import { useLocation } from 'react-router-dom';
-import { notification } from 'antd';
-import { Profile as ProfilePage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Alert, notification } from 'antd';
+import { Profile as ProfilePage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import { GET_ALL_PROFILES } from 'graphql/queries';
 import { updateQueryGetAllProfiles } from 'graphql/functions';
 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';

 const DELETE_PROFILE = gql`
  mutation DeleteProfile($id: ID!) {
@@ -17,85 +16,94 @@ const DELETE_PROFILE = gql`
  }
 `;

-const Profiles = withQuery(
-  ({ data, fetchMore, refetch }) => {
-    const [deleteProfile] = useMutation(DELETE_PROFILE);
-    const { customerId } = useContext(UserContext);
-    const location = useLocation();
+const Profiles = () => {
+  const { customerId } = useContext(UserContext);
+  const { loading, error, data, refetch, fetchMore } = useQuery(
+    GET_ALL_PROFILES(`equipmentCount`),
+    {
+      variables: { customerId },
+      fetchPolicy: 'network-only',
+    }
+  );
+  const [deleteProfile] = useMutation(DELETE_PROFILE);
+  const location = useLocation();

-    useEffect(() => {
-      if (location.state && location.state.refetch) {
-        refetch({
-          variables: { refresh: Date.now() },
-        });
-      }
-    }, []);
-
-    const reloadTable = () => {
+  useEffect(() => {
+    if (location.state && location.state.refetch) {
      refetch({
        variables: { refresh: Date.now() },
-      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profiles reloaded.',
-          });
-        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Profiles could not be reloaded.',
-          })
-        );
-    };
+      });
+    }
+  }, []);

-    const handleLoadMore = () => {
-      if (!data.getAllProfiles.context.lastPage) {
-        fetchMore({
-          variables: { context: { ...data.getAllProfiles.context } },
-          updateQuery: updateQueryGetAllProfiles,
+  const reloadTable = () => {
+    refetch({
+      variables: { refresh: Date.now() },
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profiles reloaded.',
        });
-      }
-    };
-
-    const handleDeleteProfile = id => {
-      deleteProfile({
-        variables: { id },
-        refetchQueries: [
-          {
-            query: GET_ALL_PROFILES(`equipmentCount`),
-            variables: { customerId },
-          },
-        ],
      })
-        .then(() => {
-          notification.success({
-            message: 'Success',
-            description: 'Profile successfully deleted.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profiles could not be reloaded.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Profile could not be deleted.',
-          })
-        );
-    };
-    return (
-      <ProfilePage
-        data={data.getAllProfiles.items}
-        onReload={reloadTable}
-        isLastPage={data?.getAllProfiles?.context?.lastPage}
-        onDeleteProfile={handleDeleteProfile}
-        onLoadMore={handleLoadMore}
-      />
-    );
-  },
-  GET_ALL_PROFILES(`equipmentCount`),
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { customerId, fetchPolicy: 'network-only' };
+      );
+  };
+
+  const handleLoadMore = () => {
+    if (!data.getAllProfiles.context.lastPage) {
+      fetchMore({
+        variables: { context: { ...data.getAllProfiles.context } },
+        updateQuery: updateQueryGetAllProfiles,
+      });
+    }
+  };
+
+  const handleDeleteProfile = id => {
+    deleteProfile({
+      variables: { id },
+      refetchQueries: [
+        {
+          query: GET_ALL_PROFILES(`equipmentCount`),
+          variables: { customerId },
+        },
+      ],
+    })
+      .then(() => {
+        notification.success({
+          message: 'Success',
+          description: 'Profile successfully deleted.',
+        });
+      })
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Profile could not be deleted.',
+        })
+      );
+  };
+
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
+  }
+
+  return (
+    <ProfilePage
+      data={data.getAllProfiles.items}
+      onReload={reloadTable}
+      isLastPage={data?.getAllProfiles?.context?.lastPage}
+      onDeleteProfile={handleDeleteProfile}
+      onLoadMore={handleLoadMore}
+    />
+  );
+};

 export default Profiles;
--- a/app/containers/QueryWrapper/index.js
+++ b/app/containers/QueryWrapper/index.js
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Alert } from 'antd';
-import { Loading } from '@tip-wlan/wlan-cloud-ui-library';
-import { useQuery } from '@apollo/client';
-import { Redirect } from 'react-router-dom';
-
-export const withQuery = (Comp, query, getVariables) => props => {
-  const { loading, error, data, refetch, fetchMore } = useQuery(query, {
-    variables: getVariables(),
-  });
-
-  if (loading) {
-    return <Loading />;
-  }
-
-  if (error) {
-    if (error.message === '403: Forbidden' || error.message === '401: Unauthorized') {
-      return <Redirect to="/login" />;
-    }
-
-    return <Alert message="Error" description="Failed to load profiles." type="error" showIcon />;
-  }
-
-  return <Comp {...props} data={data} fetchMore={fetchMore} refetch={refetch} />;
-};
--- a/app/containers/System/containers/AutoProvision/index.js
+++ b/app/containers/System/containers/AutoProvision/index.js
@@ -1,82 +1,87 @@
 import React, { useContext } from 'react';
 import { useQuery, useMutation } from '@apollo/client';
-import { notification } from 'antd';
-import { AutoProvision as AutoProvisionPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { Alert, notification } from 'antd';
+import { AutoProvision as AutoProvisionPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';

 import UserContext from 'contexts/UserContext';
 import { GET_CUSTOMER, GET_ALL_LOCATIONS, GET_ALL_PROFILES } from 'graphql/queries';
 import { UPDATE_CUSTOMER } from 'graphql/mutations';
-import { withQuery } from 'containers/QueryWrapper';

-const AutoProvision = withQuery(
-  ({ data, refetch }) => {
-    const { customerId } = useContext(UserContext);
-    const [updateCustomer] = useMutation(UPDATE_CUSTOMER);
+const AutoProvision = () => {
+  const { customerId } = useContext(UserContext);
+  const { data, loading, error, refetch } = useQuery(GET_CUSTOMER, {
+    variables: { id: customerId },
+  });
+  const [updateCustomer] = useMutation(UPDATE_CUSTOMER);

-    const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
-      GET_ALL_LOCATIONS,
-      {
-        variables: { customerId },
-      }
-    );
-    const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
-      GET_ALL_PROFILES(),
-      {
-        variables: { customerId, type: 'equipment_ap', limit: 100 },
-      }
-    );
+  const { data: dataLocation, loading: loadingLoaction, error: errorLocation } = useQuery(
+    GET_ALL_LOCATIONS,
+    {
+      variables: { customerId },
+    }
+  );
+  const { data: dataProfile, loading: loadingProfile, error: errorProfile } = useQuery(
+    GET_ALL_PROFILES(),
+    {
+      variables: { customerId, type: 'equipment_ap', limit: 100 },
+    }
+  );

-    const handleUpdateCustomer = (
-      id,
-      email,
-      name,
-      details,
-      createdTimestamp,
-      lastModifiedTimestamp
-    ) => {
-      updateCustomer({
-        variables: {
-          id,
-          email,
-          name,
-          details,
-          createdTimestamp,
-          lastModifiedTimestamp,
-        },
+  const handleUpdateCustomer = (
+    id,
+    email,
+    name,
+    details,
+    createdTimestamp,
+    lastModifiedTimestamp
+  ) => {
+    updateCustomer({
+      variables: {
+        id,
+        email,
+        name,
+        details,
+        createdTimestamp,
+        lastModifiedTimestamp,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Settings successfully updated.',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Settings successfully updated.',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Settings could not be updated.',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Settings could not be updated.',
-          })
-        );
-    };
+      );
+  };

-    return (
-      <AutoProvisionPage
-        data={data && data.getCustomer}
-        dataLocation={dataLocation && dataLocation.getAllLocations}
-        dataProfile={dataProfile && dataProfile.getAllProfiles.items}
-        loadingLoaction={loadingLoaction}
-        loadingProfile={loadingProfile}
-        errorLocation={errorLocation}
-        errorProfile={errorProfile}
-        onUpdateCustomer={handleUpdateCustomer}
-      />
-    );
-  },
-  GET_CUSTOMER,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return { id: customerId };
+  if (loading) {
+    return <Loading />;
  }
-);
+
+  if (error) {
+    return (
+      <Alert message="Error" description="Failed to load Customer Data." type="error" showIcon />
+    );
+  }
+
+  return (
+    <AutoProvisionPage
+      data={data && data.getCustomer}
+      dataLocation={dataLocation && dataLocation.getAllLocations}
+      dataProfile={dataProfile && dataProfile.getAllProfiles.items}
+      loadingLoaction={loadingLoaction}
+      loadingProfile={loadingProfile}
+      errorLocation={errorLocation}
+      errorProfile={errorProfile}
+      onUpdateCustomer={handleUpdateCustomer}
+    />
+  );
+};

 export default AutoProvision;
--- a/app/containers/System/containers/BlockedList/index.js
+++ b/app/containers/System/containers/BlockedList/index.js
@@ -1,76 +1,78 @@
 import React, { useContext } from 'react';
-import { useMutation } from '@apollo/client';
-import { notification } from 'antd';
-import { BlockedList as BlockedListPage } from '@tip-wlan/wlan-cloud-ui-library';
+import { useQuery, useMutation } from '@apollo/client';
+import { Alert, notification } from 'antd';
+import { BlockedList as BlockedListPage, Loading } from '@tip-wlan/wlan-cloud-ui-library';
 import { GET_BLOCKED_CLIENTS } from 'graphql/queries';
 import { UPDATE_CLIENT, ADD_BLOCKED_CLIENT } from 'graphql/mutations';
 import UserContext from 'contexts/UserContext';
-import { withQuery } from 'containers/QueryWrapper';

-const BlockedList = withQuery(
-  ({ refetch, data }) => {
-    const { customerId } = useContext(UserContext);
-    const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
-    const [updateClient] = useMutation(UPDATE_CLIENT);
+const BlockedList = () => {
+  const { customerId } = useContext(UserContext);
+  const { data, error, loading, refetch } = useQuery(GET_BLOCKED_CLIENTS, {
+    variables: { customerId },
+  });
+  const [addClient] = useMutation(ADD_BLOCKED_CLIENT);
+  const [updateClient] = useMutation(UPDATE_CLIENT);

-    const handleAddClient = macAddress => {
-      addClient({
-        variables: {
-          customerId,
-          macAddress,
-        },
+  const handleAddClient = macAddress => {
+    addClient({
+      variables: {
+        customerId,
+        macAddress,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Client successfully added to Blocked List',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Client successfully added to Blocked List',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Client could not be added to Blocked List',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Client could not be added to Blocked List',
-          })
-        );
-    };
+      );
+  };

-    const handleUpdateClient = (macAddress, details) => {
-      updateClient({
-        variables: {
-          customerId,
-          macAddress,
-          details,
-        },
+  const handleUpdateClient = (macAddress, details) => {
+    updateClient({
+      variables: {
+        customerId,
+        macAddress,
+        details,
+      },
+    })
+      .then(() => {
+        refetch();
+        notification.success({
+          message: 'Success',
+          description: 'Client successfully removed from Blocked List',
+        });
      })
-        .then(() => {
-          refetch();
-          notification.success({
-            message: 'Success',
-            description: 'Client successfully removed from Blocked List',
-          });
+      .catch(() =>
+        notification.error({
+          message: 'Error',
+          description: 'Client could not be removed from Blocked List',
        })
-        .catch(() =>
-          notification.error({
-            message: 'Error',
-            description: 'Client could not be removed from Blocked List',
-          })
-        );
-    };
+      );
+  };

+  if (loading) return <Loading />;
+
+  if (error)
    return (
-      <BlockedListPage
-        data={data && data.getBlockedClients}
-        onUpdateClient={handleUpdateClient}
-        onAddClient={handleAddClient}
-      />
+      <Alert message="Error" description="Failed to load Client Data." type="error" showIcon />
    );
-  },
-  GET_BLOCKED_CLIENTS,
-  () => {
-    const { customerId } = useContext(UserContext);
-    return customerId;
-  }
-);
+
+  return (
+    <BlockedListPage
+      data={data && data.getBlockedClients}
+      onUpdateClient={handleUpdateClient}
+      onAddClient={handleAddClient}
+    />
+  );
+};

 export default BlockedList;
--- a/app/containers/System/containers/Firmware/index.js
+++ b/app/containers/System/containers/Firmware/index.js
@@ -22,7 +22,7 @@ const Firmware = () => {
  const [
    getAllFirmware,
    { data: firmwareVersionData, loading: firmwareVersionLoading },
-  ] = useLazyQuery(GET_ALL_FIRMWARE);
+  ] = useLazyQuery(GET_ALL_FIRMWARE, { fetchPolicy: 'network-only' });

  const {
    data: trackAssignmentData,
--- a/app/contexts/UserProvider/index.js
+++ b/app/contexts/UserProvider/index.js
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';

 import UserContext from 'contexts/UserContext';

-const UserProvider = ({ children, id, email, role, customerId, updateUser, updateToken }) => (
-  <UserContext.Provider value={{ id, email, role, customerId, updateUser, updateToken }}>
+const UserProvider = ({ children, id, email, roles, customerId, updateUser, updateToken }) => (
+  <UserContext.Provider value={{ id, email, roles, customerId, updateUser, updateToken }}>
    {children}
  </UserContext.Provider>
 );
@@ -15,14 +15,14 @@ UserProvider.propTypes = {
  updateToken: PropTypes.func.isRequired,
  id: PropTypes.number,
  email: PropTypes.string,
-  role: PropTypes.string,
+  roles: PropTypes.instanceOf(Array),
  customerId: PropTypes.number,
 };

 UserProvider.defaultProps = {
  id: null,
  email: null,
-  role: null,
+  roles: [],
  customerId: null,
 };

--- a/app/graphql/queries.js
+++ b/app/graphql/queries.js
@@ -42,12 +42,12 @@ export const FILTER_EQUIPMENT = gql`
        profile {
          name
        }
+        baseMacAddress
+        manufacturer
        status {
          protocol {
            details {
              reportedIpV4Addr
-              reportedMacAddr
-              manufacturer
            }
          }
          osPerformance {
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -1,4 +1,4 @@
 $sidebar-width: 234px;
 $sidebar-collapsed-width: 80px;

-$header-height: 64px;
+$header-height: 64px;
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "0.5.3",
+  "version": "0.7.5",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1845,9 +1845,9 @@
      }
    },
    "@tip-wlan/wlan-cloud-ui-library": {
-      "version": "0.3.16",
-      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.3.16.tgz",
-      "integrity": "sha1-y/s6saHvVfKSGagl8gwNzutFjxw="
+      "version": "0.7.6",
+      "resolved": "https://tip.jfrog.io/artifactory/api/npm/tip-wlan-cloud-npm-repo/@tip-wlan/wlan-cloud-ui-library/-/@tip-wlan/wlan-cloud-ui-library-0.7.6.tgz",
+      "integrity": "sha1-GW0Wz1L8OnAwRqlyjUNZnGIuWQg="
    },
    "@types/anymatch": {
      "version": "1.3.1",
@@ -2615,12 +2615,6 @@
      "integrity": "sha1-45sJrqne+Gao8gbiiK9jkZuuOcQ=",
      "dev": true
    },
-    "array-differ": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/array-differ/-/array-differ-3.0.0.tgz",
-      "integrity": "sha512-THtfYS6KtME/yIAhKjZ2ul7XI96lQGHRputJQHO80LAWQnuGP4iCIN8vdMRboGbIEYBwU33q8Tch1os2+X0kMg==",
-      "dev": true
-    },
    "array-equal": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
@@ -2695,12 +2689,6 @@
        "function-bind": "^1.1.1"
      }
    },
-    "arrify": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-2.0.1.tgz",
-      "integrity": "sha512-3duEwti880xqi4eAMN8AyR4a0ByT90zoYdLlevfrvU43vb0YZwZVfxOgxWrLXXXpyugL0hNZc9G6BiB5B3nUug==",
-      "dev": true
-    },
    "asn1": {
      "version": "0.2.4",
      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -7395,9 +7383,9 @@
      "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ=="
    },
    "highcharts": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.1.0.tgz",
-      "integrity": "sha512-4KXq9t2/PU0cqKUtET7om9Kh5AyOinIn4vYi62oYVsb4ql5wyUYW06f9Si/ERG2Thoy/rcwNmR77upKjg8xhqQ=="
+      "version": "8.2.0",
+      "resolved": "https://registry.npmjs.org/highcharts/-/highcharts-8.2.0.tgz",
+      "integrity": "sha512-s3R7UEaMWUDJNxFfdjuiOtI8rnSvhEZUNN4TA7LiDRc9Tw7DUKvTv5WXSTYzxojokLbybwwlf9t3jg/meAUTnQ=="
    },
    "highcharts-react-official": {
      "version": "3.0.0",
@@ -11193,12 +11181,6 @@
        "run-queue": "^1.0.3"
      }
    },
-    "mri": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/mri/-/mri-1.1.6.tgz",
-      "integrity": "sha512-oi1b3MfbyGa7FJMP9GmLTttni5JoICpYBRlq+x5V16fZbLsnL9N3wFqqIm/nIG43FjUFkFh9Epzp/kzUGUnJxQ==",
-      "dev": true
-    },
    "ms": {
      "version": "2.1.2",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -11221,27 +11203,6 @@
      "integrity": "sha1-iZ8R2WhuXgXLkbNdXw5jt3PPyQE=",
      "dev": true
    },
-    "multimatch": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/multimatch/-/multimatch-4.0.0.tgz",
-      "integrity": "sha512-lDmx79y1z6i7RNx0ZGCPq1bzJ6ZoDDKbvh7jxr9SJcWLkShMzXrHbYVpTdnhNM5MXpDUxCQ4DgqVttVXlBgiBQ==",
-      "dev": true,
-      "requires": {
-        "@types/minimatch": "^3.0.3",
-        "array-differ": "^3.0.0",
-        "array-union": "^2.1.0",
-        "arrify": "^2.0.1",
-        "minimatch": "^3.0.4"
-      },
-      "dependencies": {
-        "array-union": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
-          "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
-          "dev": true
-        }
-      }
-    },
    "mute-stream": {
      "version": "0.0.8",
      "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -11313,9 +11274,9 @@
      }
    },
    "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
+      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
      "dev": true
    },
    "node-gyp": {
@@ -12836,107 +12797,6 @@
        }
      }
    },
-    "pretty-quick": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/pretty-quick/-/pretty-quick-2.0.2.tgz",
-      "integrity": "sha512-aLb6vtOTEfJDwi1w+MBTeE20GwPVUYyn6IqNg6TtGpiOB1W3y6vKcsGFjqGeaaEtQgMLSPXTWONqh33UBuwG8A==",
-      "dev": true,
-      "requires": {
-        "chalk": "^2.4.2",
-        "execa": "^2.1.0",
-        "find-up": "^4.1.0",
-        "ignore": "^5.1.4",
-        "mri": "^1.1.4",
-        "multimatch": "^4.0.0"
-      },
-      "dependencies": {
-        "cross-spawn": {
-          "version": "7.0.3",
-          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
-          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.1.0",
-            "shebang-command": "^2.0.0",
-            "which": "^2.0.1"
-          }
-        },
-        "execa": {
-          "version": "2.1.0",
-          "resolved": "https://registry.npmjs.org/execa/-/execa-2.1.0.tgz",
-          "integrity": "sha512-Y/URAVapfbYy2Xp/gb6A0E7iR8xeqOCXsuuaoMn7A5PzrXUK84E1gyiEfq0wQd/GHA6GsoHWwhNq8anb0mleIw==",
-          "dev": true,
-          "requires": {
-            "cross-spawn": "^7.0.0",
-            "get-stream": "^5.0.0",
-            "is-stream": "^2.0.0",
-            "merge-stream": "^2.0.0",
-            "npm-run-path": "^3.0.0",
-            "onetime": "^5.1.0",
-            "p-finally": "^2.0.0",
-            "signal-exit": "^3.0.2",
-            "strip-final-newline": "^2.0.0"
-          }
-        },
-        "get-stream": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
-          "integrity": "sha512-nBF+F1rAZVCu/p7rjzgA+Yb4lfYXrpl7a6VmJrU8wF9I1CKvP/QwPNZHnOlwbTkY6dvtFIzFMSyQXbLoTQPRpA==",
-          "dev": true,
-          "requires": {
-            "pump": "^3.0.0"
-          }
-        },
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        },
-        "is-stream": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
-          "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
-          "dev": true
-        },
-        "npm-run-path": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-3.1.0.tgz",
-          "integrity": "sha512-Dbl4A/VfiVGLgQv29URL9xshU8XDY1GeLy+fsaZ1AA8JDSfjvr5P5+pzRbWqRSBxk6/DW7MIh8lTM/PaGnP2kg==",
-          "dev": true,
-          "requires": {
-            "path-key": "^3.0.0"
-          }
-        },
-        "p-finally": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-2.0.1.tgz",
-          "integrity": "sha512-vpm09aKwq6H9phqRQzecoDpD8TmVyGw70qmWlyq5onxY7tqyTTFVvxMykxQSQKILBSFlbXpypIw2T1Ml7+DDtw==",
-          "dev": true
-        },
-        "path-key": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
-          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==",
-          "dev": true
-        },
-        "shebang-command": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
-          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
-          "dev": true,
-          "requires": {
-            "shebang-regex": "^3.0.0"
-          }
-        },
-        "shebang-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
-          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
-          "dev": true
-        }
-      }
-    },
    "private": {
      "version": "0.1.8",
      "resolved": "https://registry.npmjs.org/private/-/private-0.1.8.tgz",
@@ -14603,12 +14463,12 @@
      "dev": true
    },
    "selfsigned": {
-      "version": "1.10.8",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
-      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
+      "version": "1.10.7",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
+      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
      "dev": true,
      "requires": {
-        "node-forge": "^0.10.0"
+        "node-forge": "0.9.0"
      }
    },
    "semver": {
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "wlan-cloud-ui",
-  "version": "0.5.3",
+  "version": "0.7.5",
  "author": "ConnectUs",
  "description": "React Portal",
  "engines": {
@@ -10,18 +10,18 @@
  "scripts": {
    "test": "jest --passWithNoTests --coverage",
    "start": "cross-env NODE_ENV=development webpack-dev-server",
-    "start:bare": "cross-env API=https://wlan-graphql.zone3.lab.connectus.ai NODE_ENV=bare webpack-dev-server",
+    "start:bare": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=bare webpack-dev-server",
    "start:dev": "cross-env API=https://wlan-graphql.qa.lab.wlan.tip.build NODE_ENV=development webpack-dev-server",
    "build": "webpack --mode=production",
-    "format": "prettier --write \"app/**/*.js\"",
-    "eslint-fix": "eslint --fix \"app/**/*.js\"",
-    "eslint": "eslint \"app/**/*.js\" --max-warnings=0"
+    "format": "prettier --write 'app/**/*{.js,.scss}'",
+    "eslint-fix": "eslint --fix 'app/**/*.js'",
+    "eslint": "eslint 'app/**/*.js' --max-warnings=0"
  },
  "license": "MIT",
  "dependencies": {
    "@ant-design/icons": "^4.2.1",
    "@apollo/client": "^3.1.3",
-    "@tip-wlan/wlan-cloud-ui-library": "^0.3.16",
+    "@tip-wlan/wlan-cloud-ui-library": "^0.7.6",
    "antd": "^4.5.2",
    "apollo-upload-client": "^13.0.0",
    "clean-webpack-plugin": "^3.0.0",
@@ -75,7 +75,6 @@
    "lint-staged": "^10.0.8",
    "node-sass": "^4.13.1",
    "prettier": "^1.19.1",
-    "pretty-quick": "^2.0.1",
    "react-test-renderer": "^16.13.1",
    "sass-loader": "^8.0.2",
    "style-loader": "^1.1.3",
@@ -84,22 +83,20 @@
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.2"
  },
-  "precommit": "NODE_ENV=production lint-staged",
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "IE 10"
  ],
-  "lint-staged": {
-    "*.{js,jsx}": [
-      "pretty-quick --staged",
-      "eslint . --fix \"app/**/*.js\" --max-warnings=0",
-      "git add"
-    ]
-  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
+  },
+  "lint-staged": {
+    "*.{js,jsx}": [
+      "eslint --fix 'app/**/*.js' --max-warnings=0",
+      "prettier --write"
+    ]
  }
 }
Author	SHA1	Message	Date
ToanDo	0439b052ca	fixed spelling	2020-12-24 14:18:22 -05:00
ToanDo	448a198c23	adjusted component	2020-12-24 14:17:11 -05:00
ToanDo	f989132de6	fixed usersDropdown import	2020-12-24 14:05:15 -05:00
ToanDo	a6406e2be3	test passing down component	2020-12-23 16:59:20 -05:00
ToanDo	0748ddbed1	added currentUserEmail prop & alter Account title	2020-12-16 13:07:39 -05:00
Sean Macfarlane	c39ee3e2c0	update version	2020-12-14 22:59:10 -05:00
Sean Macfarlane	017a3de539	Merge pull request #83 from Telecominfraproject/bugfix/NETEXP-783 bugfix/NETEXP-783: AP table uses baseMacAddress and manufacturer	2020-12-14 22:30:34 -05:00
Sean Macfarlane	85ef801831	fixed macaddress	2020-12-14 22:25:12 -05:00
ToanDo	9582ca56af	AP table uses baseMacAddress and manufacturer	2020-12-14 21:49:32 -05:00
Sean Macfarlane	26c11502e3	Merge pull request #82 from Telecominfraproject/hotfix/NETEXP-558 hotfix/NETEXP-558: Auto updates firmware version	2020-12-13 14:38:21 -05:00
Sean Macfarlane	83e4bc5e33	updated library	2020-12-13 12:12:54 -05:00
Sean Macfarlane	a89ac6e550	Merge pull request #81 from Telecominfraproject/hotfix/NETEXP-750 hotfix/NETEXP-750: Friendly Radio Names	2020-12-13 11:55:58 -05:00
chris-cosentino	3910e75712	updated list of firmware targets	2020-12-13 01:28:25 -05:00
chris-cosentino	2bf34a62e3	additional user friendly radio label fixes	2020-12-12 20:49:18 -05:00
Sean Macfarlane	2d06e56ffb	update version	2020-12-12 18:43:39 -05:00
chris-cosentino	f13ec45465	added radioTypes constant	2020-12-12 17:50:35 -05:00
Sean Macfarlane	d2fe2c7dc3	Merge pull request #80 from Telecominfraproject/bugfix/NETEXP-741 bugfix/NETEXP-741: Passed down currentUserId to accounts page	2020-12-12 15:45:18 -05:00
ToanDo	2aeaaab3bc	Passed down currentUserId to accounts page	2020-12-12 15:17:51 -05:00
Sean Macfarlane	4dbed9922b	updated library	2020-12-10 14:01:07 -05:00
Sean Macfarlane	7d2b1ea5fc	Merge pull request #78 from Telecominfraproject/hotfix/WIFI-640 Hotfix/WIFI-640: Added delete button	2020-12-09 17:24:00 -05:00
chris-cosentino	6dd251dd94	added fetch policy	2020-12-09 16:26:35 -05:00
Sean Macfarlane	285444f0b9	Merge pull request #79 from Telecominfraproject/feature/WIFI-1089 Feature/WIFI-1089: Added venue, operator, & id provider props	2020-12-09 16:13:52 -05:00
Sean Macfarlane	7c16a50e81	Merge branch 'master' into feature/WIFI-1089	2020-12-09 15:48:19 -05:00
chris-cosentino	8f2a33b625	used history push and removed cache when delete ap	2020-12-09 11:04:11 -05:00
chris-cosentino	3be405a577	added delete equipment	2020-12-08 15:52:30 -05:00
Toan Do	940eeb72fd	Add childProfiles prop	2020-12-07 11:03:25 -05:00
Toan Do	0c14857dac	removed unused props	2020-12-03 17:36:40 -05:00
Sean Macfarlane	612e9eb449	fixed precommit	2020-12-03 13:55:29 -05:00
Sean Macfarlane	e02bd79c26	fixed precommit	2020-12-03 13:54:18 -05:00
Sean Macfarlane	0b1e2a7427	Merge pull request #77 from Telecominfraproject/hotfix/WIFI-1133 hotfix/WIFI-1133: Added rfProfiles and fetchMoreRfProfiles	2020-12-03 13:49:40 -05:00
Sean Macfarlane	ea605f333c	update package	2020-12-03 13:49:10 -05:00
Sean Macfarlane	1e8306ad4b	updated version and fixed precommit	2020-12-03 12:55:47 -05:00
Sean Macfarlane	965dca7e7f	Merge branch 'master' into hotfix/WIFI-1133	2020-12-03 12:39:03 -05:00
Toan Do	de2570662a	added childProfiles prop	2020-12-01 15:52:16 -05:00
Toan Do	64a1ecae8a	Added childProfiles prop	2020-12-01 15:17:40 -05:00
Toan Do	0ceff9e42e	adjusted ssid & rf profiles props	2020-12-01 10:10:05 -05:00
Toan Do	b287aa4005	included new API in package.json	2020-12-01 10:00:16 -05:00
Sean Macfarlane	23cc799d71	switched live server	2020-12-01 01:56:22 -05:00
Toan Do	4ea1e55cdd	Added rfProfiles and fetchMoreRfProfiles	2020-11-30 12:25:54 -05:00
Sean Macfarlane	cca9fc3667	switched Role to Roles	2020-11-27 20:34:29 -05:00
Toan Do	883379c48c	Added profiiles data&fetch to AddProfiles	2020-11-26 10:06:49 -05:00
Toan Do	514100c6bc	Added venue, operator, and id provider data &fetch	2020-11-26 09:45:11 -05:00
Sean Macfarlane	0f463832a7	added GenericNotFound	2020-11-21 01:03:03 -05:00
Sean Macfarlane	157b4ecb33	update version	2020-11-21 00:38:35 -05:00
Sean Macfarlane	155aeb27e0	made constant for Routes	2020-11-21 00:36:48 -05:00
Sean Macfarlane	6b43f8967d	updated package	2020-11-19 21:26:52 -05:00
Sean Macfarlane	e744fed5d8	updated version	2020-11-17 18:00:59 -05:00
Sean Macfarlane	1f9da3f314	updated version	2020-11-17 17:58:57 -05:00
Sean Macfarlane	0d6b2f05af	fixed prettier formatting	2020-11-17 15:24:57 -05:00
Sean Macfarlane	98d6fb6dbd	fixed npm commands	2020-11-16 15:18:06 -05:00