Device page now uses tabs

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.2.12",
+  "version": "2.2.13",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.2.12",
+      "version": "2.2.13",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
@@ -32,7 +32,7 @@
         "react-tooltip": "^4.2.21",
         "react-widgets": "^5.1.1",
         "sass": "^1.35.1",
-        "ucentral-libs": "^0.9.71",
+        "ucentral-libs": "^0.9.83",
         "uuid": "^8.3.2"
       },
       "devDependencies": {
@@ -14842,9 +14842,9 @@
       }
     },
     "node_modules/ucentral-libs": {
-      "version": "0.9.71",
+      "version": "0.9.83",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.9.71.tgz",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.9.83.tgz",
-      "integrity": "sha512-5TqSqbya2WO9wzfTnpVemVhG2sOoB8PwdXlU/XvVGKCUFuGBYbeDIcW2O5VRwSZsuwQkaB3r6SdAeOMdIZ9Obw==",
+      "integrity": "sha512-MLJ2+3/RlSpecI0ad1/hQogNLyaoKQewwheC1Chn4tjzra/nrwxV2d1REyb8jDNlC+VvyJbZiEG7cgGrHWk3uA==",
       "dependencies": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",
@@ -27711,9 +27711,9 @@
       }
     },
     "ucentral-libs": {
-      "version": "0.9.71",
+      "version": "0.9.83",
-      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.9.71.tgz",
+      "resolved": "https://registry.npmjs.org/ucentral-libs/-/ucentral-libs-0.9.83.tgz",
-      "integrity": "sha512-5TqSqbya2WO9wzfTnpVemVhG2sOoB8PwdXlU/XvVGKCUFuGBYbeDIcW2O5VRwSZsuwQkaB3r6SdAeOMdIZ9Obw==",
+      "integrity": "sha512-MLJ2+3/RlSpecI0ad1/hQogNLyaoKQewwheC1Chn4tjzra/nrwxV2d1REyb8jDNlC+VvyJbZiEG7cgGrHWk3uA==",
       "requires": {
         "@coreui/coreui": "^3.4.0",
         "@coreui/icons": "^2.0.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.2.12",
+  "version": "2.2.13",
   "dependencies": {
     "@coreui/coreui": "^3.4.0",
     "@coreui/icons": "^2.0.1",
@@ -26,7 +26,7 @@
     "react-tooltip": "^4.2.21",
     "react-widgets": "^5.1.1",
     "sass": "^1.35.1",
-    "ucentral-libs": "^0.9.71",
+    "ucentral-libs": "^0.9.83",
     "uuid": "^8.3.2"
   },
   "main": "index.js",

public/locales/de/translation.json

@@ -125,6 +125,7 @@
 		"na": "(unbekannt)",
 		"need_date": "Du brauchst ein Datum...",
 		"no": "Nein",
+		"no_addresses_found": "Keine Adressen gefunden",
 		"no_devices_found": "Keine Geräte gefunden",
 		"no_items": "Keine Gegenstände",
 		"none": "Keiner",
@@ -150,6 +151,7 @@
 		"second": "zweite",
 		"seconds": "sekunden",
 		"seconds_elapsed": "Sekunden verstrichen",
+		"select": "wählen",
 		"serial_number": "Seriennummer",
 		"show_all": "Zeige alles",
 		"socket_connection_closed": "Verbindung geschlossen!",
@@ -226,6 +228,7 @@
 		"used_by": "Benutzt von",
 		"used_by_details": "{{entities}} Entitäten, {{venues}} Veranstaltungsorte und {{devices}} Geräte",
 		"uuid": "Konfigurations-ID",
+		"view_config": "Konfiguration anzeigen",
 		"view_in_use": "In Verwendung anzeigen",
 		"view_json": "Rohe Konfiguration anzeigen"
 	},
@@ -243,13 +246,15 @@
 		"access_pin": "Zugangs-PIN",
 		"add_contact": "Kontakt hinzufügen",
 		"create_contact": "Kontakt erstellen",
+		"delete": "Kontakt löschen?",
 		"error_assign": "Fehler beim Versuch, Kontakt zuzuweisen: {{error}}",
 		"error_creation": "Fehler beim Versuch, einen Kontakt zu erstellen: {{error}}",
-		"error_delete": "Fehler beim Löschen",
+		"error_delete": "Fehler beim Versuch, den Kontakt zu löschen: {{error}}",
 		"error_fetching_list": "Fehler beim Abrufen der Kontakte",
 		"error_fetching_single": "Fehler beim Abrufen des Kontakts: {{error}}",
 		"error_unassign": "Fehler beim Versuch, die Zuweisung des Kontakts aufzuheben: {{error}}",
 		"first_name": "Vorname",
+		"identifier": "Identifikator",
 		"initials": "Initialen",
 		"last_name": "Nachname",
 		"no_associated_contact": "Kein zugehöriger Kontakt",
@@ -449,7 +454,28 @@
 		"venue": "Tagungsort"
 	},
 	"location": {
-		"title": "Standorte"
+		"add": "Ort hinzufügen",
+		"building_name": "Gebäudename",
+		"city": "Stadt",
+		"country": "Land",
+		"create": "Standort erstellen",
+		"delete": "Ort löschen?",
+		"error_assign": "Fehler beim Versuch, den Standort zuzuweisen: {{error}}",
+		"error_creation": "Fehler beim Versuch, Standorte zu erstellen: {{error}}",
+		"error_delete": "Fehler beim Löschen des Standorts: {{error}}",
+		"error_fetching_single": "Fehler beim Versuch, den Standort abzurufen: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "Kein zugeordneter Standort",
+		"postal": "Postleitzahl",
+		"search": "Suchen Sie nach Standorten, um die Felder unten automatisch auszufüllen",
+		"state": "Zustand",
+		"street_address": "Adresse",
+		"successful_creation": "Standort erfolgreich erstellt!",
+		"successful_delete": "Standort erfolgreich gelöscht!",
+		"successful_update": "Standort erfolgreich aktualisiert!",
+		"successfully_assigned": "Standort erfolgreich zugewiesen!",
+		"title": "Standorte",
+		"update_error": "Fehler beim Aktualisieren des Standorts: {{error}}"
 	},
 	"login": {
 		"account_verification": "Bestätigung des Kontos",

public/locales/en/translation.json

@@ -125,6 +125,7 @@
 		"na": "N/A",
 		"need_date": "You need a date...",
 		"no": "No",
+		"no_addresses_found": "No Addresses Found",
 		"no_devices_found": "No Devices Found",
 		"no_items": "No Items",
 		"none": "None",
@@ -150,6 +151,7 @@
 		"second": "second",
 		"seconds": "seconds",
 		"seconds_elapsed": "Seconds elapsed",
+		"select": "Select",
 		"serial_number": "Serial Number",
 		"show_all": "Show All",
 		"socket_connection_closed": "Connection closed!",
@@ -226,6 +228,7 @@
 		"used_by": "Used By",
 		"used_by_details": "{{entities}} Entities, {{venues}} Venues and {{devices}} Devices",
 		"uuid": "Config ID",
+		"view_config": "View Configuration",
 		"view_in_use": "View In Use",
 		"view_json": "View raw JSON"
 	},
