From f08ba0221bfbf898b3e5bff4f820616451b661c6 Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tstanciu@totalsoft.ro>
Date: Mon, 27 Mar 2023 02:06:32 +0300
Subject: [PATCH] system page

---
 public/locales/en/translations.json           |  6 +++
 public/locales/ro/translations.json           |  6 +++
 src/components/layout/AppRoutes.js            |  2 +
 src/features/system/MainServicesContainer.js  |  7 +++
 src/features/system/SystemContainer.js        | 49 +++++++++++++++++++
 src/features/system/agents/AgentsContainer.js |  7 +++
 6 files changed, 77 insertions(+)
 create mode 100644 src/features/system/MainServicesContainer.js
 create mode 100644 src/features/system/SystemContainer.js
 create mode 100644 src/features/system/agents/AgentsContainer.js

diff --git a/public/locales/en/translations.json b/public/locales/en/translations.json
index 6f54e06..574c7eb 100644
--- a/public/locales/en/translations.json
+++ b/public/locales/en/translations.json
@@ -61,6 +61,12 @@
       "Advanced": "Advanced"
     }
   },
+  "System": {
+    "Navigation": {
+      "MainServices": "Main services",
+      "Agents": "Agents"
+    }
+  },
   "Settings": {
     "Navigation": {
       "Appearance": "Appearance",
diff --git a/public/locales/ro/translations.json b/public/locales/ro/translations.json
index 135429b..a956897 100644
--- a/public/locales/ro/translations.json
+++ b/public/locales/ro/translations.json
@@ -52,6 +52,12 @@
       "Advanced": "Avansat"
     }
   },
+  "System": {
+    "Navigation": {
+      "MainServices": "Servicii principale",
+      "Agents": "Agenți"
+    }
+  },
   "Settings": {
     "Navigation": {
       "Appearance": "Aspect",
diff --git a/src/components/layout/AppRoutes.js b/src/components/layout/AppRoutes.js
index 43e83bb..03c0b3d 100644
--- a/src/components/layout/AppRoutes.js
+++ b/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} />
diff --git a/src/features/system/MainServicesContainer.js b/src/features/system/MainServicesContainer.js
new file mode 100644
index 0000000..66cdd55
--- /dev/null
+++ b/src/features/system/MainServicesContainer.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const MainServicesContainer = () => {
+  return <div>MainServices</div>;
+};
+
+export default MainServicesContainer;
diff --git a/src/features/system/SystemContainer.js b/src/features/system/SystemContainer.js
new file mode 100644
index 0000000..ff19551
--- /dev/null
+++ b/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;
diff --git a/src/features/system/agents/AgentsContainer.js b/src/features/system/agents/AgentsContainer.js
new file mode 100644
index 0000000..68d93f2
--- /dev/null
+++ b/src/features/system/agents/AgentsContainer.js
@@ -0,0 +1,7 @@
+import React from "react";
+
+const AgentsContainer = () => {
+  return <div>Agents</div>;
+};
+
+export default AgentsContainer;