system page

public/locales/en/translations.json

@@ -61,6 +61,12 @@
       "Advanced": "Advanced"
     }
   },
+  "System": {
+    "Navigation": {
+      "MainServices": "Main services",
+      "Agents": "Agents"
+    }
+  },
   "Settings": {
     "Navigation": {
       "Appearance": "Appearance",

public/locales/ro/translations.json

@@ -52,6 +52,12 @@
       "Advanced": "Avansat"
     }
   },
+  "System": {
+    "Navigation": {
+      "MainServices": "Servicii principale",
+      "Agents": "Agenți"
+    }
+  },
   "Settings": {
     "Navigation": {
       "Appearance": "Aspect",

src/components/layout/AppRoutes.js

@@ -2,6 +2,7 @@ import React from "react";
 import { Route, Switch } from "react-router-dom";
 import PageNotFound from "./PageNotFound";
 import NetworkContainer from "../../features/network/components/NetworkContainer";
+import SystemContainer from "../../features/system/SystemContainer";
 import SettingsContainer from "../../features/settings/SettingsContainer";
 import DashboardContainer from "../../features/dashboard/components/DashboardContainer";
 import UserProfileContainer from "../../features/user/profile/components/UserProfileContainer";
@@ -13,6 +14,7 @@ const AppRoutes = () => {
       <Route exact path="/dashboard" component={DashboardContainer} />
       <Route exact path="/user-profile" component={UserProfileContainer} />
       <Route exact path="/machines" component={NetworkContainer} />
+      <Route exact path="/system" component={SystemContainer} />
       <Route exact path="/settings" component={SettingsContainer} />
       <Route exact path="/about" component={AboutContainer} />
       <Route component={PageNotFound} />

src/features/system/MainServicesContainer.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const MainServicesContainer = () => {
+  return <div>MainServices</div>;
+};
+
+export default MainServicesContainer;

src/features/system/SystemContainer.js

@@ -0,0 +1,49 @@
+import React, { useState, useMemo } from "react";
+import CategoryIcon from "@material-ui/icons/Category";
+import GrainIcon from "@material-ui/icons/Grain";
+import { useTranslation } from "react-i18next";
+import PageTitle from "../../components/common/PageTitle";
+import NavigationButtons from "../../components/common/NavigationButtons";
+import MainServicesContainer from "./MainServicesContainer";
+import AgentsContainer from "./agents/AgentsContainer";
+
+const NavigationTabs = {
+  MAIN_SERVICES: "System.Navigation.MainServices",
+  AGENTS: "System.Navigation.Agents"
+};
+
+const tabs = [
+  {
+    code: NavigationTabs.MAIN_SERVICES,
+    icon: CategoryIcon
+  },
+  {
+    code: NavigationTabs.AGENTS,
+    icon: GrainIcon
+  }
+];
+
+const SystemContainer = () => {
+  const [tab, setTab] = useState(NavigationTabs.MAIN_SERVICES);
+  const { t } = useTranslation();
+
+  const navigationTabs = useMemo(
+    () => tabs.map(z => ({ ...z, tooltip: t(z.code) })),
+    [t]
+  );
+
+  return (
+    <>
+      <PageTitle
+        text={t(tab)}
+        navigation={
+          <NavigationButtons tabs={navigationTabs} onTabChange={setTab} />
+        }
+      />
+      {tab === NavigationTabs.MAIN_SERVICES && <MainServicesContainer />}
+      {tab === NavigationTabs.AGENTS && <AgentsContainer />}
+    </>
+  );
+};
+
+export default SystemContainer;

src/features/system/agents/AgentsContainer.js

@@ -0,0 +1,7 @@
+import React from "react";
+
+const AgentsContainer = () => {
+  return <div>Agents</div>;
+};
+
+export default AgentsContainer;