@@ -243,13 +246,15 @@
 		"access_pin": "Access PIN",
 		"add_contact": "Add Contact",
 		"create_contact": "Create Contact",
+		"delete": "Delete Contact?",
 		"error_assign": "Error while trying to assign contact: {{error}}",
 		"error_creation": "Error while trying to create contact: {{error}}",
-		"error_delete": "Error trying to delete",
+		"error_delete": "Error trying to delete contact: {{error}}",
 		"error_fetching_list": "Error fetching contacts",
 		"error_fetching_single": "Error fetching contact: {{error}}",
 		"error_unassign": "Error while trying to unassign contact: {{error}}",
 		"first_name": "First Name",
+		"identifier": "Identifier",
 		"initials": "Initials",
 		"last_name": "Last Name",
 		"no_associated_contact": "No Associated Contact",
@@ -449,7 +454,28 @@
 		"venue": "Venue"
 	},
 	"location": {
-		"title": "Locations"
+		"add": "Add Location",
+		"building_name": "Building Name",
+		"city": "City",
+		"country": "Country",
+		"create": "Create Location",
+		"delete": "Delete Location?",
+		"error_assign": "Error while trying to assign location: {{error}}",
+		"error_creation": "Error while trying to create locations: {{error}}",
+		"error_delete": "Error while deleting location: {{error}}",
+		"error_fetching_single": "Error while trying to fetch location: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "No Associated Location",
+		"postal": "ZIP/Postal Code",
+		"search": "Search locations to auto fill the fields below",
+		"state": "State",
+		"street_address": "Street Address",
+		"successful_creation": "Location Successfully Created!",
+		"successful_delete": "Successfully Deleted Location!",
+		"successful_update": "Successfully updated location!",
+		"successfully_assigned": "Location Successfully Assigned!",
+		"title": "Locations",
+		"update_error": "Error updating location: {{error}}"
 	},
 	"login": {
 		"account_verification": "Account Verification",

public/locales/es/translation.json

@@ -125,6 +125,7 @@
 		"na": "N / A",
 		"need_date": "Necesitas una cita ...",
 		"no": "No",
+		"no_addresses_found": "No se encontraron direcciones",
 		"no_devices_found": "No se encontraron dispositivos",
 		"no_items": "No hay articulos",
 		"none": "Ninguna",
@@ -150,6 +151,7 @@
 		"second": "segundo",
 		"seconds": "segundos",
 		"seconds_elapsed": "Segundos transcurridos",
+		"select": "Seleccionar",
 		"serial_number": "Número de serie",
 		"show_all": "Mostrar todo",
 		"socket_connection_closed": "¡Conexión cerrada!",
@@ -226,6 +228,7 @@
 		"used_by": "Usado por",
 		"used_by_details": "{{entities}} Entidades, {{venues}} lugares y {{devices}} dispositivos",
 		"uuid": "ID de configuración",
+		"view_config": "Ver configuración",
 		"view_in_use": "Ver en uso",
 		"view_json": "Ver JSON sin procesar"
 	},
@@ -243,13 +246,15 @@
 		"access_pin": "PIN de acceso",
 		"add_contact": "Agregar contacto",
 		"create_contact": "Crear contacto",
+		"delete": "¿Borrar contacto?",
 		"error_assign": "Error al intentar asignar el contacto: {{error}}",
 		"error_creation": "Error al intentar crear contacto: {{error}}",
-		"error_delete": "Error al intentar eliminar",
+		"error_delete": "Error al intentar eliminar el contacto: {{error}}",
 		"error_fetching_list": "Error al obtener los contactos",
 		"error_fetching_single": "Error al obtener el contacto: {{error}}",
 		"error_unassign": "Error al intentar anular la asignación del contacto: {{error}}",
 		"first_name": "Nombre de pila",
+		"identifier": "Identificador",
 		"initials": "Iniciales",
 		"last_name": "Apellido",
 		"no_associated_contact": "Sin contacto asociado",
@@ -449,7 +454,28 @@
 		"venue": "Lugar de encuentro"
 	},
 	"location": {
-		"title": "Ubicaciones"
+		"add": "Añade una ubicación",
+		"building_name": "Nombre del edificio",
+		"city": "ciudad",
+		"country": "País",
+		"create": "Crear ubicación",
+		"delete": "¿Eliminar ubicación?",
+		"error_assign": "Error al intentar asignar la ubicación: {{error}}",
+		"error_creation": "Error al intentar crear ubicaciones: {{error}}",
+		"error_delete": "Error al eliminar la ubicación: {{error}}",
+		"error_fetching_single": "Error al intentar obtener la ubicación: {{error}}",
+		"geocode": "Geocode",
+		"no_associated": "Sin ubicación asociada",
+		"postal": "código postal",
+		"search": "Busque ubicaciones para completar automáticamente los campos a continuación",
+		"state": "Estado",
+		"street_address": "Dirección",
+		"successful_creation": "¡Ubicación creada con éxito!",
+		"successful_delete": "¡Ubicación eliminada con éxito!",
+		"successful_update": "¡Ubicación actualizada con éxito!",
+		"successfully_assigned": "¡Ubicación asignada correctamente!",
+		"title": "Ubicaciones",
+		"update_error": "Error al actualizar la ubicación: {{error}}"
 	},
 	"login": {
 		"account_verification": "Verificación de la cuenta",

public/locales/fr/translation.json

@@ -125,6 +125,7 @@
 		"na": "N / A",
 		"need_date": "Vous avez besoin d'un rendez-vous...",
 		"no": "Non",
+		"no_addresses_found": "Aucune adresse trouvée",
 		"no_devices_found": "Aucun périphérique trouvé",
 		"no_items": "Pas d'objet",
 		"none": "Aucun",
@@ -150,6 +151,7 @@
 		"second": "seconde",
 		"seconds": "secondes",
 		"seconds_elapsed": "Secondes écoulées",
+		"select": "sélectionner",
 		"serial_number": "Numéro de série",
 		"show_all": "Montre tout",
 		"socket_connection_closed": "Connexion fermée !",
@@ -226,6 +228,7 @@
 		"used_by": "Utilisé par",
 		"used_by_details": "{{entities}} Entités, {{venues}} Lieux et {{devices}} Appareils",
 		"uuid": "Identifiant de configuration",
+		"view_config": "Afficher la configuration",
 		"view_in_use": "Afficher en cours d'utilisation",
 		"view_json": "Afficher le JSON brut"
 	},
@@ -243,13 +246,15 @@
 		"access_pin": "NIP d'accès",
 		"add_contact": "Ajouter le contact",
 		"create_contact": "Créer un contact",
+		"delete": "Effacer le contact?",
 		"error_assign": "Erreur lors de la tentative d'attribution du contact : {{error}}",
 		"error_creation": "Erreur lors de la tentative de création du contact : {{error}}",
-		"error_delete": "Erreur lors de la tentative de suppression",
+		"error_delete": "Erreur lors de la tentative de suppression du contact : {{error}}",
 		"error_fetching_list": "Erreur lors de la récupération des contacts",
 		"error_fetching_single": "Erreur lors de la récupération du contact : {{error}}",
 		"error_unassign": "Erreur lors de la tentative de désattribution du contact : {{error}}",
 		"first_name": "Prénom",
+		"identifier": "Identifiant",
 		"initials": "Initiales",
 		"last_name": "Nom de famille",
 		"no_associated_contact": "Aucun contact associé",
@@ -449,7 +454,28 @@
 		"venue": "Lieu"
 	},
 	"location": {
-		"title": "Emplacements"
+		"add": "Ajouter un emplacement",
+		"building_name": "Nom du bâtiment",
+		"city": "Ville",
+		"country": "Pays",
+		"create": "Créer un lieu",
+		"delete": "Supprimer le lieu?",
+		"error_assign": "Erreur lors de la tentative d'attribution de l'emplacement : {{error}}",
+		"error_creation": "Erreur lors de la tentative de création d'établissements : {{error}}",
+		"error_delete": "Erreur lors de la suppression de l'emplacement : {{error}}",
+		"error_fetching_single": "Erreur lors de la tentative de récupération de l'emplacement : {{error}}",
+		"geocode": "Géocode",
+		"no_associated": "Aucun emplacement associé",
+		"postal": "Zip / code postal",
+		"search": "Recherchez des emplacements pour remplir automatiquement les champs ci-dessous",
+		"state": "Etat",
+		"street_address": "Adresse de rue",
+		"successful_creation": "Emplacement créé avec succès !",
+		"successful_delete": "Emplacement supprimé avec succès !",
+		"successful_update": "Emplacement mis à jour avec succès !",
+		"successfully_assigned": "Emplacement attribué avec succès !",
+		"title": "Emplacements",
+		"update_error": "Erreur lors de la mise à jour de l'emplacement : {{error}}"
 	},
 	"login": {
 		"account_verification": "Vérification de compte",

public/locales/pt/translation.json

@@ -125,6 +125,7 @@
 		"na": "N / D",
 		"need_date": "Você precisa de um encontro ...",
 		"no": "Não",
+		"no_addresses_found": "Nenhum endereço encontrado",
 		"no_devices_found": "Nenhum dispositivo encontrado",
 		"no_items": "Nenhum item",
 		"none": "Nenhum",
@@ -150,6 +151,7 @@
 		"second": "segundo",
 		"seconds": "segundos",
 		"seconds_elapsed": "Segundos decorridos",
+		"select": "Selecione",
 		"serial_number": "Número de série",
 		"show_all": "mostre tudo",
 		"socket_connection_closed": "Conexão fechada!",
@@ -226,6 +228,7 @@
 		"used_by": "Usado por",
 		"used_by_details": "{{entities}} Entidades, {{venues}} Locais e {{devices}} Dispositivos",
 		"uuid": "ID de configuração",
+		"view_config": "Ver configuração",
 		"view_in_use": "Visualização em uso",
 		"view_json": "Exibir JSON bruto"
 	},
@@ -243,13 +246,15 @@
 		"access_pin": "PIN de acesso",
 		"add_contact": "Adicionar contato",
 		"create_contact": "Criar Contato",
+		"delete": "Excluir contato?",
 		"error_assign": "Erro ao tentar atribuir contato: {{error}}",
 		"error_creation": "Erro ao tentar criar contato: {{error}}",
-		"error_delete": "Erro ao tentar excluir",
+		"error_delete": "Erro ao tentar excluir contato: {{error}}",
 		"error_fetching_list": "Erro ao buscar contatos",
 		"error_fetching_single": "Erro ao buscar contato: {{error}}",
 		"error_unassign": "Erro ao tentar cancelar a atribuição do contato: {{error}}",
 		"first_name": "Primeiro nome",
+		"identifier": "Identificador",
 		"initials": "Iniciais",
 		"last_name": "Último nome",
 		"no_associated_contact": "Nenhum contato associado",
@@ -449,7 +454,28 @@
 		"venue": "Local"
 	},
 	"location": {
-		"title": "Localizações"
+		"add": "Adicionar Local",
+		"building_name": "nome do edifício",
+		"city": "Cidade",
+		"country": "País",
+		"create": "Criar local",
+		"delete": "Excluir localização?",
+		"error_assign": "Erro ao tentar atribuir local: {{error}}",
+		"error_creation": "Erro ao tentar criar locais: {{error}}",
+		"error_delete": "Erro ao excluir localização: {{error}}",
+		"error_fetching_single": "Erro ao tentar buscar localização: {{error}}",
+		"geocode": "GeoCode",
+		"no_associated": "Sem localização associada",
+		"postal": "CEP / Código Postal",
+		"search": "Pesquise locais para preencher automaticamente os campos abaixo",
+		"state": "Estado",
+		"street_address": "Endereço",
+		"successful_creation": "Local criado com sucesso!",
+		"successful_delete": "Local excluído com sucesso!",
+		"successful_update": "Local atualizado com sucesso!",
+		"successfully_assigned": "Local atribuído com sucesso!",
+		"title": "Localizações",
+		"update_error": "Erro ao atualizar local: {{error}}"
 	},
 	"login": {
 		"account_verification": "Verificação de conta",

src/components/CommandHistory/index.js

@@ -244,6 +244,7 @@ const DeviceCommands = () => {
   return (
     <div>
       <CWidgetDropdown
+        className="m-0"
         inverse="true"
         color="gradient-primary"
         header={t('commands.title')}

src/components/DeviceActionCard/index.js

@@ -122,7 +122,7 @@ const DeviceActions = () => {
 
   return (
     <CCard>
-      <CCardHeader>
+      <CCardHeader className="p-1">
         <div className="text-value-lg">{t('actions.title')}</div>
       </CCardHeader>
       <CCardBody>
@@ -138,7 +138,7 @@ const DeviceActions = () => {
             </CButton>
           </CCol>
         </CRow>
-        <CRow className="mt-4">
+        <CRow className="my-1">
           <CCol>
             <CButton block color="primary" onClick={toggleUpgradeModal}>
               {t('actions.firmware_upgrade')}
@@ -150,7 +150,7 @@ const DeviceActions = () => {
             </CButton>
           </CCol>
         </CRow>
-        <CRow className="mt-4">
+        <CRow className="my-1">
           <CCol>
             <CButton block color="primary" onClick={toggleScanModal}>
               {t('actions.wifi_scan')}
@@ -162,7 +162,7 @@ const DeviceActions = () => {
             </CButton>
           </CCol>
         </CRow>
-        <CRow className="mt-4">
+        <CRow className="my-1">
           <CCol>
             <LoadingButton
               isLoading={connectLoading}
@@ -177,7 +177,7 @@ const DeviceActions = () => {
             </CButton>
           </CCol>
         </CRow>
-        <CRow className="mt-4">
+        <CRow className="my-1">
           <CCol>
             <CButton block color="primary" onClick={toggleQueueModal}>
               {t('commands.event_queue')}

src/components/DeviceHealth/index.js

@@ -184,6 +184,7 @@ const DeviceHealth = () => {
 
   return (
     <CWidgetDropdown
+      className="m-0"
       header={t('health.title')}
       text={sanityLevel ? `${sanityLevel}%` : t('common.unknown')}
       value={sanityLevel ?? 100}

src/components/DeviceLogs/index.js

@@ -167,6 +167,7 @@ const DeviceLogs = () => {
   return (
     <div>
       <CWidgetDropdown
+        className="m-0"
         inverse="true"
         color="gradient-info"
         header={t('device_logs.title')}

src/components/InterfaceStatistics/index.js

@@ -34,35 +34,34 @@ const DeviceStatisticsCard = () => {
 
   return (
     <div>
-      <CCard>
+      <CCard className="m-0">
-        <CCardHeader>
+        <CCardHeader className="p-1">
           <div className="d-flex flex-row-reverse align-items-center">
             <div className="pl-2">
               <CPopover content={t('common.refresh')}>
-                <CButton color="primary" variant="outline" onClick={refresh}>
+                <CButton size="sm" color="primary" variant="outline" onClick={refresh}>
                   <CIcon content={cilSync} />
                 </CButton>
               </CPopover>
             </div>
             <div className="pl-2">
-              <CButton color="primary" variant="outline" onClick={toggleLifetimeModal}>
+              <CButton size="sm" color="primary" variant="outline" onClick={toggleLifetimeModal}>
                 Lifetime Statistics
               </CButton>
             </div>
             <div className="pl-2">
-              <CButton color="primary" variant="outline" onClick={toggleLatestModal}>
+              <CButton size="sm" color="primary" variant="outline" onClick={toggleLatestModal}>
                 {t('statistics.show_latest')}
               </CButton>
             </div>
             <div>
-              <CButton color="primary" variant="outline" onClick={goToAnalysis}>
+              <CButton size="sm" color="primary" variant="outline" onClick={goToAnalysis}>
                 {t('wifi_analysis.title')}
               </CButton>
             </div>
-            <div className="text-value-lg mr-auto">{t('statistics.title')}</div>
           </div>
         </CCardHeader>
-        <CCardBody className="p-5">
+        <CCardBody className="p-1">
           <StatisticsChartList />
         </CCardBody>
       </CCard>

src/pages/DevicePage/index.js

@@ -1,41 +1,186 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-import { CRow, CCol } from '@coreui/react';
+import { CRow, CCol, CCard, CCardBody, CNav, CNavLink, CTabPane, CTabContent } from '@coreui/react';
 import DeviceHealth from 'components/DeviceHealth';
-import DeviceStatusCard from 'components/DeviceStatusCard';
 import CommandHistory from 'components/CommandHistory';
 import DeviceLogs from 'components/DeviceLogs';
 import DeviceStatisticsCard from 'components/InterfaceStatistics';
 import DeviceActionCard from 'components/DeviceActionCard';
 import axiosInstance from 'utils/axiosInstance';
-import { DeviceProvider } from 'ucentral-libs';
+import { DeviceProvider, DeviceStatusCard, DeviceDetails, useAuth, useToast } from 'ucentral-libs';
+import { useTranslation } from 'react-i18next';
 
 const DevicePage = () => {
+  const { t } = useTranslation();
   const { deviceId } = useParams();
+  const [index, setIndex] = useState(0);
+  const { currentToken, endpoints } = useAuth();
+  const { addToast } = useToast();
+  const [lastStats, setLastStats] = useState(null);
+  const [status, setStatus] = useState(null);
+  const [deviceConfig, setDeviceConfig] = useState(null);
+  const [error, setError] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const getDevice = () => {
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    axiosInstance
+      .get(`${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceId)}`, options)
+      .then((response) => {
+        setDeviceConfig(response.data);
+      })
+      .catch((e) => {
+        addToast({
+          title: t('common.error'),
+          body: t('device.error_fetching_device', { error: e.response?.data?.ErrorDescription }),
+          color: 'danger',
+          autohide: true,
+        });
+      });
+  };
+
+  const getData = () => {
+    setLoading(true);
+    const options = {
+      headers: {
+        Accept: 'application/json',
+        Authorization: `Bearer ${currentToken}`,
+      },
+    };
+
+    const lastStatsRequest = axiosInstance.get(
+      `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceId)}/statistics?lastOnly=true`,
+      options,
+    );
+    const statusRequest = axiosInstance.get(
+      `${endpoints.owgw}/api/v1/device/${encodeURIComponent(deviceId)}/status`,
+      options,
+    );
+
+    Promise.all([lastStatsRequest, statusRequest])
+      .then(([newStats, newStatus]) => {
+        setLastStats(newStats.data);
+        setStatus(newStatus.data);
+      })
+      .catch(() => {
+        setError(true);
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  const refresh = () => {
+    getData();
+    getDevice();
+  };
+
+  useEffect(() => {
+    setError(false);
+    if (deviceId) {
+      getDevice();
+      getData();
+    }
+  }, [deviceId]);
 
   return (
     <div className="App">
       <DeviceProvider axiosInstance={axiosInstance} serialNumber={deviceId}>
-        <CRow>
-          <CCol>
-            <DeviceStatusCard />
-          </CCol>
-        </CRow>
         <CRow>
           <CCol lg="12" xl="6">
-            <CommandHistory />
+            <DeviceStatusCard
+              t={t}
+              loading={loading}
+              error={error}
+              deviceSerialNumber={deviceId}
+              getData={refresh}
+              deviceConfig={deviceConfig}
+              status={status}
+              lastStats={lastStats}
+            />
           </CCol>
           <CCol lg="12" xl="6">
             <DeviceActionCard />
           </CCol>
         </CRow>
         <CRow>
-          <CCol lg="12" xl="6">
+          <CCol>
-            <DeviceStatisticsCard />
+            <CCard>
-          </CCol>
+              <CCardBody className="p-0">
-          <CCol lg="12" xl="6">
+                <CNav variant="tabs">
-            <DeviceHealth />
+                  <CNavLink
-            <DeviceLogs />
+                    className="font-weight-bold"
+                    href="#"
+                    active={index === 0}
+                    onClick={() => setIndex(0)}
+                  >
+                    {t('statistics.title')}
+                  </CNavLink>
+                  <CNavLink
+                    className="font-weight-bold"
+                    href="#"
+                    active={index === 1}
+                    onClick={() => setIndex(1)}
+                  >
+                    {t('configuration.title')}
+                  </CNavLink>
+                  <CNavLink
+                    className="font-weight-bold"
+                    href="#"
+                    active={index === 2}
+                    onClick={() => setIndex(2)}
+                  >
+                    {t('commands.title')}
+                  </CNavLink>
+                  <CNavLink
+                    className="font-weight-bold"
+                    href="#"
+                    active={index === 3}
+                    onClick={() => setIndex(3)}
+                  >
+                    {t('health.title')}
+                  </CNavLink>
+                  <CNavLink
+                    className="font-weight-bold"
+                    href="#"
+                    active={index === 4}
+                    onClick={() => setIndex(4)}
+                  >
+                    {t('device_logs.title')}
+                  </CNavLink>
+                </CNav>
+                <CTabContent>
+                  <CTabPane active={index === 0}>
+                    <DeviceStatisticsCard />
+                  </CTabPane>
+                  <CTabPane active={index === 1}>
+                    <DeviceDetails
+                      t={t}
+                      loading={loading}
+                      getData={refresh}
+                      deviceConfig={deviceConfig}
+                      status={status}
+                      lastStats={lastStats}
+                    />
+                  </CTabPane>
+                  <CTabPane active={index === 2}>
+                    <CommandHistory />
+                  </CTabPane>
+                  <CTabPane active={index === 3}>
+                    <DeviceHealth />
+                  </CTabPane>
+                  <CTabPane active={index === 4}>
+                    <DeviceLogs />
+                  </CTabPane>
+                </CTabContent>
+              </CCardBody>
+            </CCard>
           </CCol>
         </CRow>
       </DeviceProvider>

src/pages/SystemPage/index.js

@@ -21,7 +21,6 @@ const SystemPage = () => {
       processors: t('common.unknown'),
       uptime: t('common.unknown'),
       version: t('common.unknown'),
-      start: t('common.unknown'),
       certificates: [],
       subsystems: [],
     };