Chg: update image tag in helm values to v2.11.0-RC1

[WIFI-12885] New Monitoring and Default Firmware pages

.prettierignore

@@ -3,3 +3,4 @@ build
 dist
 node_modules
 .github
+/helm

helm/values.yaml

@@ -8,7 +8,7 @@ fullnameOverride: ""
 images:
   owgwui:
     repository: tip-tip-wlan-cloud-ucentral.jfrog.io/owgw-ui
-    tag: main
+    tag: v2.11.0-RC1
     pullPolicy: Always
 
 services:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.9.0(23)",
+  "version": "2.11.0(7)",
   "description": "",
   "private": true,
   "main": "index.tsx",
@@ -15,82 +15,86 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@chakra-ui/icons": "^2.0.11",
+    "@chakra-ui/anatomy": "^2.1.1",
+    "@chakra-ui/icons": "^2.0.18",
     "@chakra-ui/react": "^2.3.6",
+    "@chakra-ui/styled-system": "^2.9.0",
     "@chakra-ui/theme-tools": "^2.0.12",
-    "@chakra-ui/utils": "^2.0.11",
-    "@emotion/react": "^11.10.4",
-    "@emotion/styled": "^11.10.4",
-    "@fontsource/inter": "^4.5.14",
+    "@chakra-ui/utils": "^2.0.14",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@fontsource/inter": "^4.5.15",
     "@googlemaps/react-wrapper": "^1.1.35",
     "@googlemaps/typescript-guards": "^2.0.3",
-    "@react-spring/web": "^9.5.5",
-    "axios": "^1.1.3",
+    "@hello-pangea/dnd": "^16.2.0",
+    "@phosphor-icons/react": "^2.0.8",
+    "@react-spring/web": "^9.7.2",
+    "@tanstack/react-query": "^4.29.3",
+    "@tanstack/react-table": "^8.8.5",
+    "@textea/json-viewer": "^2.16.2",
+    "axios": "^1.3.5",
     "buffer": "^6.0.3",
-    "chakra-react-select": "^4.3.0",
+    "chakra-react-select": "^4.6.0",
+    "chart.js": "^3.9.1",
     "dagre": "^0.8.5",
+    "fast-equals": "^5.0.1",
     "formik": "^2.2.9",
-    "fast-equals": "^4.0.3",
-    "framer-motion": "^7.6.1",
-    "i18next": "^22.0.0",
-    "i18next-browser-languagedetector": "^6.1.8",
-    "i18next-http-backend": "^1.4.4",
-    "libphonenumber-js": "^1.10.14",
-    "phosphor-react": "^1.4.1",
+    "framer-motion": "^10.12.2",
+    "i18next": "^22.4.14",
+    "i18next-browser-languagedetector": "^7.0.1",
+    "i18next-http-backend": "^2.2.0",
+    "libphonenumber-js": "^1.10.26",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-app-polyfill": "^3.0.0",
     "react-chartjs-2": "^4.3.1",
-    "chart.js": "^3.9.1",
-    "react-country-flag": "^3.0.2",
+    "react-country-flag": "^3.1.0",
     "react-csv": "^2.2.2",
-    "react-datepicker": "^4.8.0",
+    "react-datepicker": "^4.11.0",
     "react-dom": "^18.2.0",
-    "@textea/json-viewer": "^2.10.0",
-    "react-fast-compare": "^3.2.0",
-    "react-i18next": "^11.18.6",
+    "react-fast-compare": "^3.2.1",
+    "react-i18next": "^12.2.0",
     "react-masonry-css": "^1.0.16",
-    "@tanstack/react-query": "^4.12.0",
-    "react-router-dom": "^6.4.2",
+    "react-router-dom": "^6.10.0",
     "react-table": "^7.8.0",
-    "react-virtualized-auto-sizer": "^1.0.7",
-    "react-window": "^1.8.8",
+    "react-virtualized-auto-sizer": "^1.0.15",
+    "react-window": "^1.8.9",
     "source-map-explorer": "^2.5.3",
-    "vite": "^3.1.8",
-    "typescript": "^4.8.4",
+    "typescript": "^5.0.4",
     "uuid": "^9.0.0",
+    "vite": "^4.2.1",
     "yup": "^0.32.11",
-    "zustand": "^4.1.2"
+    "zustand": "^4.3.7"
   },
   "devDependencies": {
-    "@types/google.maps": "^3.51.0",
-    "@types/node": "^18.11.2",
-    "@types/react": "^18.0.21",
+    "@types/google.maps": "^3.52.5",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.37",
     "@types/react-csv": "^1.1.3",
-    "@types/react-dom": "^18.0.6",
-    "@types/react-table": "^7.7.12",
-    "@types/react-datepicker": "4.8.0",
-    "@types/uuid": "^8.3.4",
+    "@types/react-datepicker": "4.10.0",
+    "@types/react-dom": "^18.0.11",
+    "@types/react-table": "^7.7.14",
     "@types/react-virtualized-auto-sizer": "^1.0.1",
     "@types/react-window": "^1.8.5",
-    "eslint": "8.25.0",
-    "vite-tsconfig-paths": "^3.5.1",
-    "lint-staged": "^13.0.3",
-    "@vitejs/plugin-react": "^2.1.0",
-    "vite-plugin-pwa": "^0.13.1",
-    "prettier": "^2.7.1",
+    "@types/uuid": "^9.0.1",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "8.38.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-typescript": "^17.0.0",
     "eslint-config-airbnb-typescript-prettier": "^5.0.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-plugin-babel": "^5.3.1",
-    "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.6.1",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-no-inline-styles": "^1.0.5",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.10",
-    "eslint-plugin-react-hooks": "^4.6.0"
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "lint-staged": "^13.2.1",
+    "prettier": "^2.8.7",
+    "vite-plugin-pwa": "^0.14.7",
+    "vite-tsconfig-paths": "^4.2.0"
   },
   "browserslist": {
     "production": [

public/locales/de/translation.json

@@ -64,6 +64,8 @@
 		"health": "Gesundheit",
 		"inactive": "Inaktiv",
 		"interval": "Intervall",
+		"last_connected": "Zuletzt verbunden",
+		"last_connected_tooltip": "Das letzte Mal, wann dieses Gerät mit dem Controller verbunden war. Dies kann verwendet werden, um abzuschätzen, wann ein Gerät getrennt wurde",
 		"last_connection": "Letzte Verbindung",
 		"last_contact": "Letzter Kontakt",
 		"last_disconnection": "Letzte Trennung",
@@ -221,6 +223,7 @@
 		"day": "Tag",
 		"days": "Tage",
 		"default": "Standard",
+		"defaults": "Standardeinstellungen",
 		"description": "Beschreibung",
 		"details": "Einzelheiten",
 		"device_details": "Gerätedetails",
@@ -241,6 +244,7 @@
 		"error_download": "Fehler beim Downloadversuch: {{e}}",
 		"errors": "Fehler",
 		"exit_fullscreen": "Ausgang",
+		"export": "Export",
 		"finished": "Fertig",
 		"fullscreen": "Vollbildschirm",
 		"general_error": "Fehler beim Verbinden mit dem Server. Bitte wenden Sie sich an Ihren Administrator.",
@@ -356,6 +360,7 @@
 		"error_pushes_one": "Fehler (könnte an einer fehlerhaften Konfiguration liegen): {{count}}",
 		"error_pushes_other": "Fehler (können auf eine fehlerhafte Konfiguration zurückzuführen sein): {{count}}",
 		"expert_name": "Expertenmodus",
+		"expert_name_explanation": "Sie können den Expertenmodus verwenden, um Ihre Konfiguration direkt zu ändern, einschließlich des Hinzufügens von Werten, die derzeit nicht von der Benutzeroberfläche unterstützt werden. Bitte verwenden Sie dieses Format: { \"interfaces\": [ ... ], \"globals\": { ... }, ...etc }",
 		"explanation": "Erläuterung",
 		"firewall": "Firewall",
 		"firmware_upgrade": "Firmware-Aktualisierung",
@@ -522,6 +527,7 @@
 			"ouis_explanation": "OUIs von Geräten, die sich mit diesem Firmware-Server verbunden haben",
 			"outdated_one": "Firmware {{count}} Tag alt",
 			"outdated_other": "Firmware {{count}} Tage alt",
+			"outdated_unknown": "Firmware unbekannten Alters",
 			"release": "Veröffentlichung",
 			"show_dev_releases": "Entwicklerversionen",
 			"status_explanation": "Verbindungsstatus von Geräten, die sich mit diesem Firmware-Server verbunden haben",
@@ -537,6 +543,16 @@
 		"queue": {
 			"title": "Ereigniswarteschlange"
 		},
+		"radius": {
+			"calling_station_id": "Stations",
+			"disconnect": "Trennen",
+			"disconnect_success": "Radius-Sitzung getrennt!",
+			"input_octets": "Eingang",
+			"output_octets": "Ausgabe",
+			"radius_clients": "Radius-Kunden",
+			"session_time": "Sitzungszeit",
+			"username": "Nutzername"
+		},
 		"stats": {
 			"load": "Belastung (1 | 5 | 15 m.)",
 			"seconds_ago": " Vor {{s}} Sekunden",
@@ -629,6 +645,7 @@
 		"notifications": "Gerätebenachrichtigungen",
 		"one": "Gerät",
 		"reassign_already_owned": "Geräte neu zuweisen, die bereits vorhanden sind und einem anderen Unternehmen/Veranstaltungsort/Abonnenten gehören?",
+		"reboot_logs": "Neustartprotokolle",
 		"restricted": "Beschränkt",
 		"restricted_overriden": "Dies ist ein eingeschränktes Gerät, aber es befindet sich im Entwicklungsmodus. Alle Einschränkungen werden derzeit ignoriert",
 		"restrictions_overriden_title": "Dev-Modus",
@@ -686,11 +703,32 @@
 		"venues_under_root": "Veranstaltungsorte können nicht direkt unter der Root-Entität erstellt werden"
 	},
 	"firmware": {
+		"confirm_default_data": "Bitte bestätigen Sie die untenstehenden Informationen und klicken Sie auf „Bestätigen“, sobald Sie bereit sind, den Vorgang zu starten",
+		"create_success": "Neue Standard-Firmware-Einstellungen erstellt!",
 		"db_update_warning": "Dieser Vorgang wird täglich automatisch durchgeführt, ohne dass dieses manuelle Update verwendet werden muss. Die Aktualisierung dieser Datenbank kann bis zu 25 Minuten dauern",
+		"default_created_error_one": "{{count}} Fehler beim Versuch, eine neue Einstellung zu erstellen",
+		"default_created_error_other": "{{count}} Fehler beim Versuch, eine neue Einstellung zu erstellen",
+		"default_created_one": "{{count}} Standard-Firmware-Einstellung erstellt",
+		"default_created_other": "{{count}} Standard-Firmware-Einstellungen erstellt",
+		"default_found_one": "Für den Gerätetyp {{count}} wurde eine gültige Revision gefunden",
+		"default_found_other": "Gültige Revisionen für {{count}} Gerätetypen gefunden",
+		"default_mass_delete_success_one": " {{count}} Standard-Firmware-Einstellung gelöscht!",
+		"default_mass_delete_success_other": " {{count}} Standard-Firmware-Einstellungen gelöscht!",
+		"default_not_found_one": "Keine gültigen Firmware-Versionen für den Gerätetyp {{count}} ",
+		"default_not_found_other": "Keine gültigen Firmware-Versionen für {{count}} Gerätetypen",
+		"default_title": "",
+		"default_update_success": "Standard-Firmware für {{deviceType}}aktualisiert!",
+		"delete_success": "Standard-Firmware-Einstellung gelöscht!",
+		"edit_default_title": "Dies ist die aktuelle Firmware, die als Mindestversion für neue APs vom Typ {{deviceType}}verwendet wird. Wenn ein neuer {{deviceType}} AP eine Verbindung zum Gateway herstellt, wird er automatisch auf diese Version aktualisiert.",
+		"fetching_defaults": "Alle verfügbaren Firmware für ausgewählte Gerätetypen werden abgerufen...",
 		"last_db_update_modal": "Firmware-Datenbank",
 		"last_db_update_title": "Datenbank",
+		"one": "Firmware",
+		"select_default_device_types": "Bitte wählen Sie alle Gerätetypen aus, auf die Sie diese neue Standard-Firmware-Regel anwenden möchten. Wenn Sie den gewünschten Gerätetyp nicht finden können, bedeutet dies, dass bereits eine Regel angewendet wurde.",
+		"select_default_revision": "Sie können jetzt die Mindestversion auswählen, auf die Ihre Gerätetypen abzielen sollen",
 		"start_db_update": "Datenbankaktualisierung starten",
-		"started_db_update": "Datenbankaktualisierung gestartet, dieser Vorgang sollte bis zu 25 Minuten dauern"
+		"started_db_update": "Datenbankaktualisierung gestartet, dieser Vorgang sollte bis zu 25 Minuten dauern",
+		"update_success": "Standard-Firmware-Informationen gespeichert!"
 	},
 	"footer": {
 		"powered_by": "Unterstützt von",
@@ -712,7 +750,7 @@
 		"invalid_ipv6": "Ungültige IPv6-Adresse (Bsp.: 2001:db8:3333:4444:5555:6666:7777:8888)",
 		"invalid_json": "Ungültige JSON-Zeichenfolge",
 		"invalid_lease_time": "Ungültiger Lease-Time-Wert! Sie müssen im digitUnit-Format vorliegen. Zum Beispiel: 6d2h5m, was 6 Tage, 2 Stunden und 5 Minuten bedeutet. Hier sind die akzeptierten Einheiten: m, h, d. Wenn Sie eine Einheit nicht verwenden möchten, lassen Sie sie vollständig weg. Anstatt also 0d2h0m zu sagen, verwenden Sie 2h",
-		"invalid_mac_uc": "Ungültiger UC-MAC-Wert, zum Beispiel: 00:00:5e:00:53:af",
+		"invalid_mac_uc": "Ungültiger MAC-Wert, zum Beispiel: 00:00:5e:00:53:af",
 		"invalid_password": "Ungültiges Passwort, bitte sehen Sie sich die Passwortrichtlinie an",
 		"invalid_phone_number": "Ungültige Telefonnummer",
 		"invalid_phone_numbers": "Mindestens eine der Telefonnummern ist ungültig. Bitte geben Sie sie ohne Symbole und Leerzeichen oder in diesem Format an: +1(123)123-1234",
@@ -990,6 +1028,11 @@
 		"concurrent_devices": "Gleichzeitige Geräte",
 		"controller": "Regler",
 		"current_live_devices": "Aktuelle Live-Geräte",
+		"currently_running_one": "Derzeit wird {{count}} Simulation ausgeführt",
+		"currently_running_other": "Derzeit laufen {{count}} Simulationen",
+		"delete_devices_confirm": "Sind Sie sicher, dass Sie alle Geräte und deren Statistiken vom Gateway entfernen möchten? Diese Aktion ist nicht rückgängig zu machen",
+		"delete_devices_loading": "Dieser Vorgang kann bis zu 5 Minuten dauern",
+		"delete_simulation_devices": "Geräte löschen",
 		"delete_success": "Gelöschte Simulation!",
 		"duration": "Dauer",
 		"error_devices": "Fehler Geräte",
@@ -997,6 +1040,7 @@
 		"infinite": "Unendlich",
 		"keep_alive": "Bleib am Leben",
 		"mac_prefix": "MAC-Präfix",
+		"mac_prefix_length": "Ihr MAC-Präfix muss gültige 6 HEX-Ziffern haben (z. B.: 00112233)",
 		"max_associations": "max. Verbände",
 		"max_clients": "Max. Kunden",
 		"min_associations": "Mindest. Verbände",
@@ -1013,6 +1057,7 @@
 		"rx_messages": "Rx-Meldungen",
 		"sim_currently_running": "Simulation \"{{sim}}\" läuft",
 		"sim_history": "{{sim}} Vorherige Läufe",
+		"simulated": "Simuliert",
 		"start": "Simulation starten",
 		"start_success": "Simulationslauf gestartet!",
 		"state_interval": "Zustandsintervall",
@@ -1026,6 +1071,7 @@
 	},
 	"statistics": {
 		"last_stats": "Letzte Statistik",
+		"latest": "Neueste Statistiken",
 		"memory": "Erinnerung"
 	},
 	"subscribers": {
@@ -1072,14 +1118,24 @@
 		"version": "Ausführung"
 	},
 	"table": {
+		"columns": "Säulen",
 		"columns_hidden_one": "{{count}} Spalte ausgeblendet",
 		"columns_hidden_other": "{{count}} Spalten ausgeblendet",
+		"display_column": "Anzeige",
+		"drag_always_show": "Sie können diese Spalte nicht ausblenden, aber ihre Position ändern",
+		"drag_explanation": "Ziehen und Ablegen zum Neuordnen und Ändern der Spaltensichtbarkeit",
+		"drag_locked": "Diese Säule ist in ihrer Position arretiert",
+		"export_current_page": "Nur aktuelle Seite",
 		"first_page": "Erste Seite",
 		"go_to_page": "Zur Seite gehen",
+		"hide_column": "verbergen",
 		"last_page": "Letzte Seite",
 		"next_page": "Nächste Seite",
 		"page": "Seite",
-		"previous_page": "Vorherige Seite"
+		"preferences": "Tabelleneinstellungen",
+		"previous_page": "Vorherige Seite",
+		"reset": "Einstellungen zurücksetzen",
+		"settings": "die Einstellungen"
 	},
 	"user": {
 		"email_not_validated": "E-Mail nicht validiert",

public/locales/en/translation.json

@@ -64,6 +64,8 @@
 		"health": "Health",
 		"inactive": "Inactive",
 		"interval": "Interval",
+		"last_connected": "Last Connected",
+		"last_connected_tooltip": "Last time this device was connected to the controller. This can be used to estimate when a device disconnected",
 		"last_connection": "Last Connection",
 		"last_contact": "Last Contact",
 		"last_disconnection": "Last Disconnection",
@@ -221,6 +223,7 @@
 		"day": "Day",
 		"days": "Days",
 		"default": "Default",
+		"defaults": "Defaults",
 		"description": "Description",
 		"details": "Details",
 		"device_details": "Device Details",
@@ -241,6 +244,7 @@
 		"error_download": "Error while trying to download: {{e}}",
 		"errors": "Errors",
 		"exit_fullscreen": "Exit",
+		"export": "Export",
 		"finished": "Finished",
 		"fullscreen": "Fullscreen",
 		"general_error": "Error connecting to the server. Please consult your administrator.",
@@ -356,6 +360,7 @@
 		"error_pushes_one": "Error (could be because of bad configuration): {{count}}",
 		"error_pushes_other": "Errors (could be because of bad configuration): {{count}}",
 		"expert_name": "Expert Mode",
+		"expert_name_explanation": "You can use expert mode to directly modify your configuration, including adding values that are not currently supported by the UI. Please use this format: { \"interfaces\": [ ... ], \"globals\": { ... }, ...etc }",
 		"explanation": "Explanation",
 		"firewall": "Firewall",
 		"firmware_upgrade": "Firmware Upgrade",
@@ -522,6 +527,7 @@
 			"ouis_explanation": "OUIs of devices that have connected to this firmware server",
 			"outdated_one": "Firmware {{count}} day old",
 			"outdated_other": "Firmware {{count}} days old",
+			"outdated_unknown": "Firmware of unknown age",
 			"release": "Release",
 			"show_dev_releases": "Dev Releases",
 			"status_explanation": "Connection status of devices that have connected to this firmware server",
@@ -537,6 +543,16 @@
 		"queue": {
 			"title": "Event Queue"
 		},
+		"radius": {
+			"calling_station_id": "Station",
+			"disconnect": "Disconnect",
+			"disconnect_success": "Radius session disconnected!",
+			"input_octets": "Input",
+			"output_octets": "Output",
+			"radius_clients": "Radius Clients",
+			"session_time": "Session Time",
+			"username": "Username"
+		},
 		"stats": {
 			"load": "Load (1 | 5 | 15 m.)",
 			"seconds_ago": "{{s}} seconds ago",
@@ -629,6 +645,7 @@
 		"notifications": "Device Notifications",
 		"one": "Device",
 		"reassign_already_owned": "Reassign devices which already exist and are owned by another entity/venue/subscriber?",
+		"reboot_logs": "Reboot Logs",
 		"restricted": "Restricted",
 		"restricted_overriden": "This is a restricted device, but it is in development mode. All restrictions are currently ignored",
 		"restrictions_overriden_title": "Dev Mode",
@@ -686,11 +703,32 @@
 		"venues_under_root": "Venues cannot be created directly under the root entity"
 	},
 	"firmware": {
+		"confirm_default_data": "Please confirm the information below and click 'Confirm' once you are ready to start the process",
+		"create_success": "Created new default firmware settings!",
 		"db_update_warning": "This operation is done daily automatically without need to use this manual update. Updating this database can take up to 25 minutes",
+		"default_created_error_one": "{{count}} error while trying to create new setting",
+		"default_created_error_other": "{{count}} errors while trying to create new setting",
+		"default_created_one": "{{count}} default firmware setting created",
+		"default_created_other": "{{count}} default firmware settings created",
+		"default_found_one": "Found valid revision for {{count}} device type",
+		"default_found_other": "Found valid revisions for {{count}} device types",
+		"default_mass_delete_success_one": "Deleted {{count}} default firmware setting!",
+		"default_mass_delete_success_other": "Deleted {{count}} default firmware settings!",
+		"default_not_found_one": "No valid firmware versions for {{count}} device type",
+		"default_not_found_other": "No valid firmware versions for {{count}} device types",
+		"default_title": "Default Firmware",
+		"default_update_success": "Updated default firmware for {{deviceType}}!",
+		"delete_success": "Deleted default firmware setting!",
+		"edit_default_title": "This is the current firmware that is used as the minimum version for new APs of type {{deviceType}}. If a new {{deviceType}} AP connects to the gateway, it will be automatically upgraded to this version.",
+		"fetching_defaults": "Fetching all available firmware for selected device types...",
 		"last_db_update_modal": "Firmware Database",
 		"last_db_update_title": "Database",
+		"one": "Firmware",
+		"select_default_device_types": "Please select all device types that you want to target with this new default firmware rule. If you cannot find your desired device type, it means they already have an applied rule.",
+		"select_default_revision": "You can now select the minimum revision you want your device types to target",
 		"start_db_update": "Start Database Update",
-		"started_db_update": "Started database update, this operation should take up to 25 minutes to complete"
+		"started_db_update": "Started database update, this operation should take up to 25 minutes to complete",
+		"update_success": "Saved default firmware information!"
 	},
 	"footer": {
 		"powered_by": "Powered By",
@@ -712,7 +750,7 @@
 		"invalid_ipv6": "Invalid IPv6 address (ex.: 2001:db8:3333:4444:5555:6666:7777:8888)",
 		"invalid_json": "Invalid JSON string",
 		"invalid_lease_time": "Invalid lease time value! They need to be in the digitUnit format. For example: 6d2h5m, which means 6 days, 2 hours and 5 minutes. Here are the accepted units: m, h, d. If you do not want to use a unit, omit it completely. So instead of saying 0d2h0m, use 2h",
-		"invalid_mac_uc": "Invalid UC-MAC value, for example: 00:00:5e:00:53:af",
+		"invalid_mac_uc": "Invalid MAC value, for example: 00:00:5e:00:53:af",
 		"invalid_password": "Invalid password, please look at the password policy",
 		"invalid_phone_number": "Invalid Phone Number",
 		"invalid_phone_numbers": "One or more of the phone numbers are invalid. Please provide them without symbols and spaces, or in this format: +1(123)123-1234",
@@ -753,8 +791,8 @@
 		"success_remove_claim": "Successfully removed claim on: {{serial}}",
 		"successful_reboots": "Started Rebooting: {{count}}",
 		"successful_upgrades": "Successful upgrades: {{count}}",
-		"tag_one": "Tag",
-		"tags": "Inventory Tags",
+		"tag_one": "Device",
+		"tags": "Inventory Devices",
 		"title": "Inventory",
 		"warning_reboots": "Not connected: {{count}}",
 		"warning_upgrades": "Devices not connected: {{count}}"
@@ -990,6 +1028,11 @@
 		"concurrent_devices": "Concurrent Devices",
 		"controller": "Controller",
 		"current_live_devices": "Current Live Devices",
+		"currently_running_one": "There is currently {{count}} simulation running",
+		"currently_running_other": "There are currently {{count}} simulations running",
+		"delete_devices_confirm": "Are you sure you want to remove all devices and their statistics from the gateway? This action is not reversible",
+		"delete_devices_loading": "This process may take up to 5 minutes",
+		"delete_simulation_devices": "Delete Devices",
 		"delete_success": "Deleted Simulation!",
 		"duration": "Duration",
 		"error_devices": "Error Devices",
@@ -997,6 +1040,7 @@
 		"infinite": "Infinite",
 		"keep_alive": "Keep Alive",
 		"mac_prefix": "MAC Prefix",
+		"mac_prefix_length": "Your MAC prefix needs to be valid 6 HEX digits (ex.: 00112233)",
 		"max_associations": "Max. Associations",
 		"max_clients": "Max. Clients",
 		"min_associations": "Min. Associations",
@@ -1013,6 +1057,7 @@
 		"rx_messages": "Rx Messages",
 		"sim_currently_running": "Simulation \"{{sim}}\" in progress",
 		"sim_history": "{{sim}} Previous Runs",
+		"simulated": "Simulated",
 		"start": "Start Simulation",
 		"start_success": "Started simulation run!",
 		"state_interval": "State Interval",
@@ -1026,6 +1071,7 @@
 	},
 	"statistics": {
 		"last_stats": "Last Statistics",
+		"latest": "Latest Statistics",
 		"memory": "Memory"
 	},
 	"subscribers": {
@@ -1072,14 +1118,24 @@
 		"version": "Version"
 	},
 	"table": {
+		"columns": "Columns",
 		"columns_hidden_one": "{{count}} Column Hidden",
 		"columns_hidden_other": "{{count}} Columns Hidden",
+		"display_column": "Display",
+		"drag_always_show": "You cannot hide this column but can change its position ",
+		"drag_explanation": "Drag and drop to reorder and change column visibility",
+		"drag_locked": "This column is locked in its position",
+		"export_current_page": "Current Page Only",
 		"first_page": "First Page",
 		"go_to_page": "Go to page",
+		"hide_column": "Hide",
 		"last_page": "Last Page",
 		"next_page": "Next Page",
 		"page": "Page",
-		"previous_page": "Previous Page"
+		"preferences": "Table Preferences",
+		"previous_page": "Previous Page",
+		"reset": "Reset Preferences",
+		"settings": "Settings"
 	},
 	"user": {
 		"email_not_validated": "email not validated",

public/locales/es/translation.json

@@ -64,6 +64,8 @@
 		"health": "salud",
 		"inactive": "inactivo",
 		"interval": "intervalo",
+		"last_connected": "Última conexion",
+		"last_connected_tooltip": "La última vez que se conectó este dispositivo al controlador. Esto se puede usar para estimar cuándo se desconectó un dispositivo",
 		"last_connection": "Última conexion",
 		"last_contact": "Último contacto",
 		"last_disconnection": "Última desconexión",
@@ -221,6 +223,7 @@
 		"day": "Día",
 		"days": "días",
 		"default": "Defecto",
+		"defaults": "Valores predeterminados",
 		"description": "Descripción",
 		"details": "Detalles",
 		"device_details": "Detalles del dispositivo",
@@ -241,6 +244,7 @@
 		"error_download": "Error al intentar descargar: {{e}}",
 		"errors": "Los errores",
 		"exit_fullscreen": "salida",
+		"export": "Exportar",
 		"finished": "terminado",
 		"fullscreen": "Pantalla Completa",
 		"general_error": "Error al conectar con el servidor. Consulte a su administrador.",
@@ -356,6 +360,7 @@
 		"error_pushes_one": "Error (podría deberse a una mala configuración): {{count}}",
 		"error_pushes_other": "Errores (pueden deberse a una mala configuración): {{count}}",
 		"expert_name": "Modo experto",
+		"expert_name_explanation": "Puede usar el modo experto para modificar directamente su configuración, incluida la adición de valores que actualmente no son compatibles con la interfaz de usuario. Utilice este formato: { \"interfaces\": [ ... ], \"globals\": { ... }, ...etc }",
 		"explanation": "Explicación",
 		"firewall": "cortafuegos",
 		"firmware_upgrade": "Actualización de firmware",
@@ -522,6 +527,7 @@
 			"ouis_explanation": "OUI de dispositivos que se han conectado a este servidor de firmware",
 			"outdated_one": "Firmware {{count}} día de antigüedad",
 			"outdated_other": "Firmware de {{count}} días de antigüedad",
+			"outdated_unknown": "Firmware de antigüedad desconocida",
 			"release": "Lanzamiento",
 			"show_dev_releases": "Lanzamientos de desarrollo",
 			"status_explanation": "Estado de conexión de los dispositivos que se han conectado a este servidor de firmware",
@@ -537,6 +543,16 @@
 		"queue": {
 			"title": "Cola de eventos"
 		},
+		"radius": {
+			"calling_station_id": "Estación",
+			"disconnect": "desconectar",
+			"disconnect_success": "¡Sesión de radio desconectada!",
+			"input_octets": "entrada",
+			"output_octets": "salida",
+			"radius_clients": "Clientes de radio",
+			"session_time": "Tiempo de sesión",
+			"username": "Nombre de usuario"
+		},
 		"stats": {
 			"load": "Carga (1 | 5 | 15 m.)",
 			"seconds_ago": " Hace {{s}} segundos",
@@ -629,6 +645,7 @@
 		"notifications": "notificaciones de dispositivos",
 		"one": "Dispositivo",
 		"reassign_already_owned": "¿Reasignar dispositivos que ya existen y son propiedad de otra entidad/lugar/suscriptor?",
+		"reboot_logs": "Reiniciar registros",
 		"restricted": "Restringido",
 		"restricted_overriden": "Este es un dispositivo restringido, pero está en modo de desarrollo. Actualmente se ignoran todas las restricciones.",
 		"restrictions_overriden_title": "MODO DE DESARROLLO",
@@ -686,11 +703,32 @@
 		"venues_under_root": "Los lugares no se pueden crear directamente bajo la entidad raíz"
 	},
 	"firmware": {
+		"confirm_default_data": "Confirme la información a continuación y haga clic en 'Confirmar' una vez que esté listo para comenzar el proceso",
+		"create_success": "¡Se crearon nuevas configuraciones de firmware predeterminadas!",
 		"db_update_warning": "Esta operación se realiza automáticamente todos los días de forma automática sin necesidad de utilizar esta actualización manual. La actualización de esta base de datos puede tardar hasta 25 minutos",
+		"default_created_error_one": "{{count}} error al intentar crear una nueva configuración",
+		"default_created_error_other": "{{count}} errores al intentar crear una nueva configuración",
+		"default_created_one": "{{count}} configuración de firmware predeterminada creada",
+		"default_created_other": "{{count}} ajustes de firmware predeterminados creados",
+		"default_found_one": "Se encontró una revisión válida para el tipo de dispositivo {{count}} ",
+		"default_found_other": "Se encontraron revisiones válidas para {{count}} tipos de dispositivos",
+		"default_mass_delete_success_one": "¡Se eliminó {{count}} configuración de firmware predeterminada!",
+		"default_mass_delete_success_other": "¡Se eliminaron {{count}} configuraciones de firmware predeterminadas!",
+		"default_not_found_one": "No hay versiones de firmware válidas para el tipo de dispositivo {{count}} ",
+		"default_not_found_other": "No hay versiones de firmware válidas para {{count}} tipos de dispositivos",
+		"default_title": "",
+		"default_update_success": "¡Firmware predeterminado actualizado para {{deviceType}}!",
+		"delete_success": "¡Configuración de firmware predeterminada eliminada!",
+		"edit_default_title": "Este es el firmware actual que se utiliza como versión mínima para los nuevos AP de tipo {{deviceType}}. Si un nuevo AP {{deviceType}} se conecta a la puerta de enlace, se actualizará automáticamente a esta versión.",
+		"fetching_defaults": "Obteniendo todo el firmware disponible para los tipos de dispositivos seleccionados...",
 		"last_db_update_modal": "Base de datos de firmware",
 		"last_db_update_title": "Base de datos",
+		"one": "Firmware",
+		"select_default_device_types": "Seleccione todos los tipos de dispositivos a los que desea apuntar con esta nueva regla de firmware predeterminada. Si no puede encontrar el tipo de dispositivo deseado, significa que ya tienen una regla aplicada.",
+		"select_default_revision": "Ahora puede seleccionar la revisión mínima a la que desea que se dirijan sus tipos de dispositivos",
 		"start_db_update": "Iniciar actualización de la base de datos",
-		"started_db_update": "Actualización de la base de datos iniciada, esta operación debería tardar hasta 25 minutos en completarse"
+		"started_db_update": "Actualización de la base de datos iniciada, esta operación debería tardar hasta 25 minutos en completarse",
+		"update_success": "¡Información de firmware predeterminada guardada!"
 	},
 	"footer": {
 		"powered_by": "energizado por",
@@ -712,7 +750,7 @@
 		"invalid_ipv6": "Dirección IPv6 no válida (ej.: 2001:db8:3333:4444:5555:6666:7777:8888)",
 		"invalid_json": "Cadena JSON no válida",
 		"invalid_lease_time": "¡Valor de tiempo de arrendamiento no válido! Deben estar en el formato digitUnit. Por ejemplo: 6d2h5m, lo que significa 6 días, 2 horas y 5 minutos. Estas son las unidades aceptadas: m, h, d. Si no desea utilizar una unidad, omítala por completo. Entonces, en lugar de decir 0d2h0m, usa 2h",
-		"invalid_mac_uc": "Valor de UC-MAC no válido, por ejemplo: 00:00:5e:00:53:af",
+		"invalid_mac_uc": "Valor de MAC no válido, por ejemplo: 00:00:5e:00:53:af",
 		"invalid_password": "Contraseña no válida, consulte la política de contraseñas",
 		"invalid_phone_number": "Numero de telefono invalido",
 		"invalid_phone_numbers": "Uno o más de los números de teléfono no son válidos. Proporciónelos sin símbolos ni espacios, o en este formato: +1(123)123-1234",
@@ -990,6 +1028,11 @@
 		"concurrent_devices": "Dispositivos concurrentes",
 		"controller": "Controlador",
 		"current_live_devices": "Dispositivos activos actuales",
+		"currently_running_one": "Actualmente hay {{count}} simulación en ejecución",
+		"currently_running_other": "Actualmente hay {{count}} simulaciones ejecutándose",
+		"delete_devices_confirm": "¿Está seguro de que desea eliminar todos los dispositivos y sus estadísticas de la puerta de enlace? Esta acción no es reversible",
+		"delete_devices_loading": "Este proceso puede tardar hasta 5 minutos.",
+		"delete_simulation_devices": "BORRAR DISPOSITIVOS",
 		"delete_success": "¡Simulación eliminada!",
 		"duration": "Duración",
 		"error_devices": "Dispositivos de error",
@@ -997,6 +1040,7 @@
 		"infinite": "infinito",
 		"keep_alive": "Mantener viva",
 		"mac_prefix": "Prefijo MAC",
+		"mac_prefix_length": "Su prefijo MAC debe tener 6 dígitos hexadecimales válidos (p. ej.: 00112233)",
 		"max_associations": "Max. Asociaciones",
 		"max_clients": "Max. Clientela",
 		"min_associations": "Min. Asociaciones",
@@ -1013,6 +1057,7 @@
 		"rx_messages": "Mensajes prescritos",
 		"sim_currently_running": "Simulación \"{{sim}}\" en curso",
 		"sim_history": "{{sim}} ejecuciones anteriores",
+		"simulated": "Simulado",
 		"start": "Iniciar simulación",
 		"start_success": "¡Ejecución de simulación iniciada!",
 		"state_interval": "Intervalo de estado",
@@ -1026,6 +1071,7 @@
 	},
 	"statistics": {
 		"last_stats": "Últimas estadísticas",
+		"latest": "Últimas estadísticas",
 		"memory": "Memoria"
 	},
 	"subscribers": {
@@ -1072,14 +1118,24 @@
 		"version": "Versión"
 	},
 	"table": {
+		"columns": "Columnas",
 		"columns_hidden_one": "{{count}} columna oculta",
 		"columns_hidden_other": "{{count}} columnas ocultas",
+		"display_column": "Monitor",
+		"drag_always_show": "No puede ocultar esta columna pero puede cambiar su posición",
+		"drag_explanation": "Arrastre y suelte para reordenar y cambiar la visibilidad de las columnas",
+		"drag_locked": "Esta columna está bloqueada en su posición.",
+		"export_current_page": "Solo página actual",
 		"first_page": "Primera pagina",
 		"go_to_page": "Ir a la página",
+		"hide_column": "Esconder",
 		"last_page": "Ultima pagina",
 		"next_page": "Siguiente página",
 		"page": "Página",
-		"previous_page": "Página anterior"
+		"preferences": "Preferencias de mesa",
+		"previous_page": "Página anterior",
+		"reset": "Reiniciar preferencias",
+		"settings": "Ajustes"
 	},
 	"user": {
 		"email_not_validated": "correo electrónico no validado",

public/locales/fr/translation.json

@@ -64,6 +64,8 @@
 		"health": "santé",
 		"inactive": "Inactif",
 		"interval": "Intervalle",
+		"last_connected": "Dernière connexion",
+		"last_connected_tooltip": "La dernière fois que cet appareil a été connecté au contrôleur. Cela peut être utilisé pour estimer quand un appareil s'est déconnecté",
 		"last_connection": "Dernière connexion",
 		"last_contact": "Dernier contact",
 		"last_disconnection": "Dernière déconnexion",
@@ -221,6 +223,7 @@
 		"day": "journée",
 		"days": "Journées",
 		"default": "Défaut",
+		"defaults": "Valeurs par défaut",
 		"description": "La description",
 		"details": "Détails",
 		"device_details": "Détails de l'appareil",
@@ -241,6 +244,7 @@
 		"error_download": "Erreur lors de la tentative de téléchargement : {{e}}",
 		"errors": "les erreurs",
 		"exit_fullscreen": "Sortie",
+		"export": "Exportation",
 		"finished": "fini",
 		"fullscreen": "Plein écran",
 		"general_error": "Erreur de connexion au serveur. Veuillez consulter votre administrateur.",
@@ -356,6 +360,7 @@
 		"error_pushes_one": "Erreur (peut être due à une mauvaise configuration) : {{count}}",
 		"error_pushes_other": "Erreurs (peut-être dues à une mauvaise configuration) : {{count}}",
 		"expert_name": "Mode expert",
+		"expert_name_explanation": "Vous pouvez utiliser le mode expert pour modifier directement votre configuration, notamment en ajoutant des valeurs qui ne sont pas actuellement prises en charge par l'interface utilisateur. Veuillez utiliser ce format : { \"interfaces\": [ ... ], \"globals\": { ... }, ...etc }",
 		"explanation": "Explication",
 		"firewall": "Pare-feu",
 		"firmware_upgrade": "Mise à jour du firmware",
@@ -522,6 +527,7 @@
 			"ouis_explanation": "OUI des appareils qui se sont connectés à ce serveur de firmware",
 			"outdated_one": "Micrologiciel vieux de {{count}}  jours",
 			"outdated_other": "Micrologiciel vieux de {{count}}  jours",
+			"outdated_unknown": "Firmware d'âge inconnu",
 			"release": "libération",
 			"show_dev_releases": "Versions de développement",
 			"status_explanation": "État de connexion des appareils qui se sont connectés à ce serveur de micrologiciel",
@@ -537,6 +543,16 @@
 		"queue": {
 			"title": "File d'attente d'événements"
 		},
+		"radius": {
+			"calling_station_id": "Station",
+			"disconnect": "déconnecter",
+			"disconnect_success": "Session Radius déconnectée !",
+			"input_octets": "Contribution",
+			"output_octets": "Sortie",
+			"radius_clients": "Clients rayon",
+			"session_time": "Temps de session",
+			"username": "Nom d'utilisateur"
+		},
 		"stats": {
 			"load": "Charge (1 | 5 | 15 m.)",
 			"seconds_ago": " Il y a {{s}} secondes",
@@ -629,6 +645,7 @@
 		"notifications": "notifications de l'appareil",
 		"one": "Dispositif",
 		"reassign_already_owned": "Réattribuer des appareils qui existent déjà et qui appartiennent à une autre entité/salle/abonné ?",
+		"reboot_logs": "Journaux de redémarrage",
 		"restricted": "Limité",
 		"restricted_overriden": "Il s'agit d'un appareil restreint, mais il est en mode développement. Toutes les restrictions sont actuellement ignorées",
 		"restrictions_overriden_title": "Mode développement",
@@ -686,11 +703,32 @@
 		"venues_under_root": "Les lieux ne peuvent pas être créés directement sous l'entité racine"
 	},
 	"firmware": {
+		"confirm_default_data": "Veuillez confirmer les informations ci-dessous et cliquez sur \"Confirmer\" une fois que vous êtes prêt à démarrer le processus",
+		"create_success": "Création de nouveaux paramètres de firmware par défaut !",
 		"db_update_warning": "Cette opération se fait automatiquement quotidiennement sans avoir besoin d'utiliser cette mise à jour manuelle. La mise à jour de cette base de données peut prendre jusqu'à 25 minutes",
+		"default_created_error_one": "{{count}} erreur lors de la tentative de création d'un nouveau paramètre",
+		"default_created_error_other": "{{count}}  erreurs lors de la tentative de création d'un nouveau paramètre",
+		"default_created_one": "{{count}} paramètre de micrologiciel par défaut créé",
+		"default_created_other": "{{count}}  paramètres de micrologiciel par défaut créés",
+		"default_found_one": "Révision valide trouvée pour le type d'appareil {{count}} ",
+		"default_found_other": "Révisions valides trouvées pour {{count}}  types d'appareils",
+		"default_mass_delete_success_one": "Paramètre de micrologiciel par défaut {{count}} supprimé !",
+		"default_mass_delete_success_other": " {{count}}  paramètres de micrologiciel par défaut supprimés !",
+		"default_not_found_one": "Aucune version de micrologiciel valide pour le type d'appareil {{count}} ",
+		"default_not_found_other": "Aucune version de micrologiciel valide pour {{count}}  types d'appareils",
+		"default_title": "",
+		"default_update_success": "Firmware par défaut mis à jour pour {{deviceType}} !",
+		"delete_success": "Paramètre de micrologiciel par défaut supprimé !",
+		"edit_default_title": "Il s'agit du micrologiciel actuel utilisé comme version minimale pour les nouveaux points d'accès de type {{deviceType}}. Si un nouveau point d'accès {{deviceType}} se connecte à la passerelle, il sera automatiquement mis à niveau vers cette version.",
+		"fetching_defaults": "Récupération de tous les micrologiciels disponibles pour les types d'appareils sélectionnés...",
 		"last_db_update_modal": "Base de données du micrologiciel",
 		"last_db_update_title": "Base de données",
+		"one": "Micrologiciel",
+		"select_default_device_types": "Veuillez sélectionner tous les types d'appareils que vous souhaitez cibler avec cette nouvelle règle de micrologiciel par défaut. Si vous ne trouvez pas le type d'appareil souhaité, cela signifie qu'une règle est déjà appliquée.",
+		"select_default_revision": "Vous pouvez maintenant sélectionner la révision minimale que vous souhaitez que vos types d'appareils ciblent",
 		"start_db_update": "Démarrer la mise à jour de la base de données",
-		"started_db_update": "Mise à jour de la base de données démarrée, cette opération devrait prendre jusqu'à 25 minutes"
+		"started_db_update": "Mise à jour de la base de données démarrée, cette opération devrait prendre jusqu'à 25 minutes",
+		"update_success": "Informations sur le micrologiciel par défaut enregistrées !"
 	},
 	"footer": {
 		"powered_by": "Alimenté par",
@@ -712,7 +750,7 @@
 		"invalid_ipv6": "Adresse IPv6 invalide (ex. : 2001:db8:3333:4444:5555:6666:7777:8888)",
 		"invalid_json": "Chaîne JSON non valide",
 		"invalid_lease_time": "Valeur de durée de bail non valide ! Ils doivent être au format digitUnit. Par exemple : 6d2h5m, ce qui signifie 6 jours, 2 heures et 5 minutes. Voici les unités acceptées : m, h, d. Si vous ne voulez pas utiliser une unité, omettez-la complètement. Donc au lieu de dire 0d2h0m, utilisez 2h",
-		"invalid_mac_uc": "Valeur UC-MAC non valide, par exemple : 00:00:5e:00:53:af",
+		"invalid_mac_uc": "Valeur MAC non valide, par exemple : 00:00:5e:00:53:af",
 		"invalid_password": "Mot de passe invalide, veuillez consulter la politique de mot de passe",
 		"invalid_phone_number": "Numéro de téléphone invalide",
 		"invalid_phone_numbers": "Un ou plusieurs des numéros de téléphone sont invalides. Veuillez les fournir sans symboles ni espaces, ou dans ce format : +1(123)123-1234",
@@ -990,6 +1028,11 @@
 		"concurrent_devices": "Périphériques simultanés",
 		"controller": "Manette",
 		"current_live_devices": "Appareils en direct actuels",
+		"currently_running_one": "Il y a actuellement {{count}} simulation en cours",
+		"currently_running_other": "Il y a actuellement {{count}}  simulations en cours d'exécution",
+		"delete_devices_confirm": "Voulez-vous vraiment supprimer tous les appareils et leurs statistiques de la passerelle ? Cette action n'est pas réversible",
+		"delete_devices_loading": "Ce processus peut prendre jusqu'à 5 minutes",
+		"delete_simulation_devices": "Supprimer des appareils",
 		"delete_success": "Simulation supprimée !",
 		"duration": "Durée",
 		"error_devices": "Périphériques d'erreur",
@@ -997,6 +1040,7 @@
 		"infinite": "Infini",
 		"keep_alive": "Rester en vie",
 		"mac_prefix": "Préfixe MAC",
+		"mac_prefix_length": "Votre préfixe MAC doit être valide à 6 chiffres HEX (ex. : 00112233)",
 		"max_associations": "Max. Les associations",
 		"max_clients": "Max. Clients",
 		"min_associations": "Min. Les associations",
@@ -1013,6 +1057,7 @@
 		"rx_messages": "Messages reçus",
 		"sim_currently_running": "Simulation \"{{sim}}\" en cours",
 		"sim_history": "{{sim}} courses précédentes",
+		"simulated": "Simulé",
 		"start": "Démarrer la simulation",
 		"start_success": "Lancement de la simulation !",
 		"state_interval": "Intervalle d'état",
@@ -1026,6 +1071,7 @@
 	},
 	"statistics": {
 		"last_stats": "Dernières statistiques",
+		"latest": "Dernières statistiques",
 		"memory": "mémoire"
 	},
 	"subscribers": {
@@ -1072,14 +1118,24 @@
 		"version": "Version"
 	},
 	"table": {
+		"columns": "Les colonnes",
 		"columns_hidden_one": "{{count}} Colonne masquée",
 		"columns_hidden_other": "{{count}}  colonnes masquées",
+		"display_column": "Afficher",
+		"drag_always_show": "Vous ne pouvez pas masquer cette colonne, mais vous pouvez modifier sa position",
+		"drag_explanation": "Glisser-déposer pour réorganiser et modifier la visibilité des colonnes",
+		"drag_locked": "Cette colonne est verrouillée dans sa position",
+		"export_current_page": "Page actuelle uniquement",
 		"first_page": "Première page",
 		"go_to_page": "Aller à la page",
+		"hide_column": "Cacher",
 		"last_page": "Dernière page",
 		"next_page": "Page suivante",
 		"page": "Page",
-		"previous_page": "Page précédente"
+		"preferences": "Préférences de tableau",
+		"previous_page": "Page précédente",
+		"reset": "Remettre à zéro les préférences",
+		"settings": "Réglages"
 	},
 	"user": {
 		"email_not_validated": "Mail non valide",

public/locales/pt/translation.json

@@ -64,6 +64,8 @@
 		"health": "Saúde",
 		"inactive": "Inativo",
 		"interval": "intervalo",
+		"last_connected": "última conexão",
+		"last_connected_tooltip": "Última vez que este dispositivo foi conectado ao controlador. Isso pode ser usado para estimar quando um dispositivo desconectado",
 		"last_connection": "última conexão",
 		"last_contact": "Último contato",
 		"last_disconnection": "Última desconexão",
@@ -221,6 +223,7 @@
 		"day": "Dia",
 		"days": "Dias",
 		"default": "Padrão",
+		"defaults": "Predefinições",
 		"description": "Descrição",
 		"details": "Detalhes",
 		"device_details": "Detalhes do dispositivo",
@@ -241,6 +244,7 @@
 		"error_download": "Erro ao tentar fazer o download: {{e}}",
 		"errors": "Erros",
 		"exit_fullscreen": "Saída",
+		"export": "Exportar",
 		"finished": "acabado",
 		"fullscreen": "Tela cheia",
 		"general_error": "Erro ao se conectar ao servidor. Consulte seu administrador.",
@@ -356,6 +360,7 @@
 		"error_pushes_one": "Erro (pode ser devido à configuração incorreta): {{count}}",
 		"error_pushes_other": "Erros (podem ser devido à configuração incorreta): {{count}}",
 		"expert_name": "MODO EXPERT",
+		"expert_name_explanation": "Você pode usar o modo especialista para modificar diretamente sua configuração, incluindo a adição de valores que não são atualmente suportados pela interface do usuário. Use este formato: { \"interfaces\": [ ... ], \"globals\": { ... }, ...etc }",
 		"explanation": "Explicação",
 		"firewall": "Firewall",
 		"firmware_upgrade": "Atualização de firmware",
@@ -522,6 +527,7 @@
 			"ouis_explanation": "OUIs de dispositivos que se conectaram a este servidor de firmware",
 			"outdated_one": "Firmware com {{count}} dias",
 			"outdated_other": "Firmware com {{count}} dias",
+			"outdated_unknown": "Firmware de idade desconhecida",
 			"release": "LANÇAMENTO",
 			"show_dev_releases": "Lançamentos do desenvolvedor",
 			"status_explanation": "Status da conexão dos dispositivos que se conectaram a este servidor de firmware",
@@ -537,6 +543,16 @@
 		"queue": {
 			"title": "Fila de Eventos"
 		},
+		"radius": {
+			"calling_station_id": "estação",
+			"disconnect": "Desconectar",
+			"disconnect_success": "Sessão Radius desconectada!",
+			"input_octets": "Entrada",
+			"output_octets": "Saída",
+			"radius_clients": "Clientes Radius",
+			"session_time": "Tempo de sessão",
+			"username": "Nome de usuário"
+		},
 		"stats": {
 			"load": "Carga (1 | 5 | 15 m.)",
 			"seconds_ago": "{{s}} segundos atrás",
@@ -629,6 +645,7 @@
 		"notifications": "Notificações do dispositivo",
 		"one": "Dispositivo",
 		"reassign_already_owned": "Reatribuir dispositivos que já existem e são de propriedade de outra entidade/local/assinante?",
+		"reboot_logs": "Registros de reinicialização",
 		"restricted": "Restrito",
 		"restricted_overriden": "Este é um dispositivo restrito, mas está em modo de desenvolvimento. Todas as restrições são atualmente ignoradas",
 		"restrictions_overriden_title": "Modo de desenvolvedor",
@@ -686,11 +703,32 @@
 		"venues_under_root": "Os locais não podem ser criados diretamente na entidade raiz"
 	},
 	"firmware": {
+		"confirm_default_data": "Confirme as informações abaixo e clique em 'Confirmar' quando estiver pronto para iniciar o processo",
+		"create_success": "Criou novas configurações de firmware padrão!",
 		"db_update_warning": "Esta operação é feita automaticamente diariamente sem necessidade de usar esta atualização manual. A atualização deste banco de dados pode levar até 25 minutos",
+		"default_created_error_one": "{{count}} erro ao tentar criar uma nova configuração",
+		"default_created_error_other": "{{count}} erros ao tentar criar uma nova configuração",
+		"default_created_one": "{{count}} configuração de firmware padrão criada",
+		"default_created_other": "{{count}} configurações de firmware padrão criadas",
+		"default_found_one": "Revisão válida encontrada para {{count}} tipo de dispositivo",
+		"default_found_other": "Foram encontradas revisões válidas para {{count}} tipos de dispositivo",
+		"default_mass_delete_success_one": "Configuração de firmware padrão {{count}} excluída!",
+		"default_mass_delete_success_other": "Excluídas {{count}} configurações de firmware padrão!",
+		"default_not_found_one": "Nenhuma versão de firmware válida para {{count}} tipo de dispositivo",
+		"default_not_found_other": "Nenhuma versão de firmware válida para {{count}} tipos de dispositivo",
+		"default_title": "",
+		"default_update_success": "Firmware padrão atualizado para {{deviceType}}!",
+		"delete_success": "Configuração de firmware padrão excluída!",
+		"edit_default_title": "Este é o firmware atual usado como versão mínima para novos APs do tipo {{deviceType}}. Se um novo AP {{deviceType}} se conectar ao gateway, ele será atualizado automaticamente para esta versão.",
+		"fetching_defaults": "Buscando todo o firmware disponível para os tipos de dispositivos selecionados...",
 		"last_db_update_modal": "banco de dados de firmware",
 		"last_db_update_title": "base de dados",
+		"one": "Firmware",
+		"select_default_device_types": "Selecione todos os tipos de dispositivos que deseja segmentar com esta nova regra de firmware padrão. Se você não conseguir encontrar o tipo de dispositivo desejado, significa que eles já têm uma regra aplicada.",
+		"select_default_revision": "Agora você pode selecionar a revisão mínima para a qual deseja que seus tipos de dispositivo sejam direcionados",
 		"start_db_update": "Iniciar atualização do banco de dados",
-		"started_db_update": "Atualização do banco de dados iniciada, esta operação deve levar até 25 minutos para ser concluída"
+		"started_db_update": "Atualização do banco de dados iniciada, esta operação deve levar até 25 minutos para ser concluída",
+		"update_success": "Informações de firmware padrão salvas!"
 	},
 	"footer": {
 		"powered_by": "Distribuído por",
@@ -712,7 +750,7 @@
 		"invalid_ipv6": "Endereço IPv6 inválido (ex.: 2001:db8:3333:4444:5555:6666:7777:8888)",
 		"invalid_json": "Sequência JSON inválida",
 		"invalid_lease_time": "Valor de tempo de locação inválido! Eles precisam estar no formato digitUnit. Por exemplo: 6d2h5m, que significa 6 dias, 2 horas e 5 minutos. Aqui estão as unidades aceitas: m, h, d. Se você não quiser usar uma unidade, omita-a completamente. Então, em vez de dizer 0d2h0m, use 2h",
-		"invalid_mac_uc": "Valor UC-MAC inválido, por exemplo: 00:00:5e:00:53:af",
+		"invalid_mac_uc": "Valor MAC inválido, por exemplo: 00:00:5e:00:53:af",
 		"invalid_password": "Senha inválida, consulte a política de senha",
 		"invalid_phone_number": "Número de telefone inválido",
 		"invalid_phone_numbers": "Um ou mais números de telefone são inválidos. Forneça-os sem símbolos e espaços ou neste formato: +1(123)123-1234",
@@ -990,6 +1028,11 @@
 		"concurrent_devices": "Dispositivos Simultâneos",
 		"controller": "Controlador",
 		"current_live_devices": "Dispositivos ativos atuais",
+		"currently_running_one": "Atualmente, há {{count}} simulação em execução",
+		"currently_running_other": "Existem atualmente {{count}} simulações em execução",
+		"delete_devices_confirm": "Tem certeza de que deseja remover todos os dispositivos e suas estatísticas do gateway? Esta ação não é reversível",
+		"delete_devices_loading": "Este processo pode levar até 5 minutos",
+		"delete_simulation_devices": "Apagar dispositivos",
 		"delete_success": "Simulação excluída!",
 		"duration": "Duração",
 		"error_devices": "Dispositivos de Erro",
@@ -997,6 +1040,7 @@
 		"infinite": "Infinito",
 		"keep_alive": "Mantenha vivo",
 		"mac_prefix": "Prefixo MAC",
+		"mac_prefix_length": "Seu prefixo MAC precisa ter 6 dígitos HEX válidos (ex.: 00112233)",
 		"max_associations": "Máx. Associações",
 		"max_clients": "Máx. Clientes",
 		"min_associations": "Min. Associações",
@@ -1013,6 +1057,7 @@
 		"rx_messages": "Mensagens Rx",
 		"sim_currently_running": "Simulação \"{{sim}}\" em andamento",
 		"sim_history": "{{sim}} execuções anteriores",
+		"simulated": "Simulado",
 		"start": "Iniciar simulação",
 		"start_success": "Corrida de simulação iniciada!",
 		"state_interval": "Intervalo de estado",
@@ -1026,6 +1071,7 @@
 	},
 	"statistics": {
 		"last_stats": "Últimas estatísticas",
+		"latest": "Estatísticas mais recentes",
 		"memory": "Memória"
 	},
 	"subscribers": {
@@ -1072,14 +1118,24 @@
 		"version": "Versão"
 	},
 	"table": {
+		"columns": "Colunas",
 		"columns_hidden_one": "{{count}} Coluna oculta",
 		"columns_hidden_other": "{{count}} Colunas ocultas",
+		"display_column": "Exibição",
+		"drag_always_show": "Você não pode ocultar esta coluna, mas pode alterar sua posição",
+		"drag_explanation": "Arraste e solte para reordenar e alterar a visibilidade da coluna",
+		"drag_locked": "Esta coluna está travada em sua posição",
+		"export_current_page": "Somente página atual",
 		"first_page": "Primeira Página",
 		"go_to_page": "Vá para página",
+		"hide_column": "Ocultar",
 		"last_page": "Última Página",
 		"next_page": "Próxima página",
 		"page": "Página",
-		"previous_page": "Página anterior"
+		"preferences": "Preferências de Tabela",
+		"previous_page": "Página anterior",
+		"reset": "Reiniciar preferências",
+		"settings": "Definições"
 	},
 	"user": {
 		"email_not_validated": "e-mail não validado",

src/@tanstack.react-table.d.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { BoxProps } from '@chakra-ui/react';
+import '@tanstack/react-table';
+
+declare module '@tanstack/table-core' {
+  interface ColumnMeta<TData extends RowData, TValue> {
+    stopPropagation?: boolean;
+    alwaysShow?: boolean;
+    anchored?: boolean;
+    hasPopover?: boolean;
+    customMaxWidth?: string;
+    customMinWidth?: string;
+    customWidth?: string;
+    isMonospace?: boolean;
+    isCentered?: boolean;
+    columnSelectorOptions?: {
+      label?: string;
+    };
+    headerOptions?: {
+      tooltip?: string;
+    };
+    headerStyleProps?: BoxProps;
+  }
+}

src/components/Buttons/AlertButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { Warning } from 'phosphor-react';
+import { Warning } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { ThemeProps } from 'models/Theme';
 

src/components/Buttons/CloseButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconButton, SpaceProps } from '@chakra-ui/react';
-import { X } from 'phosphor-react';
+import { X } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface CloseButtonProps extends SpaceProps {

src/components/Buttons/CreateButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint, SpaceProps } from '@chakra-ui/react';
-import { Plus } from 'phosphor-react';
+import { Plus } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface CreateButtonProps extends SpaceProps {

src/components/Buttons/DeleteButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { Trash } from 'phosphor-react';
+import { Trash } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface DeleteButtonProps {

src/components/Buttons/DeviceActionDropdown/index.tsx

@@ -1,18 +1,17 @@
 import React from 'react';
 import {
-  Button,
   IconButton,
   Menu,
   MenuButton,
   MenuItem,
   MenuList,
   Portal,
-  Spinner,
   Tooltip,
+  useColorModeValue,
   useToast,
 } from '@chakra-ui/react';
 import axios from 'axios';
-import { Wrench } from 'phosphor-react';
+import { Barcode, Power, TerminalWindow, WifiHigh, Wrench } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useControllerStore } from 'contexts/ControllerSocketProvider/useStore';
 import { useBlinkDevice, useGetDeviceRtty } from 'hooks/Network/Devices';
@@ -51,12 +50,13 @@ const DeviceActionDropdown = ({
   onOpenScriptModal,
   onOpenRebootModal,
   size,
-  isCompact = true,
+  isCompact,
 }: Props) => {
   const { t } = useTranslation();
   const toast = useToast();
+  const connectColor = useColorModeValue('blackAlpha', 'gray');
   const addEventListeners = useControllerStore((state) => state.addEventListeners);
-  const { refetch: getRtty, isInitialLoading: isRtty } = useGetDeviceRtty({
+  const { refetch: getRtty, isFetching: isRtty } = useGetDeviceRtty({
     serialNumber: device.serialNumber,
     extraId: 'inventory-modal',
   });
@@ -162,49 +162,90 @@ const DeviceActionDropdown = ({
   const handleRebootClick = () => onOpenRebootModal(device.serialNumber);
 
   return (
+    <>
+      <Tooltip label={t('commands.connect')}>
+        <IconButton
+          aria-label="Connect"
+          icon={<TerminalWindow size={20} />}
+          size={size ?? 'sm'}
+          isDisabled={isDisabled}
+          isLoading={isRtty}
+          onClick={handleConnectClick}
+          colorScheme={connectColor}
+          hidden={isCompact}
+        />
+      </Tooltip>
+      <Tooltip label={t('controller.configure.title')}>
+        <IconButton
+          aria-label={t('controller.configure.title')}
+          icon={<Barcode size={20} />}
+          size={size ?? 'sm'}
+          isDisabled={isDisabled}
+          onClick={handleOpenConfigure}
+          colorScheme="purple"
+          hidden={isCompact}
+        />
+      </Tooltip>
+      <Tooltip label={t('commands.reboot')}>
+        <IconButton
+          aria-label={t('commands.reboot')}
+          icon={<Power size={20} />}
+          size={size ?? 'sm'}
+          isDisabled={isDisabled}
+          onClick={handleRebootClick}
+          colorScheme="green"
+          hidden={isCompact}
+        />
+      </Tooltip>
+      <Tooltip label={t('commands.wifiscan')}>
+        <IconButton
+          aria-label={t('commands.wifiscan')}
+          icon={<WifiHigh size={20} />}
+          size={size ?? 'sm'}
+          isDisabled={isDisabled}
+          onClick={handleOpenScan}
+          colorScheme="teal"
+          hidden={isCompact}
+        />
+      </Tooltip>
       <Menu>
         <Tooltip label={t('common.actions')}>
-        {size === undefined || isCompact ? (
           <MenuButton
             as={IconButton}
             aria-label="Commands"
-            icon={isRtty ? <Spinner /> : <Wrench size={20} />}
+            icon={<Wrench size={20} />}
             size={size ?? 'sm'}
             isDisabled={isDisabled}
-            ml={2}
           />
-        ) : (
-          <MenuButton
-            as={Button}
-            aria-label="Commands"
-            rightIcon={isRtty ? <Spinner /> : <Wrench size={20} />}
-            size={size ?? 'sm'}
-            isDisabled={isDisabled}
-            ml={2}
-          >
-            {t('common.actions')}
-          </MenuButton>
-        )}
         </Tooltip>
         <Portal>
-        <MenuList>
+          <MenuList maxH="315px" overflowY="auto">
             <MenuItem onClick={handleBlinkClick}>{t('commands.blink')}</MenuItem>
-          <MenuItem onClick={handleOpenConfigure}>{t('controller.configure.title')}</MenuItem>
-          <MenuItem onClick={handleConnectClick}>{t('commands.connect')}</MenuItem>
+            <MenuItem onClick={handleOpenConfigure} hidden={!isCompact}>
+              {t('controller.configure.title')}
+            </MenuItem>
+            <MenuItem onClick={handleConnectClick} hidden={!isCompact}>
+              {t('commands.connect')}
+            </MenuItem>
             <MenuItem onClick={handleOpenQueue}>{t('controller.queue.title')}</MenuItem>
             <MenuItem onClick={handleOpenFactoryReset}>{t('commands.factory_reset')}</MenuItem>
             <MenuItem onClick={handleOpenUpgrade}>{t('commands.firmware_upgrade')}</MenuItem>
-          <MenuItem onClick={handleRebootClick}>{t('commands.reboot')}</MenuItem>
+            <MenuItem onClick={handleRebootClick} hidden={!isCompact}>
+              {t('commands.reboot')}
+            </MenuItem>
             <MenuItem onClick={handleOpenTelemetry}>{t('controller.telemetry.title')}</MenuItem>
             <MenuItem onClick={handleOpenScript}>{t('script.one')}</MenuItem>
             <MenuItem onClick={handleOpenTrace}>{t('controller.devices.trace')}</MenuItem>
             <MenuItem onClick={handleUpdateToLatest} hidden>
               {t('premium.toolbox.upgrade_to_latest')}
             </MenuItem>
-          <MenuItem onClick={handleOpenScan}>{t('commands.wifiscan')}</MenuItem>
+            <MenuItem onClick={handleOpenScan} hidden={!isCompact}>
+              {t('commands.wifiscan')}
+            </MenuItem>
           </MenuList>
         </Portal>
       </Menu>
+    </>
   );
 };
 

src/components/Buttons/EditButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { IconButton, Button, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { Pen } from 'phosphor-react';
+import { Pen } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface EditButtonProps {

src/components/Buttons/RefreshButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, ThemeTypings, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { ArrowsClockwise } from 'phosphor-react';
+import { ArrowsClockwise } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface RefreshButtonProps {

src/components/Buttons/SaveButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { FloppyDisk } from 'phosphor-react';
+import { FloppyDisk } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface SaveButtonProps

src/components/Buttons/StepButton/index.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { ArrowRight, FloppyDisk } from 'phosphor-react';
+import { ArrowRight, FloppyDisk } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 
 export interface StepButtonProps {

src/components/Buttons/ToggleEditButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint, useDisclosure } from '@chakra-ui/react';
-import { Pencil, X } from 'phosphor-react';
+import { Pencil, Stop } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { ConfirmCloseAlertModal } from '../../Modals/ConfirmCloseAlert';
 
@@ -48,7 +48,7 @@ const _ToggleEditButton: React.FC<ToggleEditButtonProps> = ({
           colorScheme="gray"
           type="button"
           onClick={toggle}
-          rightIcon={isEditing ? <X size={20} /> : <Pencil size={20} />}
+          rightIcon={isEditing ? <Stop size={20} /> : <Pencil size={20} />}
           isLoading={isLoading}
           isDisabled={isDisabled}
           ml={ml}
@@ -68,7 +68,7 @@ const _ToggleEditButton: React.FC<ToggleEditButtonProps> = ({
           colorScheme="gray"
           type="button"
           onClick={toggle}
-          icon={isEditing ? <X size={20} /> : <Pencil size={20} />}
+          icon={isEditing ? <Stop size={20} /> : <Pencil size={20} />}
           isLoading={isLoading}
           isDisabled={isDisabled}
           ml={ml}

src/components/Buttons/WarningButton/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Button, IconButton, Tooltip, useBreakpoint } from '@chakra-ui/react';
-import { Warning } from 'phosphor-react';
+import { Warning } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { ThemeProps } from 'models/Theme';
 

src/components/Containers/Card/CardHeader.tsx

@@ -1,17 +1,57 @@
-import React from 'react';
-import { Box, LayoutProps, SpaceProps, useStyleConfig } from '@chakra-ui/react';
+import React, { DOMAttributes } from 'react';
+import {
+  BackgroundProps,
+  Box,
+  EffectProps,
+  InteractivityProps,
+  LayoutProps,
+  PositionProps,
+  SpaceProps,
+  useColorModeValue,
+  useStyleConfig,
+  useToken,
+} from '@chakra-ui/react';
 
-export interface CardHeaderProps extends LayoutProps, SpaceProps {
-  variant?: string;
+export interface CardHeaderProps
+  extends LayoutProps,
+    SpaceProps,
+    BackgroundProps,
+    InteractivityProps,
+    PositionProps,
+    EffectProps,
+    DOMAttributes<HTMLDivElement> {
+  variant?: 'panel' | 'unstyled';
   children: React.ReactNode;
+  icon?: React.ReactNode;
+  headerStyle?: {
+    color: string;
+  };
 }
 
-const _CardHeader: React.FC<CardHeaderProps> = ({ variant, children, ...rest }) => {
-  // @ts-ignore
+const _CardHeader: React.FC<CardHeaderProps> = ({
+  variant,
+  children,
+  icon,
+  headerStyle = {
+    color: 'blue',
+  },
+  ...rest
+}) => {
+  const iconBgcolor = useToken('colors', [`${headerStyle?.color}.500`, `${headerStyle?.color}.300`]);
+  const bgColor = useToken('colors', [`${headerStyle?.color}.50`, `${headerStyle?.color}.700`]);
+  const iconColor = useColorModeValue(iconBgcolor[0], iconBgcolor[1]);
+  const headerBgColor = useColorModeValue(bgColor[0], bgColor[1]);
+
   const styles = useStyleConfig('CardHeader', { variant });
+
   // Pass the computed styles into the `__css` prop
   return (
-    <Box __css={styles} {...rest}>
+    <Box __css={styles} bgColor={variant === 'unstyled' ? undefined : headerBgColor} {...rest}>
+      {icon ? (
+        <Box mr={2} color={headerStyle ? iconColor : undefined} bgColor="unset">
+          {icon}
+        </Box>
+      ) : null}
       {children}
     </Box>
   );

src/components/Containers/Card/index.tsx

@@ -1,22 +1,7 @@
 import React from 'react';
-import {
-  BackgroundProps,
-  Box,
-  EffectProps,
-  InteractivityProps,
-  LayoutProps,
-  PositionProps,
-  SpaceProps,
-  useStyleConfig,
-} from '@chakra-ui/react';
+import { BackgroundProps, Box, InteractivityProps, LayoutProps, SpaceProps, useStyleConfig } from '@chakra-ui/react';
 
-export interface CardProps
-  extends LayoutProps,
-    SpaceProps,
-    BackgroundProps,
-    InteractivityProps,
-    PositionProps,
-    EffectProps {
+export interface CardProps extends LayoutProps, SpaceProps, BackgroundProps, InteractivityProps {
   variant?: string;
   onClick?: () => void;
   className?: string;

src/components/Containers/GraphStatDisplay/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Box, Heading, IconButton, Spacer, Tooltip, useDisclosure } from '@chakra-ui/react';
-import { ArrowsOut, Info } from 'phosphor-react';
+import { ArrowsOut, Info } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Card } from '../Card';
 import { CardBody } from '../Card/CardBody';
@@ -18,7 +18,7 @@ const GraphStatDisplay = ({ chart, title, explanation }: Props) => {
 
   return (
     <>
-      <Card variant="widget" w="100%">
+      <Card>
         <CardHeader>
           <Heading mr={2} my="auto" size="md">
             {title}

src/components/Containers/Modal/ModalHeader/index.tsx

@@ -1,17 +1,26 @@
 import React from 'react';
-import { Flex, LayoutProps, ModalHeader as Header, SpaceProps, Spacer } from '@chakra-ui/react';
+import { HStack, ModalHeader as Header, Spacer, useColorModeValue } from '@chakra-ui/react';
 
-export interface ModalHeaderProps extends LayoutProps, SpaceProps {
+export interface ModalHeaderProps {
   title: string;
-  right?: React.ReactNode;
+  left?: React.ReactNode;
+  right: React.ReactNode;
 }
 
-export const ModalHeader = ({ title, right }: ModalHeaderProps) => (
-  <Header>
-    <Flex justifyContent="center" alignItems="center" maxW="100%" px={1}>
+const _ModalHeader: React.FC<ModalHeaderProps> = ({ title, left, right }) => {
+  const bg = useColorModeValue('blue.50', 'blue.700');
+
+  return (
+    <Header bg={bg}>
       {title}
+      {left ? (
+        <HStack spacing={2} ml={2}>
+          {left}
+        </HStack>
+      ) : null}
       <Spacer />
       {right}
-    </Flex>
     </Header>
-);
+  );
+};
+export const ModalHeader = React.memo(_ModalHeader);

src/components/Containers/ResponsiveTag/index.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { As, Icon, Tag, TagLabel, TagLeftIcon, TagProps, Tooltip, useBreakpoint } from '@chakra-ui/react';
+
+export interface ResponsiveTagProps extends TagProps {
+  label: string;
+  icon: As<any>;
+  tooltip?: string;
+  isCompact?: boolean;
+}
+
+export const ResponsiveTag = React.memo(({ label, icon, tooltip, isCompact, ...props }: ResponsiveTagProps) => {
+  const breakpoint = useBreakpoint();
+
+  const isCompactVersion = isCompact || breakpoint === 'base' || breakpoint === 'sm';
+
+  if (isCompactVersion) {
+    return (
+      <Tooltip label={tooltip ?? label}>
+        <Tag size="lg" colorScheme="blue" {...props}>
+          <Icon as={icon} boxSize="18px" />
+        </Tag>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <Tooltip label={tooltip ?? label}>
+      <Tag size="lg" colorScheme="blue" {...props}>
+        <TagLeftIcon boxSize="18px" as={icon} />
+        <TagLabel>{label}</TagLabel>
+      </Tag>
+    </Tooltip>
+  );
+});

src/components/Containers/SimpleIconStatDisplay/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { As, Flex, Heading, Icon, Spacer, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
-import { Info } from 'phosphor-react';
+import { Info } from '@phosphor-icons/react';
 import { Card } from '../Card';
 
 type Props = {
@@ -15,19 +15,19 @@ const SimpleIconStatDisplay = ({ title, description, icon, value, color }: Props
   const bgColor = useColorModeValue(color[0], color[1]);
 
   return (
-    <Card variant="widget" w="100%" p={3}>
-      <Flex h="70px" w="100%">
+    <Card p={3} bgColor={bgColor}>
+      <Flex h="70px" w="100%" color="white">
         <Flex direction="column" justifyContent="center">
           <Heading size="lg">{value}</Heading>
           <Heading size="sm" display="flex">
-            <Text opacity={0.8}>{title}</Text>
+            <Text>{title}</Text>
             <Tooltip label={description} hasArrow>
               <Info style={{ marginLeft: '4px', marginTop: '2px' }} />
             </Tooltip>
           </Heading>
         </Flex>
         <Spacer />
-        <Icon borderRadius="15px" my="auto" as={icon} boxSize="70px" bgColor={bgColor} color="white" />
+        <Icon borderRadius="15px" my="auto" as={icon} boxSize="70px" color="white" />
       </Flex>
     </Card>
   );

src/components/DataTables/ColumnPicker/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { Button, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, useBreakpoint } from '@chakra-ui/react';
-import { FunnelSimple } from 'phosphor-react';
+import { FunnelSimple } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { useAuth } from 'contexts/AuthProvider';

src/components/DataTables/DataGrid/CellRow.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { Td, Tr } from '@chakra-ui/react';
+import { Row, flexRender } from '@tanstack/react-table';
+
+export type DataGridCellRowProps<TValue extends object> = {
+  row: Row<TValue>;
+  onRowClick: ((row: TValue) => (() => void) | undefined) | undefined;
+  rowStyle: {
+    hoveredRowBg: string;
+  };
+};
+
+export const DataGridCellRow = <TValue extends object>({
+  row,
+  rowStyle: { hoveredRowBg },
+  onRowClick,
+}: DataGridCellRowProps<TValue>) => {
+  const onClick = onRowClick ? onRowClick(row.original) : undefined;
+
+  return (
+    <Tr
+      key={row.id}
+      _hover={{
+        backgroundColor: hoveredRowBg,
+      }}
+      onClick={onClick}
+      borderRight="1px solid gray"
+    >
+      {row.getVisibleCells().map((cell) => (
+        <Td
+          px={1}
+          key={cell.id}
+          textOverflow="ellipsis"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          minWidth={cell.column.columnDef.meta?.customMinWidth ?? undefined}
+          maxWidth={cell.column.columnDef.meta?.customMaxWidth ?? undefined}
+          width={cell.column.columnDef.meta?.customWidth}
+          textAlign={cell.column.columnDef.meta?.isCentered ? 'center' : undefined}
+          fontFamily={
+            cell.column.columnDef.meta?.isMonospace
+              ? 'Inter, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
+              : undefined
+          }
+          onClick={
+            cell.column.columnDef.meta?.stopPropagation || (cell.column.id === 'actions' && onClick)
+              ? (e) => {
+                  e.stopPropagation();
+                }
+              : undefined
+          }
+          cursor={
+            !cell.column.columnDef.meta?.stopPropagation && cell.column.id !== 'actions' && onClick
+              ? 'pointer'
+              : undefined
+          }
+          border="0.5px solid gray"
+        >
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </Td>
+      ))}
+    </Tr>
+  );
+};

src/components/DataTables/DataGrid/DataGridColumnPicker.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Box, Checkbox, IconButton, Menu, MenuButton, MenuItem, MenuList, Tooltip } from '@chakra-ui/react';
+import { FunnelSimple } from '@phosphor-icons/react';
+import { VisibilityState } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
+import { DataGridColumn } from './useDataGrid';
+
+export type DataGridColumnPickerProps<TValue extends object> = {
+  columns: DataGridColumn<TValue>[];
+  columnVisibility: VisibilityState;
+  toggleVisibility: (id: string) => void;
+};
+
+export const DataGridColumnPicker = <TValue extends object>({
+  columns,
+  columnVisibility,
+  toggleVisibility,
+}: DataGridColumnPickerProps<TValue>) => {
+  const { t } = useTranslation();
+
+  return (
+    <Box>
+      <Menu closeOnSelect={false} isLazy>
+        <Tooltip label={t('common.columns')} hasArrow>
+          <MenuButton as={IconButton} icon={<FunnelSimple />} />
+        </Tooltip>
+        <MenuList maxH="200px" overflowY="auto">
+          {columns
+            .filter((col) => col.id && col.header)
+            .map((column) => {
+              const handleClick =
+                column.id !== undefined ? () => toggleVisibility(column.id as unknown as string) : undefined;
+              const id = column.id ?? uuid();
+              let label = column.header?.toString() ?? 'Unrecognized column';
+              if (column.meta?.columnSelectorOptions?.label) label = column.meta.columnSelectorOptions.label;
+
+              return (
+                <MenuItem
+                  key={id}
+                  as={Checkbox}
+                  isChecked={columnVisibility[id] === undefined || columnVisibility[id]}
+                  onChange={column.meta?.alwaysShow ? undefined : handleClick}
+                  isDisabled={column.meta?.alwaysShow}
+                >
+                  {label}
+                </MenuItem>
+              );
+            })}
+        </MenuList>
+      </Menu>
+    </Box>
+  );
+};

src/components/DataTables/DataGrid/HeaderRow.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Box, Flex, Th, Tooltip, Tr } from '@chakra-ui/react';
+import { HeaderGroup, flexRender } from '@tanstack/react-table';
+import { DataGridSortIcon } from './SortIcon';
+
+export type DataGridHeaderRowProps<TValue extends object> = {
+  headerGroup: HeaderGroup<TValue>;
+};
+
+export const DataGridHeaderRow = <TValue extends object>({ headerGroup }: DataGridHeaderRowProps<TValue>) => (
+  <Tr p={0} borderRight="1px solid gray">
+    {headerGroup.headers.map((header) => (
+      <Th
+        color="gray.400"
+        key={header.id}
+        colSpan={header.colSpan}
+        minWidth={header.column.columnDef.meta?.customMinWidth ?? undefined}
+        maxWidth={header.column.columnDef.meta?.customMaxWidth ?? undefined}
+        width={header.column.columnDef.meta?.customWidth}
+        fontSize="sm"
+        onClick={header.column.getCanSort() ? header.column.getToggleSortingHandler() : undefined}
+        cursor={header.column.getCanSort() ? 'pointer' : undefined}
+        border="0.5px solid gray"
+        px={1}
+      >
+        <Flex display="flex" alignItems="center">
+          {header.isPlaceholder ? null : (
+            <Tooltip label={header.column.columnDef.meta?.headerOptions?.tooltip}>
+              <Box
+                overflow="hidden"
+                whiteSpace="nowrap"
+                alignContent="center"
+                width="100%"
+                {...header.column.columnDef.meta?.headerStyleProps}
+              >
+                {flexRender(header.column.columnDef.header, header.getContext())}
+              </Box>
+            </Tooltip>
+          )}
+          <DataGridSortIcon sortInfo={header.column.getIsSorted()} canSort={header.column.getCanSort()} />
+        </Flex>
+      </Th>
+    ))}
+  </Tr>
+);

src/components/DataTables/DataGrid/Input.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import { ArrowLeftIcon, ArrowRightIcon, ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons';
+import {
+  Tooltip,
+  Flex,
+  IconButton,
+  Text,
+  Select,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+  NumberIncrementStepper,
+  NumberDecrementStepper,
+} from '@chakra-ui/react';
+import { Table } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+import { v4 as uuid } from 'uuid';
+import { useContainerDimensions } from 'hooks/useContainerDimensions';
+
+type Props<T extends object> = {
+  table: Table<T>;
+  isDisabled?: boolean;
+};
+
+const DataGridControls = <T extends object>({ table, isDisabled }: Props<T>) => {
+  const { t } = useTranslation();
+  const { ref, dimensions } = useContainerDimensions({ precision: 100 });
+  const isCompact = dimensions.width !== 0 && dimensions.width <= 800;
+
+  return (
+    <Flex ref={ref} justifyContent="space-between" m={4} alignItems="center">
+      <Flex>
+        <Tooltip label={t('table.first_page')}>
+          <IconButton
+            aria-label="Go to first page"
+            onClick={() => table.setPageIndex(0)}
+            isDisabled={isDisabled || !table.getCanPreviousPage()}
+            icon={<ArrowLeftIcon h={3} w={3} />}
+            mr={4}
+          />
+        </Tooltip>
+        <Tooltip label={t('table.previous_page')}>
+          <IconButton
+            aria-label="Previous page"
+            onClick={() => table.previousPage()}
+            isDisabled={isDisabled || !table.getCanPreviousPage()}
+            icon={<ChevronLeftIcon h={6} w={6} />}
+          />
+        </Tooltip>
+      </Flex>
+
+      <Flex alignItems="center">
+        {isCompact ? null : (
+          <>
+            <Text flexShrink={0} mr={8}>
+              {t('table.page')}{' '}
+              <Text fontWeight="bold" as="span">
+                {table.getState().pagination.pageIndex + 1}
+              </Text>{' '}
+              {t('common.of')}{' '}
+              <Text fontWeight="bold" as="span">
+                {table.getPageCount()}
+              </Text>
+            </Text>
+            <Text flexShrink={0}>{t('table.go_to_page')}</Text>{' '}
+            <NumberInput
+              ml={2}
+              mr={8}
+              w={28}
+              min={1}
+              max={table.getPageCount()}
+              onChange={(_, numberValue) => {
+                const newPage = numberValue ? numberValue - 1 : 0;
+                table.setPageIndex(newPage);
+              }}
+              value={table.getState().pagination.pageIndex + 1}
+            >
+              <NumberInputField />
+              <NumberInputStepper>
+                <NumberIncrementStepper />
+                <NumberDecrementStepper />
+              </NumberInputStepper>
+            </NumberInput>
+          </>
+        )}
+        <Select
+          w={32}
+          value={table.getState().pagination.pageSize}
+          onChange={(e) => {
+            table.setPageSize(Number(e.target.value));
+          }}
+        >
+          {[10, 20, 30, 40, 50].map((opt) => (
+            <option key={uuid()} value={opt}>
+              {t('common.show')} {opt}
+            </option>
+          ))}
+        </Select>
+      </Flex>
+
+      <Flex>
+        <Tooltip label={t('table.next_page')}>
+          <IconButton
+            aria-label="Go to next page"
+            onClick={() => table.nextPage()}
+            isDisabled={isDisabled || !table.getCanNextPage()}
+            icon={<ChevronRightIcon h={6} w={6} />}
+          />
+        </Tooltip>
+        <Tooltip label={t('table.last_page')}>
+          <IconButton
+            aria-label="Go to last page"
+            onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+            isDisabled={isDisabled || !table.getCanNextPage()}
+            icon={<ArrowRightIcon h={3} w={3} />}
+            ml={4}
+          />
+        </Tooltip>
+      </Flex>
+    </Flex>
+  );
+};
+
+export default DataGridControls;

src/components/DataTables/DataGrid/SortIcon.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Icon } from '@chakra-ui/react';
+import { ArrowDown, ArrowUp, Circle } from '@phosphor-icons/react';
+import { SortDirection } from '@tanstack/react-table';
+
+export type DataGridSortIconProps = {
+  sortInfo: false | SortDirection;
+  canSort: boolean;
+};
+
+export const DataGridSortIcon = ({ sortInfo, canSort }: DataGridSortIconProps) => {
+  if (canSort) {
+    if (sortInfo) {
+      return sortInfo === 'desc' ? (
+        <Icon ml={1} boxSize={3} as={ArrowDown} />
+      ) : (
+        <Icon ml={1} boxSize={3} as={ArrowUp} />
+      );
+    }
+    return <Icon ml={1} boxSize={3} as={Circle} />;
+  }
+  return null;
+};

src/components/DataTables/DataGrid/TableSettingsModal/DragDrop/DraggableColumn.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Box, Icon, Text, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { Draggable } from '@hello-pangea/dnd';
+import { ArrowsDownUp, Lock } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import { DataGridColumn } from '../../useDataGrid';
+
+type Props<TValue> = {
+  draggableId: string;
+  index: number;
+  column: DataGridColumn<TValue>;
+};
+
+const DraggableColumn = <TValue extends object>({ draggableId, index, column }: Props<TValue>) => {
+  const { t } = useTranslation();
+  const isDraggingBackground = useColorModeValue('blue.100', 'blue.600');
+  const notDraggingBackground = useColorModeValue('gray.50', 'gray.700');
+
+  let label = column.header?.toString() ?? 'Unrecognized column';
+  if (column.meta?.columnSelectorOptions?.label) label = column.meta.columnSelectorOptions.label;
+
+  const tooltipLabel = () => {
+    if (column.meta?.anchored) return t('table.drag_locked');
+    if (column.meta?.alwaysShow) return t('table.drag_always_show');
+
+    return t('table.drag_explanation');
+  };
+
+  return (
+    <Draggable draggableId={draggableId} index={index} isDragDisabled={column.meta?.anchored}>
+      {(itemProvided, itemSnapshot) => (
+        <Tooltip label={tooltipLabel()}>
+          <Box
+            ref={itemProvided.innerRef}
+            {...itemProvided.draggableProps}
+            {...itemProvided.dragHandleProps}
+            display="flex"
+            backgroundColor={itemSnapshot.isDragging ? isDraggingBackground : notDraggingBackground}
+            px={6}
+            py={2}
+            my={2}
+            borderRadius={15}
+            cursor={column.meta?.anchored ? 'not-allowed' : undefined}
+          >
+            <Icon as={column.meta?.anchored ? Lock : ArrowsDownUp} boxSize={5} ml={0.5} mr={2} my="auto" />
+            <Text my="auto">{label}</Text>
+          </Box>
+        </Tooltip>
+      )}
+    </Draggable>
+  );
+};
+
+export default DraggableColumn;

src/components/DataTables/DataGrid/TableSettingsModal/DragDrop/DroppableBox.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { Box, useColorModeValue } from '@chakra-ui/react';
+import { Droppable } from '@hello-pangea/dnd';
+import { DataGridColumn } from '../../useDataGrid';
+import DraggableColumn from './DraggableColumn';
+
+type Props<TValue> = {
+  items: string[];
+  columns: DataGridColumn<TValue>[];
+  droppableId: string;
+  isDropDisabled?: boolean;
+};
+const DroppableBox = <TValue extends object>({ items, columns, droppableId, isDropDisabled }: Props<TValue>) => {
+  const notDraggingBackground = useColorModeValue('gray.200', 'gray.600');
+  const isDraggingOverBackground = useColorModeValue('blue.300', 'blue.500');
+
+  return (
+    <Droppable droppableId={droppableId} direction="vertical" isCombineEnabled={false} isDropDisabled={isDropDisabled}>
+      {(provided, snapshot) => (
+        <Box
+          ref={provided.innerRef}
+          backgroundColor={snapshot.isDraggingOver ? isDraggingOverBackground : notDraggingBackground}
+          padding={2}
+          borderRadius={15}
+        >
+          {items.map((item, index) => {
+            const found = columns.find((col) => col.id === item);
+            return found ? <DraggableColumn key={item} draggableId={item} index={index} column={found} /> : null;
+          })}
+          {provided.placeholder}
+        </Box>
+      )}
+    </Droppable>
+  );
+};
+
+export default React.memo(DroppableBox);

src/components/DataTables/DataGrid/TableSettingsModal/DragDrop/index.tsx

@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Box, Flex, Heading } from '@chakra-ui/react';
+import { DragDropContext, DragStart, DropResult } from '@hello-pangea/dnd';
+import { useTranslation } from 'react-i18next';
+import { DataGridColumn, UseDataGridReturn } from '../../useDataGrid';
+import DroppableBox from './DroppableBox';
+
+const reorder = (list: string[], startIndex: number, endIndex: number) => {
+  const result = Array.from(list);
+  const [removed] = result.splice(startIndex, 1);
+  if (removed) {
+    result.splice(endIndex, 0, removed);
+  }
+
+  return result;
+};
+
+const getShownColumns = <TValue extends object>(columns: DataGridColumn<TValue>[], columnOrder: string[]) => {
+  const order = [...columnOrder];
+
+  for (const col of columns) {
+    if (!order.includes(col.id)) {
+      order.push(col.id);
+    }
+  }
+
+  return order;
+};
+
+type Props<TValue extends object> = {
+  controller: UseDataGridReturn;
+  shownColumns: DataGridColumn<TValue>[];
+  hiddenColumns: DataGridColumn<TValue>[];
+};
+
+const TableDragDrop = <TValue extends object>({ controller, shownColumns, hiddenColumns }: Props<TValue>) => {
+  const { t } = useTranslation();
+  const [shownOrder, setShowOrder] = React.useState(getShownColumns(shownColumns, controller.columnOrder));
+  const [hiddenOrder, setHiddenOrder] = React.useState(hiddenColumns.map((col) => col.id));
+  const [currentDraggingColumn, setCurrentDraggingColumn] = React.useState<DataGridColumn<TValue>>();
+
+  const handleDragStart = React.useCallback(
+    (start: DragStart) => {
+      const foundColumn =
+        shownColumns.find(({ id }) => id === start.draggableId) ??
+        hiddenColumns.find(({ id }) => id === start.draggableId);
+      setCurrentDraggingColumn(foundColumn);
+    },
+    [shownColumns, hiddenColumns],
+  );
+
+  const minimumIndex = React.useMemo(() => {
+    let index = 0;
+    for (const [i, col] of shownColumns.entries()) {
+      if (col.meta?.anchored) {
+        index = i;
+      }
+    }
+    return index + 1;
+  }, [shownColumns]);
+
+  const handleDragEnd = React.useCallback(
+    (result: DropResult) => {
+      const { source, destination, draggableId } = result;
+
+      if (destination === null) return;
+
+      if (source.droppableId === destination.droppableId) {
+        const newOrder = reorder(shownOrder, source.index, Math.max(destination.index, minimumIndex));
+        if (destination.droppableId === 'displayed-columns') {
+          controller.setColumnOrder(newOrder);
+          setShowOrder(newOrder);
+        } else setHiddenOrder(newOrder);
+      }
+      // This means we are moving from displayed to hidden
+      else if (source.droppableId === 'displayed-columns') {
+        // Toggle the column visibility in user preferences
+        const results = controller.hideColumn(draggableId);
+        if (results) {
+          setHiddenOrder([...results.hiddenColumns]);
+          setShowOrder([...results.columnOrder]);
+        }
+      }
+      // This means we are moving from hidden to displayed
+      else if (source.droppableId === 'hidden-columns') {
+        const newOrder = Array.from(shownOrder);
+        newOrder.splice(Math.max(destination.index, minimumIndex), 0, draggableId);
+        const results = controller.unhideColumn(draggableId, newOrder);
+        if (results) {
+          setHiddenOrder(results.hiddenColumns);
+          setShowOrder([...results.columnOrder]);
+          setHiddenOrder([...results.hiddenColumns]);
+        }
+      }
+
+      setCurrentDraggingColumn(undefined);
+    },
+    [shownColumns, hiddenColumns, controller.hideColumn, controller.unhideColumn, minimumIndex],
+  );
+
+  return (
+    <>
+      <Heading size="md">{t('table.columns')}</Heading>
+      <DragDropContext onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
+        <Flex mt={4}>
+          <Box w="50%" mr={2}>
+            <Heading size="sm" mb={4}>
+              Visible ({shownOrder.length})
+            </Heading>
+            <DroppableBox droppableId="displayed-columns" items={shownOrder} columns={shownColumns} />
+          </Box>
+          <Box ml={2} w="50%">
+            <Heading size="sm" mb={4}>
+              Hidden ({hiddenColumns.length})
+            </Heading>
+            <DroppableBox
+              droppableId="hidden-columns"
+              items={hiddenOrder}
+              columns={hiddenColumns}
+              isDropDisabled={currentDraggingColumn?.meta?.alwaysShow}
+            />
+          </Box>
+        </Flex>
+      </DragDropContext>
+    </>
+  );
+};
+
+export default TableDragDrop;

src/components/DataTables/DataGrid/TableSettingsModal/index.tsx

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { SettingsIcon } from '@chakra-ui/icons';
+import { Box, IconButton, Tooltip, useDisclosure } from '@chakra-ui/react';
+import { ClockCounterClockwise } from '@phosphor-icons/react';
+import { useTranslation } from 'react-i18next';
+import { Modal } from '../../../Modals/Modal';
+import { DataGridColumn, UseDataGridReturn } from '../useDataGrid';
+import TableDragDrop from './DragDrop';
+
+type Props<TValue extends object> = {
+  controller: UseDataGridReturn;
+  columns: DataGridColumn<TValue>[];
+};
+
+const TableSettingsModal = <TValue extends object>({ controller, columns }: Props<TValue>) => {
+  const { t } = useTranslation();
+  const modalProps = useDisclosure();
+
+  return (
+    <>
+      <Tooltip label={t('table.preferences')}>
+        <IconButton
+          aria-label={t('table.preferences')}
+          icon={<SettingsIcon weight="bold" />}
+          onClick={modalProps.onOpen}
+        />
+      </Tooltip>
+      <Modal
+        title={t('table.preferences')}
+        topRightButtons={
+          <Tooltip label={t('table.reset')}>
+            <IconButton
+              aria-label={t('table.reset')}
+              icon={<ClockCounterClockwise size={20} />}
+              onClick={controller.resetPreferences}
+            />
+          </Tooltip>
+        }
+        options={{
+          modalSize: 'md',
+          maxWidth: { sm: '600px', md: '600px', lg: '600px', xl: '600px' },
+        }}
+        {...modalProps}
+      >
+        <Box w="100%">
+          <TableDragDrop<TValue>
+            shownColumns={columns.filter((col) => controller.columnVisibility[col.id] !== false)}
+            hiddenColumns={columns.filter((col) => controller.columnVisibility[col.id] === false)}
+            controller={controller}
+          />
+        </Box>
+      </Modal>
+    </>
+  );
+};
+
+export default React.memo(TableSettingsModal);

src/components/DataTables/DataGrid/index.tsx

@@ -0,0 +1,251 @@
+import React from 'react';
+import {
+  Box,
+  Center,
+  Flex,
+  HStack,
+  Heading,
+  LayoutProps,
+  Spacer,
+  Spinner,
+  Table,
+  TableContainer,
+  Tbody,
+  Thead,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { getCoreRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { useTranslation } from 'react-i18next';
+import { RefreshButton } from '../../Buttons/RefreshButton';
+import { DataGridCellRow } from './CellRow';
+import { DataGridHeaderRow } from './HeaderRow';
+import DataGridControls from './Input';
+import TableSettingsModal from './TableSettingsModal';
+import { DataGridColumn, UseDataGridReturn } from './useDataGrid';
+import { Card } from 'components/Containers/Card';
+import { CardBody } from 'components/Containers/Card/CardBody';
+import { CardHeader } from 'components/Containers/Card/CardHeader';
+import { LoadingOverlay } from 'components/LoadingOverlay';
+
+export type ColumnOptions = {
+  isSortable?: boolean;
+};
+
+export type DataGridOptions<TValue extends object> = {
+  count?: number;
+  isFullScreen?: boolean;
+  isHidingControls?: boolean;
+  isManual?: boolean;
+  minimumHeight?: LayoutProps['minH'];
+  onRowClick?: (row: TValue) => (() => void) | undefined;
+  refetch?: () => void;
+  showAsCard?: boolean;
+};
+
+export type DataGridProps<TValue extends object> = {
+  controller: UseDataGridReturn;
+  columns: DataGridColumn<TValue>[];
+  header: {
+    title: string;
+    objectListed: string;
+    leftContent?: React.ReactNode;
+    addButton?: React.ReactNode;
+    otherButtons?: React.ReactNode;
+  };
+  data?: TValue[];
+  isLoading?: boolean;
+  options?: DataGridOptions<TValue>;
+};
+
+export const DataGrid = <TValue extends object>({
+  controller,
+  columns,
+  header,
+  data = [],
+  options = {},
+  isLoading = false,
+}: DataGridProps<TValue>) => {
+  const { t } = useTranslation();
+
+  /*
+    Table Styling
+  */
+  const textColor = useColorModeValue('gray.700', 'white');
+  const hoveredRowBg = useColorModeValue('gray.100', 'gray.600');
+
+  const minimumHeight: LayoutProps['minH'] = React.useMemo(() => {
+    if (options.isFullScreen) {
+      return { base: 'calc(100vh - 360px)', md: 'calc(100vh - 288px)' };
+    }
+    return options.minimumHeight ?? '300px';
+  }, [options.isFullScreen, options.minimumHeight]);
+
+  /*
+    Table Options
+  */
+  const onRowClick = React.useMemo(() => options.onRowClick, [options.onRowClick]);
+
+  const pagination = React.useMemo(
+    () => ({
+      pageIndex: controller.pageInfo.pageIndex,
+      pageSize: controller.pageInfo.pageSize,
+    }),
+    [controller.pageInfo.pageIndex, controller.pageInfo.pageSize],
+  );
+
+  const pageCount = React.useMemo(() => {
+    if (options.isManual && options.count) {
+      return Math.ceil(options.count / pagination.pageSize);
+    }
+    return Math.ceil((data?.length ?? 0) / pagination.pageSize);
+  }, [options.count, options.isManual, data?.length, pagination.pageSize]);
+
+  const tableOptions = React.useMemo(
+    () => ({
+      pageCount: pageCount > 0 ? pageCount : 1,
+      initialState: { sorting: controller.sortBy, pagination },
+      manualPagination: options.isManual,
+      manualSorting: options.isManual,
+      autoResetPageIndex: false,
+    }),
+    [options.isManual, controller.sortBy, pageCount],
+  );
+
+  const orderedColumns = React.useMemo(() => {
+    const order = controller.columnOrder.filter((id) => columns.find((col) => col.id === id));
+    if (order.length !== columns.length) {
+      for (const col of columns) {
+        if (!order.includes(col.id)) {
+          order.push(col.id);
+        }
+      }
+    }
+
+    return columns.slice().sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+  }, [columns, controller.columnOrder]);
+
+  const table = useReactTable<TValue>({
+    // react-table base functions
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+
+    // Table State
+    data,
+    columns: orderedColumns,
+    state: {
+      sorting: controller.sortBy,
+      columnVisibility: controller.columnVisibility,
+      pagination,
+    },
+
+    // Change Handlers
+    onSortingChange: controller.setSortBy,
+    onPaginationChange: controller.onPaginationChange,
+
+    // debugTable: true,
+
+    // Table Options
+    ...tableOptions,
+  });
+
+  if (isLoading && !options.showAsCard && data.length === 0) {
+    return (
+      <Center>
+        <Spinner size="xl" />
+      </Center>
+    );
+  }
+
+  return options.showAsCard ? (
+    <Card>
+      <CardHeader>
+        <Heading size="md" my="auto" mr={2}>
+          {header.title}
+        </Heading>
+        {header.leftContent}
+        <Spacer />
+        <HStack spacing={2}>
+          {header.otherButtons}
+          {header.addButton}
+          {
+            // @ts-ignore
+            <TableSettingsModal<TValue> controller={controller} columns={columns} />
+          }
+          {options.refetch ? <RefreshButton onClick={options.refetch} isCompact isFetching={isLoading} /> : null}
+        </HStack>
+      </CardHeader>
+      <CardBody display="flex" flexDirection="column">
+        <LoadingOverlay isLoading={isLoading}>
+          <TableContainer minH={minimumHeight}>
+            <Table size="small" variant="simple" textColor={textColor} w="100%" fontSize="14px">
+              <Thead>
+                {table.getHeaderGroups().map((headerGroup) => (
+                  <DataGridHeaderRow<TValue> key={headerGroup.id} headerGroup={headerGroup} />
+                ))}
+              </Thead>
+              <Tbody>
+                {table.getRowModel().rows.map((row) => (
+                  <DataGridCellRow<TValue> key={row.id} row={row} onRowClick={onRowClick} rowStyle={{ hoveredRowBg }} />
+                ))}
+              </Tbody>
+            </Table>
+            {data?.length === 0 ? (
+              <Center mt={8}>
+                <Heading size="md">
+                  {header.objectListed
+                    ? t('common.no_obj_found', { obj: header.objectListed })
+                    : t('common.empty_list')}
+                </Heading>
+              </Center>
+            ) : null}
+          </TableContainer>
+        </LoadingOverlay>
+        {!options.isHidingControls ? <DataGridControls table={table} isDisabled={isLoading} /> : null}
+      </CardBody>
+    </Card>
+  ) : (
+    <Box w="100%">
+      <Flex mb={2}>
+        <Heading size="md" my="auto" mr={2}>
+          {header.title}
+        </Heading>
+        {header.leftContent}
+        <Spacer />
+        <HStack spacing={2}>
+          {header.otherButtons}
+          {header.addButton}
+          {
+            // @ts-ignore
+            <TableSettingsModal<TValue> controller={controller} columns={columns} />
+          }
+          {options.refetch ? <RefreshButton onClick={options.refetch} isCompact isFetching={isLoading} /> : null}
+        </HStack>
+      </Flex>
+      <LoadingOverlay isLoading={isLoading}>
+        <TableContainer minH={minimumHeight}>
+          <Table size="small" variant="simple" textColor={textColor} w="100%" fontSize="14px">
+            <Thead>
+              {table.getHeaderGroups().map((headerGroup) => (
+                <DataGridHeaderRow<TValue> key={headerGroup.id} headerGroup={headerGroup} />
+              ))}
+            </Thead>
+            <Tbody>
+              {table.getRowModel().rows.map((row) => (
+                <DataGridCellRow<TValue> key={row.id} row={row} onRowClick={onRowClick} rowStyle={{ hoveredRowBg }} />
+              ))}
+            </Tbody>
+          </Table>
+          {data?.length === 0 ? (
+            <Center mt={8}>
+              <Heading size="md">
+                {header.objectListed ? t('common.no_obj_found', { obj: header.objectListed }) : t('common.empty_list')}
+              </Heading>
+            </Center>
+          ) : null}
+        </TableContainer>
+      </LoadingOverlay>
+      {!options.isHidingControls ? <DataGridControls table={table} isDisabled={isLoading} /> : null}
+    </Box>
+  );
+};

src/components/DataTables/DataGrid/useDataGrid.ts

@@ -0,0 +1,195 @@
+import * as React from 'react';
+import { ColumnDef, PaginationState, SortingColumnDef, SortingState, VisibilityState } from '@tanstack/react-table';
+import { useAuth } from 'contexts/AuthProvider';
+
+const getDefaultSettings = (settings?: string) => {
+  let limit = 10;
+  let index = 0;
+
+  if (settings) {
+    const savedSizeSetting = localStorage.getItem(settings);
+    if (savedSizeSetting) {
+      try {
+        limit = parseInt(savedSizeSetting, 10);
+      } catch (e) {
+        limit = 10;
+      }
+    }
+
+    const savedPageSetting = localStorage.getItem(`${settings}.page`);
+    if (savedPageSetting) {
+      try {
+        index = parseInt(savedPageSetting, 10);
+      } catch (e) {
+        index = 0;
+      }
+    }
+  }
+
+  return {
+    pageSize: limit,
+    pageIndex: index,
+  };
+};
+
+const getSavedColumnOrder = (defaultValue: string[], settings?: string) => {
+  if (settings) {
+    const savedOrderSetting = localStorage.getItem(`${settings}.order`);
+    if (savedOrderSetting) {
+      try {
+        const savedOrder = JSON.parse(savedOrderSetting);
+        return savedOrder.length > 0 ? savedOrder : defaultValue;
+      } catch (e) {
+        return defaultValue;
+      }
+    }
+  }
+
+  return defaultValue;
+};
+
+export type DataGridColumn<T> = ColumnDef<T> & SortingColumnDef<T> & { id: string };
+
+export type UseDataGridProps = {
+  tableSettingsId: string;
+  defaultOrder: string[];
+  defaultSortBy?: SortingState;
+};
+
+export const useDataGrid = ({ tableSettingsId, defaultSortBy, defaultOrder }: UseDataGridProps) => {
+  const orderSetting = `${tableSettingsId}.order`;
+  const hiddenColumnSetting = `${tableSettingsId}.hiddenColumns`;
+  const pageSetting = `${tableSettingsId}.page`;
+  const { getPref, setPref, setPrefs, deletePref } = useAuth();
+  const [sortBy, setSortBy] = React.useState<SortingState>(defaultSortBy ?? []);
+  const [columnVisibility, setColumnVisibility] = React.useState<VisibilityState>({});
+  const [columnOrder, setColumnOrder] = React.useState<string[]>(
+    getSavedColumnOrder(defaultOrder ?? [], tableSettingsId),
+  );
+  const [pageInfo, setPageInfo] = React.useState<PaginationState>(getDefaultSettings(tableSettingsId));
+
+  const setNewColumnOrder = React.useCallback(
+    (newOrder: string[]) => {
+      setColumnOrder(newOrder);
+      if (tableSettingsId) {
+        localStorage.setItem(orderSetting, JSON.stringify(newOrder));
+        setPref({ preference: orderSetting, value: newOrder.join(',') });
+      }
+    },
+    [setPref],
+  );
+
+  const resetPreferences = React.useCallback(async () => {
+    if (tableSettingsId) {
+      localStorage.removeItem(orderSetting);
+      localStorage.removeItem(hiddenColumnSetting);
+      await deletePref([orderSetting, hiddenColumnSetting]);
+    }
+
+    setColumnOrder(defaultOrder ?? []);
+    setColumnVisibility({});
+  }, [deletePref]);
+
+  const hideColumn = React.useCallback(
+    (id: string) => {
+      const newVisibility = { ...columnVisibility };
+      newVisibility[id] = false;
+      let hiddenColumnsArray = Object.entries(newVisibility)
+        .filter(([, value]) => !value)
+        .map(([key]) => key);
+      hiddenColumnsArray = [...new Set(hiddenColumnsArray)]; // Remove duplicates
+
+      // New column order without hidden columns
+      let filteredColumnOrder = columnOrder.filter((columnId) => !hiddenColumnsArray.includes(columnId));
+      filteredColumnOrder = [...new Set(filteredColumnOrder)]; // Remove duplicates
+
+      setPrefs([
+        { tag: hiddenColumnSetting, value: hiddenColumnsArray.join(',') },
+        { tag: orderSetting, value: filteredColumnOrder.join(',') },
+      ]);
+      setColumnVisibility({ ...newVisibility });
+      setColumnOrder(filteredColumnOrder);
+      localStorage.setItem(orderSetting, JSON.stringify(filteredColumnOrder));
+      localStorage.setItem(hiddenColumnSetting, hiddenColumnsArray.join(','));
+
+      return {
+        hiddenColumns: hiddenColumnsArray,
+        columnOrder: filteredColumnOrder,
+      };
+    },
+    [columnOrder, columnVisibility, setPrefs],
+  );
+
+  const unhideColumn = React.useCallback(
+    (id: string, newOrder: string[]) => {
+      const newVisibility = { ...columnVisibility };
+      newVisibility[id] = true;
+      let hiddenColumnsArray = Object.entries(newVisibility)
+        .filter(([, value]) => !value)
+        .map(([key]) => key);
+      hiddenColumnsArray = [...new Set(hiddenColumnsArray)]; // Remove duplicates
+
+      const newColumnOrder = [...new Set(newOrder)]; // Remove duplicates
+
+      setPrefs([
+        { tag: hiddenColumnSetting, value: hiddenColumnsArray.join(',') },
+        { tag: orderSetting, value: newColumnOrder.join(',') },
+      ]);
+      setColumnVisibility({ ...newVisibility });
+      setColumnOrder(newColumnOrder);
+      localStorage.setItem(orderSetting, JSON.stringify(newColumnOrder));
+      localStorage.setItem(hiddenColumnSetting, hiddenColumnsArray.join(','));
+
+      return {
+        hiddenColumns: hiddenColumnsArray,
+        columnOrder: newColumnOrder,
+      };
+    },
+    [columnOrder, columnVisibility, setPrefs],
+  );
+
+  React.useEffect(() => {
+    const savedPrefs = getPref(hiddenColumnSetting);
+
+    if (savedPrefs) {
+      const savedHiddenColumns = savedPrefs.split(',');
+      setColumnVisibility(savedHiddenColumns.reduce((acc, curr) => ({ ...acc, [curr]: false }), {}));
+    } else {
+      setColumnVisibility({});
+    }
+
+    const savedOrderSetting = getPref(orderSetting);
+
+    if (savedOrderSetting) {
+      const savedHiddenColumns = savedOrderSetting.split(',');
+      setColumnOrder(savedHiddenColumns);
+    }
+  }, [tableSettingsId]);
+
+  React.useEffect(() => {
+    if (tableSettingsId) {
+      localStorage.setItem(pageSetting, String(pageInfo.pageIndex));
+      if (tableSettingsId) localStorage.setItem(`${tableSettingsId}`, String(pageInfo.pageSize));
+    }
+  }, [pageInfo.pageIndex, pageInfo.pageSize]);
+
+  return React.useMemo(
+    () => ({
+      tableSettingsId,
+      pageInfo,
+      sortBy,
+      setSortBy,
+      columnOrder,
+      setColumnOrder: setNewColumnOrder,
+      hideColumn,
+      unhideColumn,
+      columnVisibility,
+      setColumnVisibility,
+      onPaginationChange: setPageInfo,
+      resetPreferences,
+    }),
+    [pageInfo, hideColumn, unhideColumn, columnVisibility, sortBy, columnOrder, setNewColumnOrder],
+  );
+};
+
+export type UseDataGridReturn = ReturnType<typeof useDataGrid>;

src/components/DataTables/DataTable/SortIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@chakra-ui/react';
-import { ArrowDown, ArrowUp, Circle } from 'phosphor-react';
+import { ArrowDown, ArrowUp, Circle } from '@phosphor-icons/react';
 
 interface Props {
   isSorted: boolean;

src/components/DataTables/SortableDataTable/SortIcon.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Icon } from '@chakra-ui/react';
-import { ArrowDown, ArrowUp, Circle } from 'phosphor-react';
+import { ArrowDown, ArrowUp, Circle } from '@phosphor-icons/react';
 
 interface Props {
   isSorted: boolean;

src/components/DeviceSearchBar/index.tsx

@@ -1,79 +0,0 @@
-import * as React from 'react';
-import { Heading } from '@chakra-ui/react';
-import { Select } from 'chakra-react-select';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from 'contexts/AuthProvider';
-import { useControllerDeviceSearch } from 'contexts/ControllerSocketProvider/hooks/Commands/useDeviceSearch';
-import { useControllerStore } from 'contexts/ControllerSocketProvider/useStore';
-
-const DeviceSearchBar = () => {
-  const { t } = useTranslation();
-  const navigate = useNavigate();
-  const { token } = useAuth();
-  const { startWebSocket, isWebSocketOpen } = useControllerStore((state) => ({
-    startWebSocket: state.startWebSocket,
-    isWebSocketOpen: state.isWebSocketOpen,
-  }));
-  const { inputValue, results, onInputChange } = useControllerDeviceSearch({
-    minLength: 2,
-  });
-
-  const NoOptionsMessage = React.useCallback(
-    () => (
-      <Heading size="sm" textAlign="center">
-        {isWebSocketOpen ? t('common.no_devices_found') : `${t('controller.devices.connecting')}...`}
-      </Heading>
-    ),
-    [t, isWebSocketOpen],
-  );
-  const onClick = React.useCallback((v: { value: string }) => {
-    navigate(`/devices/${v.value}`);
-  }, []);
-  const onChange = React.useCallback((v: string) => {
-    if ((v.length === 0 || v.match('^[a-fA-F0-9-*]+$')) && v.length <= 13) onInputChange(v);
-  }, []);
-
-  const onFocus = () => {
-    if (!isWebSocketOpen && token && token.length > 0) {
-      startWebSocket(token, 0);
-    }
-  };
-  return (
-    <Select
-      chakraStyles={{
-        control: (provided) => ({
-          ...provided,
-          borderRadius: '15px',
-          color: 'unset',
-        }),
-        input: (provided) => ({
-          ...provided,
-          width: '140px',
-        }),
-        dropdownIndicator: (provided) => ({
-          ...provided,
-          backgroundColor: 'unset',
-          border: 'unset',
-        }),
-        menu: (provided) => ({
-          ...provided,
-          color: 'black',
-        }),
-      }}
-      components={{ NoOptionsMessage }}
-      // @ts-ignore
-      options={results.map((v: string) => ({ label: v, value: v }))}
-      filterOption={() => true}
-      inputValue={inputValue}
-      value={inputValue}
-      placeholder={t('common.search')}
-      onInputChange={onChange}
-      onFocus={onFocus}
-      // @ts-ignore
-      onChange={onClick}
-    />
-  );
-};
-
-export default DeviceSearchBar;

src/components/Form/Fields/NotesField/index.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { AddIcon } from '@chakra-ui/icons';
 import { IconButton, Input, InputGroup, InputRightElement, Tooltip } from '@chakra-ui/react';
-import { Trash } from 'phosphor-react';
+import { Trash } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { DataTable } from '../../../DataTables/DataTable';

src/components/GlobalSearchBar/index.tsx

@@ -0,0 +1,171 @@
+import * as React from 'react';
+import { Tooltip, useColorMode, useColorModeValue } from '@chakra-ui/react';
+import {
+  AsyncSelect,
+  ChakraStylesConfig,
+  GroupBase,
+  LoadingIndicatorProps,
+  OptionBase,
+  OptionsOrGroups,
+  chakraComponents,
+} from 'chakra-react-select';
+import { useNavigate } from 'react-router-dom';
+import { useControllerStore } from 'contexts/ControllerSocketProvider/useStore';
+import debounce from 'helpers/debounce';
+import { getUsernameRadiusSessions } from 'hooks/Network/Radius';
+
+const chakraStyles: (
+  colorMode: 'light' | 'dark',
+) => ChakraStylesConfig<SearchOption, false, GroupBase<SearchOption>> = (colorMode) => ({
+  dropdownIndicator: (provided) => ({
+    ...provided,
+    width: '32px',
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    lineHeight: '1',
+    pointerEvents: 'none',
+    userSelect: 'none',
+    MozUserSelect: 'none',
+    WebkitUserSelect: 'none',
+    msUserSelect: 'none',
+  }),
+  container: (provided) => ({
+    ...provided,
+    width: '320px',
+    backgroundColor: colorMode === 'light' ? 'white' : 'gray.600',
+    borderRadius: '15px',
+  }),
+  input: (provided) => ({
+    ...provided,
+    gridArea: '1 / 2 / 4 / 4 !important',
+  }),
+});
+
+interface SearchOption extends OptionBase {
+  label: string;
+  value: string;
+  type: 'serial' | 'radius-username' | 'radius-mac';
+}
+
+const asyncComponents = {
+  LoadingIndicator: (props: LoadingIndicatorProps<SearchOption, false, GroupBase<SearchOption>>) => {
+    const { color, emptyColor } = useColorModeValue(
+      {
+        color: 'blue.500',
+        emptyColor: 'blue.100',
+      },
+      {
+        color: 'blue.300',
+        emptyColor: 'blue.900',
+      },
+    );
+
+    return (
+      <chakraComponents.LoadingIndicator
+        color={color}
+        emptyColor={emptyColor}
+        speed="750ms"
+        spinnerSize="md"
+        thickness="3px"
+        {...props}
+      />
+    );
+  },
+};
+
+const GlobalSearchBar = () => {
+  const { colorMode } = useColorMode();
+  const navigate = useNavigate();
+  const store = useControllerStore((state) => ({
+    searchSerialNumber: state.searchSerialNumber,
+  }));
+
+  const onNewSearch = React.useCallback(
+    async (v: string, callback: (options: OptionsOrGroups<SearchOption, GroupBase<SearchOption>>) => void) => {
+      if (v.length < 3) return callback([]);
+
+      if (v.includes('rad:')) {
+        const trimmed = v.replace('rad:', '').trim();
+        if (trimmed.length < 3) return callback([]);
+        const cleaned = trimmed.toLowerCase();
+        return getUsernameRadiusSessions(cleaned)
+          .then((res) =>
+            callback(
+              res
+                .map((r) => ({
+                  label: r.serialNumber,
+                  value: r.serialNumber,
+                  type: 'radius-username',
+                }))
+                .filter(({ value }, i, a) => a.findIndex((t) => t.value === value) === i) as SearchOption[],
+            ),
+          )
+          .then(() => callback([]));
+      }
+      if (v.match('^[a-fA-F0-9-*]+$')) {
+        await store
+          .searchSerialNumber(v)
+          .then((res) => {
+            callback(
+              res.map((r) => ({
+                label: r,
+                value: r,
+                type: 'serial',
+              })),
+            );
+          })
+          .catch(() => []);
+      }
+      return callback([]);
+    },
+    [],
+  );
+
+  const debouncedNewSearch = React.useCallback(
+    debounce(
+      // @ts-ignore
+      ({
+        v,
+        callback,
+      }: {
+        v: string;
+        callback: (options: OptionsOrGroups<SearchOption, GroupBase<SearchOption>>) => void;
+      }) => {
+        onNewSearch(v as string, callback);
+      },
+      300,
+    ),
+    [],
+  );
+
+  const styles = React.useMemo(() => chakraStyles(colorMode), [colorMode]);
+
+  return (
+    <Tooltip
+      label={`Search serial numbers and radius clients. For radius clients you can either use the client's username (rad:client@client.com)
+       or use the client's station ID (rad:11:22:33:44:55:66)`}
+      shouldWrapChildren
+      placement="left"
+    >
+      <AsyncSelect<SearchOption, false, GroupBase<SearchOption>>
+        name="global_search"
+        chakraStyles={styles}
+        closeMenuOnSelect
+        placeholder="Search MACs or radius clients"
+        components={asyncComponents}
+        loadOptions={(inputValue, callback) => {
+          debouncedNewSearch({ v: inputValue, callback });
+        }}
+        value={null}
+        onChange={(newValue) => {
+          if (newValue) {
+            navigate(`/devices/${newValue.value}`);
+          }
+        }}
+      />
+    </Tooltip>
+  );
+};
+
+export default GlobalSearchBar;

src/components/InformationDisplays/FormattedDate/index.tsx

@@ -1,18 +1,19 @@
 import React from 'react';
 import { Tooltip } from '@chakra-ui/react';
-import { compactDate, formatDaysAgo } from 'helpers/dateFormatting';
+import { compactDate, formatDaysAgo, formatDaysAgoCompact } from 'helpers/dateFormatting';
 
-type Props = { date?: number; hidePrefix?: boolean };
+type Props = { date?: number; hidePrefix?: boolean; isCompact?: boolean };
 
-const getDaysAgo = ({ date, hidePrefix }: { date?: number; hidePrefix?: boolean }) => {
+const getDaysAgo = ({ date, hidePrefix, isCompact }: { date?: number; hidePrefix?: boolean; isCompact?: boolean }) => {
   if (!date || date === 0) return '-';
-
+  if (isCompact)
+    return hidePrefix ? formatDaysAgoCompact(date).split(' ').slice(1).join(' ') : formatDaysAgoCompact(date);
   return hidePrefix ? formatDaysAgo(date).split(' ').slice(1).join(' ') : formatDaysAgo(date);
 };
 
-const FormattedDate = ({ date, hidePrefix }: Props) => (
+const FormattedDate = ({ date, hidePrefix, isCompact }: Props) => (
   <Tooltip hasArrow placement="top" label={compactDate(date ?? 0)}>
-    {getDaysAgo({ date, hidePrefix })}
+    {getDaysAgo({ date, hidePrefix, isCompact })}
   </Tooltip>
 );
 

src/components/InformationDisplays/InfoPopover/index.tsx

@@ -9,7 +9,7 @@ import {
   PopoverHeader,
   PopoverTrigger,
 } from '@chakra-ui/react';
-import { Question } from 'phosphor-react';
+import { Question } from '@phosphor-icons/react';
 
 export type InfoPopoverProps = {
   title: string;

src/components/InformationDisplays/SimpleStatDisplay/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { InfoIcon } from '@chakra-ui/icons';
 import { Heading, IconButton, LayoutProps, LightMode, SpaceProps, Spacer, Tooltip } from '@chakra-ui/react';
-import { MagnifyingGlass } from 'phosphor-react';
+import { MagnifyingGlass } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Card } from 'components/Containers/Card';
 

src/components/LanguageSwitcher/index.tsx

@@ -33,7 +33,14 @@ const LanguageSwitcher = () => {
   return (
     <Menu>
       <Tooltip label={t('common.language')}>
-        <MenuButton background="transparent" as={IconButton} aria-label="Commands" icon={languageIcon} size="sm" />
+        <MenuButton
+          background="transparent"
+          variant="ghost"
+          as={IconButton}
+          aria-label="Commands"
+          icon={languageIcon}
+          size="sm"
+        />
       </Tooltip>
       <MenuList>
         <MenuItem onClick={changeLanguage('de')}>Deutsche</MenuItem>

src/components/Modals/ConfigureModal/index.tsx

@@ -13,7 +13,7 @@ import {
   Textarea,
   useToast,
 } from '@chakra-ui/react';
-import { ClipboardText } from 'phosphor-react';
+import { ClipboardText } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { SaveButton } from '../../Buttons/SaveButton';
 import { Modal } from '../Modal';

src/components/Modals/FirmwareUpgradeModal/FirmwareList.tsx

@@ -14,7 +14,7 @@ interface Props {
 const FirmwareList: React.FC<Props> = ({ firmware, upgrade, isLoading }) => {
   const { t } = useTranslation();
 
-  const sortedFirmware = useMemo(() => firmware.sort((a, b) => b.created - a.created), [firmware]);
+  const sortedFirmware = useMemo(() => firmware.sort((a, b) => b.imageDate - a.imageDate), [firmware]);
 
   return (
     <Box h="600px" w="100%" overflowY="auto" px={0}>
@@ -34,10 +34,10 @@ const FirmwareList: React.FC<Props> = ({ firmware, upgrade, isLoading }) => {
           </Tr>
         </Thead>
         <Tbody>
-          {sortedFirmware.map(({ created, size, revision, uri }) => (
+          {sortedFirmware.map(({ imageDate, size, revision, uri }) => (
             <Tr key={uuid()}>
               <Td px={0} py={1} w="200px">
-                {compactDate(created)}
+                {compactDate(imageDate)}
               </Td>
               <Td px={0} py={1} width="160px">
                 {bytesString(size)}

src/components/Modals/FirmwareUpgradeModal/index.tsx

@@ -11,6 +11,7 @@ import {
   FormLabel,
   Switch,
   Heading,
+  Text,
 } from '@chakra-ui/react';
 import { Formik, FormikProps } from 'formik';
 import { useTranslation } from 'react-i18next';
@@ -32,6 +33,7 @@ export type FirmwareUpgradeModalProps = {
 
 export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNumber }: FirmwareUpgradeModalProps) => {
   const { t } = useTranslation();
+  const [showDevFirmware, { toggle: toggleDev }] = useBoolean();
   const [formKey, setFormKey] = React.useState(uuid());
   const ref = useRef<
     | FormikProps<{
@@ -72,7 +74,13 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
       <ModalContent maxWidth={{ sm: '90%', md: '900px', lg: '1000px', xl: '80%' }}>
         <ModalHeader
           title={`${t('commands.firmware_upgrade')} #${serialNumber}`}
-          right={<CloseButton ml={2} onClick={closeModal} />}
+          right={
+            <>
+              <Text>{t('controller.firmware.show_dev_releases')}</Text>
+              <Switch mx={2} isChecked={showDevFirmware} onChange={toggleDev} size="lg" />
+              <CloseButton onClick={closeModal} />
+            </>
+          }
         />
         <ModalBody>
           {isUpgrading || isFetchingDevice || isFetchingFirmware ? (
@@ -104,7 +112,11 @@ export const FirmwareUpgradeModal = ({ modalProps: { isOpen, onClose }, serialNu
                 </Formik>
               )}
               {firmware?.firmwares && (
-                <FirmwareList firmware={firmware.firmwares} upgrade={submit} isLoading={isUpgrading} />
+                <FirmwareList
+                  firmware={firmware.firmwares.filter((firmw) => showDevFirmware || !firmw.revision.includes('devel'))}
+                  upgrade={submit}
+                  isLoading={isUpgrading}
+                />
               )}
             </>
           )}

src/components/Modals/GenericModal/ModalHeader/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Flex, HStack, ModalHeader as Header, Spacer } from '@chakra-ui/react';
+import { HStack, ModalHeader as Header, Spacer, useColorModeValue } from '@chakra-ui/react';
 
 export interface ModalHeaderProps {
   title: string;
@@ -7,17 +7,20 @@ export interface ModalHeaderProps {
   right: React.ReactNode;
 }
 
-const _ModalHeader: React.FC<ModalHeaderProps> = ({ title, left, right }) => (
-  <Header>
-    <Flex justifyContent="center" alignItems="center" maxW="100%" px={1}>
+const _ModalHeader: React.FC<ModalHeaderProps> = ({ title, left, right }) => {
+  const bg = useColorModeValue('blue.50', 'blue.700');
+
+  return (
+    <Header bg={bg}>
       {title}
+      {left ? (
         <HStack spacing={2} ml={2}>
-        {left ?? null}
+          {left}
         </HStack>
+      ) : null}
       <Spacer />
       {right}
-    </Flex>
     </Header>
-);
-
+  );
+};
 export const ModalHeader = React.memo(_ModalHeader);

src/components/Modals/ScriptModal/ScripFile.tsx

@@ -11,7 +11,7 @@ import {
   Textarea,
   useBoolean,
 } from '@chakra-ui/react';
-import { UploadSimple } from 'phosphor-react';
+import { UploadSimple } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { useFastField } from 'hooks/useFastField';

src/components/Modals/ScriptModal/index.tsx

@@ -16,7 +16,7 @@ import {
 import { useQueryClient } from '@tanstack/react-query';
 import axios from 'axios';
 import { FormikProps } from 'formik';
-import { ArrowLeft } from 'phosphor-react';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import ConfirmIgnoreCommand from '../ConfirmIgnoreCommand';

src/components/Modals/TraceModal/index.tsx

@@ -12,7 +12,7 @@ import {
   Spinner,
   Switch,
 } from '@chakra-ui/react';
-import { ArrowLeft } from 'phosphor-react';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Modal } from '../Modal';
 import { useDownloadTrace, useTrace } from 'hooks/Network/Trace';

src/components/Modals/WifiScanModal/ResultCard.tsx

@@ -14,7 +14,7 @@ import {
   useColorMode,
 } from '@chakra-ui/react';
 import { JsonViewer } from '@textea/json-viewer';
-import { ArrowLeft } from 'phosphor-react';
+import { ArrowLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { Card } from 'components/Containers/Card';

src/components/Modals/WifiScanModal/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { Modal, ModalOverlay, ModalContent, ModalBody, Center, Spinner } from '@chakra-ui/react';
-import { ArrowLeft, Download, Gauge } from 'phosphor-react';
+import { ArrowLeft, Download, Gauge } from '@phosphor-icons/react';
 import { CSVLink } from 'react-csv';
 import { useTranslation } from 'react-i18next';
 import ConfirmIgnoreCommand from '../ConfirmIgnoreCommand';

src/components/TableCells/DataCell/index.tsx

@@ -1,14 +1,16 @@
 import React, { useMemo } from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
 import { bytesString } from 'helpers/stringHelper';
 
-const DataCell: React.FC<{ bytes?: number }> = ({ bytes }) => {
+type Props = { bytes?: number; showZerosAs?: string; boxProps?: BoxProps };
+const DataCell = ({ bytes, showZerosAs, boxProps }: Props) => {
   const data = useMemo(() => {
     if (bytes === undefined) return '-';
-
+    if (showZerosAs && bytes === 0) return showZerosAs;
     return bytesString(bytes);
   }, [bytes]);
 
-  return <div>{data}</div>;
+  return <Box {...boxProps}>{data}</Box>;
 };
 
 export default React.memo(DataCell);

src/components/TableCells/DurationCell/index.tsx

@@ -0,0 +1,17 @@
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { secondsDuration } from 'helpers/dateFormatting';
+
+const DurationCell: React.FC<{ seconds?: number }> = ({ seconds }) => {
+  const { t } = useTranslation();
+
+  const data = useMemo(() => {
+    if (seconds === undefined) return '-';
+
+    return secondsDuration(seconds, t);
+  }, [seconds]);
+
+  return <div>{data}</div>;
+};
+
+export default React.memo(DurationCell);

src/components/TableCells/NumberCell/index.tsx

@@ -1,13 +1,20 @@
-import React, { useMemo } from 'react';
+import React from 'react';
+import { Box, BoxProps } from '@chakra-ui/react';
 
-const NumberCell = ({ value }: { value?: number }) => {
-  const data = useMemo(() => {
+type Props = {
+  value?: number;
+  boxProps?: BoxProps;
+  showZerosAs?: string;
+};
+
+const NumberCell = ({ value, boxProps, showZerosAs }: Props) => {
+  const getData = () => {
     if (value === undefined) return '-';
-
+    if (value === 0 && showZerosAs) return showZerosAs;
     return value.toLocaleString();
-  }, [value]);
+  };
 
-  return <div>{data}</div>;
+  return <Box {...boxProps}>{getData()}</Box>;
 };
 
 export default React.memo(NumberCell);

src/contexts/AuthProvider/index.tsx

@@ -89,7 +89,7 @@ export const AuthProvider = ({ token, children }: AuthProviderProps) => {
     return null;
   };
 
-  const setPref = ({ preference, value }: { preference: string; value: string }) => {
+  const setPref = async ({ preference, value }: { preference: string; value: string }) => {
     let updated = false;
     if (preferences) {
       const newPreferences: Preference[] = preferences.map((pref: Preference) => {
@@ -102,15 +102,41 @@ export const AuthProvider = ({ token, children }: AuthProviderProps) => {
 
       if (!updated) newPreferences.push({ tag: preference, value });
 
-      updatePreferences.mutateAsync(newPreferences);
+      await updatePreferences.mutateAsync(newPreferences);
     }
   };
 
-  const deletePref = (preference: string) => {
+  const setPrefs = async (preferencesToUpdate: Preference[]) => {
     if (preferences) {
-      const newPreferences: Preference[] = preferences.filter((pref: Preference) => pref.tag !== preference);
+      const updatedPreferences: string[] = [];
+      const newPreferences = preferences.map((pref: Preference) => {
+        const preferenceToUpdate = preferencesToUpdate.find(
+          (prefToUpdate: Preference) => prefToUpdate.tag === pref.tag,
+        );
+        if (preferenceToUpdate) {
+          updatedPreferences.push(pref.tag);
+          return { tag: pref.tag, value: preferenceToUpdate.value };
+        }
+        return pref;
+      });
 
-      updatePreferences.mutateAsync(newPreferences);
+      for (const preferenceToUpdate of preferencesToUpdate) {
+        if (!updatedPreferences.includes(preferenceToUpdate.tag)) {
+          newPreferences.push(preferenceToUpdate);
+        }
+      }
+
+      await updatePreferences.mutateAsync(newPreferences);
+    }
+  };
+
+  const deletePref = async (preference: string | string[]) => {
+    if (preferences) {
+      const newPreferences: Preference[] = preferences.filter((pref: Preference) =>
+        typeof preference === 'string' ? pref.tag !== preference : !preference.includes(pref.tag),
+      );
+
+      await updatePreferences.mutateAsync(newPreferences);
     }
   };
 
@@ -146,6 +172,7 @@ export const AuthProvider = ({ token, children }: AuthProviderProps) => {
       ref,
       getPref,
       setPref,
+      setPrefs,
       deletePref,
       endpoints,
       configurationDescriptions,

src/contexts/AuthProvider/utils.ts

@@ -1,6 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
 import axios from 'axios';
 import { axiosProv } from 'constants/axiosInstances';
+import { Preference } from 'models/Preference';
 import { User } from 'models/User';
 
 const getConfigDescriptions = async (baseUrl: string) =>
@@ -26,7 +27,8 @@ export interface AuthProviderReturn {
   logout: () => void;
   getPref: (preference: string) => string | null;
   setPref: ({ preference, value }: { preference: string; value: string }) => void;
-  deletePref: (preference: string) => void;
+  setPrefs: (preferencesToUpdate: Preference[]) => void;
+  deletePref: (preference: string | string[]) => void;
   ref: React.MutableRefObject<undefined>;
   endpoints: { [key: string]: string } | null;
   configurationDescriptions: Record<string, unknown>;

src/contexts/ControllerSocketProvider/useStore.ts

@@ -3,6 +3,7 @@ import { v4 as uuid } from 'uuid';
 import create from 'zustand';
 import { ControllerSocketRawMessage, SocketEventCallback, SocketWebSocketNotificationData } from './utils';
 import { axiosGw } from 'constants/axiosInstances';
+import { randomIntId } from 'helpers/stringHelper';
 import { DevicesStats, DeviceWithStatus } from 'hooks/Network/Devices';
 import { NotificationType } from 'models/Socket';
 
@@ -122,6 +123,7 @@ export type ControllerStoreState = {
   lastSearchResults: string[];
   setLastSearchResults: (result: string[]) => void;
   errors: { str: string; timestamp: Date }[];
+  searchSerialNumber: (serialNumber: string, timeout?: number) => Promise<string[]>;
 };
 
 export const useControllerStore = create<ControllerStoreState>((set, get) => ({
@@ -169,14 +171,24 @@ export const useControllerStore = create<ControllerStoreState>((set, get) => ({
           id: uuid(),
         };
 
-        const eventsToFire = get().eventListeners.filter(
-          ({ type, serialNumber }) => type === msg.type && serialNumber === msg.serialNumber,
-        );
+        const eventsToFire = get().eventListeners.filter((event) => {
+          if (event.type === 'DEVICE_CONNECTION' || event.type === 'DEVICE_DISCONNECTION') {
+            return event.serialNumber === msg.serialNumber;
+          }
+          if (msg.type === 'DEVICE_SEARCH_RESULTS' && event.type === 'DEVICE_SEARCH_RESULTS') {
+            return true;
+          }
+          return false;
+        });
 
         if (eventsToFire.length > 0) {
           for (const event of eventsToFire) {
+            if (event.type === 'DEVICE_SEARCH_RESULTS' && msg.type === 'DEVICE_SEARCH_RESULTS') {
+              event.callback(msg.serialNumbers);
+            } else if (event.type === 'DEVICE_CONNECTION' || event.type === 'DEVICE_DISCONNECTION') {
               event.callback();
             }
+          }
 
           return set((state) => ({
             allMessages:
@@ -211,6 +223,37 @@ export const useControllerStore = create<ControllerStoreState>((set, get) => ({
     const ws = get().webSocket;
     if (ws) ws.send(str);
   },
+  searchSerialNumber: async (serialNumber: string, timeout = 1000 * 5): Promise<string[]> =>
+    new Promise((resolve, reject) => {
+      const timer = setTimeout(() => {
+        reject(new Error(`Promise timed out after ${timeout} ms`));
+      }, timeout);
+      const ws = get().webSocket;
+      if (ws) {
+        const id = randomIntId();
+        get().addEventListeners([
+          {
+            id: uuid(),
+            type: 'DEVICE_SEARCH_RESULTS',
+            searchId: id,
+            callback: (serialNumbers: string[]) => {
+              clearTimeout(timer);
+              resolve(serialNumbers);
+            },
+          },
+        ]);
+        ws.send(
+          JSON.stringify({
+            command: 'serial_number_search',
+            serial_prefix: serialNumber,
+            id: randomIntId(),
+          }),
+        );
+      } else {
+        clearTimeout(timer);
+        reject(new Error('No websocket connection'));
+      }
+    }),
   startWebSocket: (token: string, tries = 0) => {
     const newTries = tries + 1;
     if (tries <= 10) {

src/contexts/ControllerSocketProvider/utils.ts

@@ -116,9 +116,16 @@ export type SocketWebSocketNotificationData =
       log?: undefined;
       message: InitialSocketMessage;
     };
-export type SocketEventCallback = {
+export type SocketEventCallback =
+  | {
       id: string;
       type: 'DEVICE_CONNECTION' | 'DEVICE_DISCONNECTION';
       serialNumber: string;
       callback: () => void;
-};
+    }
+  | {
+      id: string;
+      type: 'DEVICE_SEARCH_RESULTS';
+      searchId: number;
+      callback: (serialNumbers: string[]) => void;
+    };

src/contexts/ProvisioningSocketProvider/hooks/NotificationContent/useWebSocketNotification.tsx

@@ -20,7 +20,7 @@ import {
   Tooltip,
 } from '@chakra-ui/react';
 import { TOptions } from 'i18next';
-import { X } from 'phosphor-react';
+import { X } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { v4 as uuid } from 'uuid';
 import { ProvisioningVenueNotificationMessage } from '../../utils';

src/helpers/dateFormatting.ts

@@ -122,7 +122,44 @@ export const getHoursAgo = (hoursAgo = 1, date = new Date()) => {
 export const dateForFilename = (dateString: number) => {
   const convertedTimestamp = unixToDateString(dateString);
   const date = new Date(convertedTimestamp);
-  return `${date.getFullYear()}_${twoDigitNumber(date.getMonth() + 1)}_${twoDigitNumber(
+  return `${date.getFullYear()}.${twoDigitNumber(date.getMonth() + 1)}.${twoDigitNumber(
     date.getDate(),
-  )}_${twoDigitNumber(date.getHours())}h${twoDigitNumber(date.getMinutes())}m${twoDigitNumber(date.getSeconds())}s`;
+  )}-${twoDigitNumber(date.getHours())}.${twoDigitNumber(date.getMinutes())}.${twoDigitNumber(date.getSeconds())}`;
+};
+
+export const formatDaysAgoCompact = (d1: number, d2: number = new Date().getTime()) => {
+  try {
+    const convertedTimestamp = unixToDateString(d1);
+    const date = new Date(convertedTimestamp).getTime();
+    const elapsed = date - d2;
+
+    for (const key of Object.keys(UNITS)) {
+      if (
+        Math.abs(elapsed) > UNITS[key as 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second'] ||
+        key === 'second'
+      ) {
+        const result = RTF.format(
+          Math.round(elapsed / UNITS[key as 'year' | 'month' | 'day' | 'hour' | 'minute' | 'second']),
+          key as Intl.RelativeTimeFormatUnit,
+        );
+        return result
+          .replace(' years', 'y')
+          .replace(' year', 'y')
+          .replace(' months', 'm')
+          .replace(' month', 'm')
+          .replace(' days', 'd')
+          .replace(' day', 'd')
+          .replace(' hours', 'h')
+          .replace(' hour', 'h')
+          .replace(' minutes', 'm')
+          .replace(' minute', 'm')
+          .replace(' seconds', 's')
+          .replace(' second', 's');
+      }
+    }
+
+    return compactDate(date);
+  } catch {
+    return '-';
+  }
 };

src/hooks/Network/DefaultFirmware.ts

@@ -0,0 +1,103 @@
+import { QueryFunctionContext, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import axios from 'axios';
+import { axiosGw } from 'constants/axiosInstances';
+import { AtLeast } from 'models/General';
+
+export type DefaultFirmware = {
+  deviceType: string;
+  description: string;
+  uri: string;
+  revision: string;
+  imageCreationDate: number;
+  created: number;
+  lastModified: number;
+};
+
+export type DefaultFirmwareResponse = {
+  firmwares: DefaultFirmware[];
+};
+
+const getDefaultFirmware = async () =>
+  axiosGw.get('default_firmwares').then((response) => response.data as DefaultFirmwareResponse);
+
+export const useGetDefaultFirmware = () =>
+  useQuery(['default_firmwares', 'all'], getDefaultFirmware, {
+    staleTime: 1000 * 60,
+  });
+
+const getDefaultFirmwareByDeviceType = async (context: QueryFunctionContext<[string, string]>) =>
+  axiosGw.get(`default_firmware/${context.queryKey[1]}`).then((response) => response.data as DefaultFirmware);
+
+export const useGetDefaultFirmwareByDeviceType = (deviceType: string) =>
+  useQuery(['default_firmwares', deviceType], getDefaultFirmwareByDeviceType);
+
+export const createDefaultFirmware = async (defaultFirmware: DefaultFirmware) =>
+  axiosGw
+    .post(`default_firmware/${defaultFirmware.deviceType}`, defaultFirmware)
+    .then((response) => response.data as DefaultFirmware);
+
+export const useCreateDefaultFirmware = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(createDefaultFirmware, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['default_firmwares']);
+    },
+  });
+};
+
+const deleteDefaultFirmware = async (deviceType: string) =>
+  axiosGw.delete(`default_firmware/${deviceType}`).then((response) => response.data as DefaultFirmware);
+
+export const useDeleteDefaultFirmware = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(deleteDefaultFirmware, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['default_firmwares']);
+    },
+  });
+};
+
+const deleteBatchDefaultFirmware = async (deviceTypes: string[]) => {
+  const promises = deviceTypes.map((deviceType) =>
+    axiosGw
+      .delete(`default_firmware/${deviceType}`)
+      .then(() => ({
+        deviceType,
+        success: true,
+      }))
+      .catch((e) => ({
+        deviceType,
+        error: axios.isAxiosError(e) ? e.response?.data.ErrorDescription : e,
+      })),
+  );
+  const res = await Promise.allSettled(promises);
+
+  return res;
+};
+
+export const useDeleteBatchDefaultFirmware = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(deleteBatchDefaultFirmware, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['default_firmwares']);
+    },
+  });
+};
+
+export const updateDefaultFirmware = async (defaultFirmware: AtLeast<DefaultFirmware, 'deviceType'>) =>
+  axiosGw
+    .put(`default_firmware/${defaultFirmware.deviceType}`, defaultFirmware)
+    .then((response) => response.data as DefaultFirmware);
+
+export const useUpdateDefaultFirmware = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(updateDefaultFirmware, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['default_firmwares']);
+    },
+  });
+};

src/hooks/Network/DeviceLogs.ts

@@ -11,7 +11,7 @@ export type DeviceLog = {
   severity: number;
 };
 
-const getDeviceLogs = (limit: number, serialNumber?: string, logType?: 0 | 1) => async () =>
+const getDeviceLogs = (limit: number, serialNumber?: string, logType?: 0 | 1 | 2) => async () =>
   axiosGw
     .get(`device/${serialNumber}/logs?newest=true&limit=${limit}&logType=${logType}`)
     .then((response) => response.data) as Promise<{
@@ -28,7 +28,7 @@ export const useGetDeviceLogs = ({
   serialNumber?: string;
   limit: number;
   onError?: (e: AxiosError) => void;
-  logType?: 0 | 1;
+  logType?: 0 | 1 | 2;
 }) =>
   useQuery(['devicelogs', serialNumber, { limit, logType }], getDeviceLogs(limit, serialNumber, logType ?? 0), {
     keepPreviousData: true,
@@ -44,7 +44,7 @@ const deleteLogs = async ({
 }: {
   serialNumber: string;
   endDate: number;
-  logType: 0 | 1;
+  logType: 0 | 1 | 2;
 }) => axiosGw.delete(`device/${serialNumber}/logs?endDate=${endDate}&logType=${logType}`);
 export const useDeleteLogs = () => {
   const queryClient = useQueryClient();
@@ -62,7 +62,7 @@ const getLogsBatch = (
   end?: number,
   limit?: number,
   offset?: number,
-  logType?: 0 | 1,
+  logType?: 0 | 1 | 2,
 ) =>
   axiosGw
     .get(
@@ -74,7 +74,7 @@ const getLogsBatch = (
   }>;
 
 const getDeviceLogsWithTimestamps =
-  (serialNumber?: string, start?: number, end?: number, logType?: 0 | 1) => async () => {
+  (serialNumber?: string, start?: number, end?: number, logType?: 0 | 1 | 2) => async () => {
     let offset = 0;
     const limit = 100;
     let logs: DeviceLog[] = [];
@@ -104,7 +104,7 @@ export const useGetDeviceLogsWithTimestamps = ({
   start?: number;
   end?: number;
   onError?: (e: AxiosError) => void;
-  logType?: 0 | 1;
+  logType?: 0 | 1 | 2;
 }) =>
   useQuery(
     ['devicelogs', serialNumber, { start, end, logType }],

src/hooks/Network/Devices.ts

@@ -44,6 +44,7 @@ export type DeviceWithStatus = {
   associations_6G: number;
   compatible: string;
   connected: boolean;
+  connectReason?: string;
   certificateExpiryDate?: number;
   createdTimestamp: number;
   devicePassword: string;
@@ -51,28 +52,49 @@ export type DeviceWithStatus = {
   entity: string;
   firmware: string;
   fwUpdatePolicy: string;
+  hasGPS: boolean;
+  hasRADIUSSessions: number | boolean;
   ipAddress: string;
   lastConfigurationChange: number;
   lastConfigurationDownload: number;
   lastContact: number | string;
   lastFWUpdate: number;
+  lastRecordedContact: number;
+  load: number;
   locale: string;
   location: string;
   macAddress: string;
   manufacturer: string;
+  memoryUsed: number;
   messageCount: number;
   modified: number;
   notes: Note[];
   owner: string;
+  sanity: number;
+  started: number;
   restrictedDevice: boolean;
   rxBytes: number;
   serialNumber: string;
+  simulated: boolean;
   subscriber: string;
+  temperature: number;
   txBytes: number;
   venue: string;
   verifiedCertificate: string;
 };
 
+export const getSingleDeviceWithStatus = (serialNumber: string) =>
+  axiosGw
+    .get(`devices?deviceWithStatus=true&select=${serialNumber}`)
+    .then((response) => {
+      const deviceWithStatus: DeviceWithStatus | undefined = response.data.devicesWithStatus[0];
+      if (deviceWithStatus === undefined) {
+        return undefined;
+      }
+      return deviceWithStatus;
+    })
+    .catch(() => undefined);
+
 const getDevices = (limit: number, offset: number) =>
   axiosGw
     .get(`devices?deviceWithStatus=true&limit=${limit}&offset=${offset}`)
@@ -127,6 +149,7 @@ export type DeviceStatus = {
   associations_2G: number;
   associations_5G: number;
   connected: boolean;
+  connectReason?: string;
   certificateExpiryDate: number;
   connectionCompletionTime: number;
   firmware: string;

src/hooks/Network/Firmware.ts

@@ -12,7 +12,7 @@ const getAvailableFirmwareBatch = async (deviceType: string, limit: number, offs
     .get(`firmwares?deviceType=${deviceType}&limit=${limit}&offset=${offset}`)
     .then(({ data }: { data: { firmwares: Firmware[] } }) => data);
 
-const getAllAvailableFirmware = async (deviceType: string) => {
+export const getAllAvailableFirmware = async (deviceType: string) => {
   const limit = 500;
   let offset = 0;
   let data: { firmwares: Firmware[] } = { firmwares: [] };

src/hooks/Network/Inventory.ts

@@ -55,4 +55,5 @@ export const useGetTag = ({ serialNumber, onError }: { serialNumber?: string; on
   useQuery(['tag', serialNumber], () => getTag(serialNumber), {
     enabled: serialNumber !== undefined && serialNumber !== '',
     onError,
+    staleTime: 1000 * 60 * 5,
   });

src/hooks/Network/Radius.ts

@@ -0,0 +1,67 @@
+import { QueryFunctionContext, useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import { axiosGw } from 'constants/axiosInstances';
+
+export type RadiusSession = {
+  started: number;
+  lastTransaction: number;
+  inputPackets: number;
+  outputPackets: number;
+  inputOctets: number;
+  outputOctets: number;
+  inputGigaWords: number;
+  outputGigaWords: number;
+  sessionTime: number;
+  serialNumber: string;
+  destination: string;
+  userName: string;
+  accountingSessionId: string;
+  accountingMultiSessionId: string;
+  callingStationId: string;
+};
+
+export const getDeviceRadiusSessions = async (mac: string) =>
+  axiosGw.get(`/radiusSessions/${mac}`).then((res) => res.data.sessions as RadiusSession[]);
+const getDeviceSessions = async (context: QueryFunctionContext<[string, string]>) =>
+  getDeviceRadiusSessions(context.queryKey[1]);
+export const useGetDeviceRadiusSessions = ({ serialNumber }: { serialNumber: string }) =>
+  useQuery(['radius-sessions', serialNumber], getDeviceSessions, {
+    keepPreviousData: true,
+    staleTime: 1000 * 60,
+  });
+
+export const getUsernameRadiusSessions = async (username: string) =>
+  axiosGw.get(`/radiusSessions/0?userName=${username}`).then((res) => res.data.sessions as RadiusSession[]);
+const getUserSessions = async (context: QueryFunctionContext<[string, string, string]>) =>
+  getUsernameRadiusSessions(context.queryKey[2]);
+export const useGetUserRadiusSessions = ({ userName }: { userName: string }) =>
+  useQuery(['radius-sessions', 'username', userName], getUserSessions, {
+    staleTime: 1000 * 60,
+  });
+
+export const getStationRadiusSessions = async (station: string) =>
+  axiosGw.get(`/radiusSessions/0?mac=${station}`).then((res) => res.data.sessions as RadiusSession[]);
+const getStationSessions = async (context: QueryFunctionContext<[string, string, string]>) =>
+  getStationRadiusSessions(context.queryKey[2]);
+export const useGetStationRadiusSessions = ({ station }: { station: string }) =>
+  useQuery(['radius-sessions', 'station', station], getStationSessions, {
+    staleTime: 1000 * 60,
+  });
+
+const disconnectRadiusSession = async (session: RadiusSession) =>
+  axiosGw
+    .put(`radiusSessions/${session.serialNumber}?operation=coadm`, {
+      accountingSessionId: session.accountingSessionId,
+      accountingMultiSessionId: session.accountingMultiSessionId,
+      callingStationId: session.callingStationId,
+    })
+    .then(() => session);
+
+export const useDisconnectRadiusSession = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation(disconnectRadiusSession, {
+    onSuccess: (session) => {
+      queryClient.invalidateQueries(['radius-sessions', session.serialNumber]);
+    },
+  });
+};

src/hooks/Network/Statistics.ts

@@ -39,6 +39,7 @@ type DeviceInterfaceStatistics = {
       ack_signal_avg: number;
       bssid: string;
       connected: number;
+      dynamic_vlan?: number;
       inactive: number;
       ipaddr_v4: string;
       rssi: number;
@@ -117,6 +118,13 @@ export type DeviceStatistics = {
     transmit_ms: number;
     tx_power: number;
   }[];
+  dynamic_vlans?: {
+    vid: number;
+    rx_bytes: number;
+    rx_packets: number;
+    tx_bytes: number;
+    tx_packets: number;
+  }[];
   unit?: {
     load: [number, number, number];
     localtime: number;

src/hooks/Network/System.ts

@@ -199,3 +199,36 @@ export const useUpdateSystemLogLevels = ({ endpoint, token }: { endpoint: string
     },
   });
 };
+
+export type SystemResources = {
+  currRealMem: number;
+  currVirtMem: number;
+  numberOfFileDescriptors: number;
+  peakRealMem: number;
+  peakVirtMem: number;
+};
+
+export const useGetSystemResources = ({
+  endpoint,
+  token,
+  onSuccess,
+}: {
+  endpoint: string;
+  token: string;
+  onSuccess?: (data: SystemResources) => void;
+}) =>
+  useQuery(
+    ['systemResources', endpoint],
+    () =>
+      axiosInstance
+        .get(`${endpoint}/api/v1/system?command=resources`, {
+          headers: {
+            Authorization: `Bearer ${token}`,
+          },
+        })
+        .then(({ data }: { data: SystemResources }) => data),
+    {
+      refetchInterval: 5 * 1000,
+      onSuccess,
+    },
+  );

src/hooks/useContainerDimensions.ts

@@ -0,0 +1,54 @@
+import * as React from 'react';
+
+const roundToNearest = (num: number, precision: number) => {
+  const factor = 1 / precision;
+  return Math.round(num * factor) / factor;
+};
+
+export type UseContainerDimensionsProps = {
+  precision?: 10 | 100 | 1000;
+};
+
+export const useContainerDimensions = ({ precision }: UseContainerDimensionsProps) => {
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });
+
+  React.useEffect(() => {
+    const getDimensions = () => ({
+      width: (ref && ref.current?.offsetWidth) || 0,
+      height: (ref && ref.current?.offsetHeight) || 0,
+    });
+
+    const handleResize = () => {
+      const { width, height } = getDimensions();
+      if (!precision) {
+        if (dimensions.width !== width && dimensions.height !== height) setDimensions({ width, height });
+      } else {
+        const newDimensions = { width, height };
+        newDimensions.width = roundToNearest(newDimensions.width, precision);
+        newDimensions.height = roundToNearest(newDimensions.height, precision);
+        if (newDimensions.width !== dimensions.width || newDimensions.height !== dimensions.height) {
+          setDimensions(newDimensions);
+        }
+      }
+    };
+
+    if (ref.current) {
+      handleResize();
+    }
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [ref, dimensions]);
+
+  return React.useMemo(
+    () => ({
+      dimensions,
+      ref,
+    }),
+    [dimensions.height, dimensions.width],
+  );
+};

src/i18next.d.ts

@@ -0,0 +1,7 @@
+import 'i18next';
+
+declare module 'i18next' {
+  interface CustomTypeOptions {
+    returnNull: false;
+  }
+}

src/layout/Devices.tsx

@@ -10,7 +10,7 @@ import {
   Tooltip,
   VStack,
 } from '@chakra-ui/react';
-import { ArrowSquareDown, ArrowSquareUp, Clock } from 'phosphor-react';
+import { ArrowSquareDown, ArrowSquareUp, Clock } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { Card } from 'components/Containers/Card';
 import { compactSecondsToDetailed, minimalSecondsToDetailed } from 'helpers/dateFormatting';
@@ -54,7 +54,7 @@ const SidebarDevices = () => {
   if (!getStats.data) return null;
 
   return (
-    <Card borderWidth="2px">
+    <Card p={4}>
       <Tooltip hasArrow label={t('controller.stats.seconds_ago', { s: time })}>
         <CircularProgress
           isIndeterminate

src/layout/Navbar/index.tsx

@@ -17,8 +17,9 @@ import {
   Tooltip,
   useBreakpoint,
   Portal,
+  useDisclosure,
 } from '@chakra-ui/react';
-import { ArrowCircleLeft } from 'phosphor-react';
+import { ArrowCircleLeft } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { useAuth } from 'contexts/AuthProvider';
@@ -27,11 +28,20 @@ export type NavbarProps = {
   toggleSidebar: () => void;
   activeRoute?: string;
   languageSwitcher?: React.ReactNode;
+  favoritesButton?: React.ReactNode;
+  rightElements?: React.ReactNode;
 };
 
-export const Navbar = ({ toggleSidebar, activeRoute, languageSwitcher }: NavbarProps) => {
+export const Navbar = ({
+  toggleSidebar,
+  activeRoute,
+  languageSwitcher,
+  favoritesButton,
+  rightElements = null,
+}: NavbarProps) => {
   const { t } = useTranslation();
   const navigate = useNavigate();
+  const menuProps = useDisclosure();
   const [scrolled, setScrolled] = useState(false);
   const breakpoint = useBreakpoint();
   const { colorMode, toggleColorMode } = useColorMode();
@@ -76,6 +86,20 @@ export const Navbar = ({ toggleSidebar, activeRoute, languageSwitcher }: NavbarP
 
   window.addEventListener('scroll', changeNavbar);
 
+  let timeout: NodeJS.Timeout;
+  const onMouseEnter = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    menuProps.onOpen();
+  };
+  const onMouseLeave = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    timeout = setTimeout(() => menuProps.onClose(), 100);
+  };
+
   return (
     <Portal>
       <Flex
@@ -97,15 +121,26 @@ export const Navbar = ({ toggleSidebar, activeRoute, languageSwitcher }: NavbarP
         ps="12px"
         pt="8px"
         top="15px"
-        w={isCompact ? '100%' : 'calc(100vw - 271px)'}
+        border={scrolled ? '0.5px solid' : undefined}
+        w={isCompact ? '100%' : 'calc(100% - 254px)'}
+      >
+        <Flex
+          w="100%"
+          flexDirection="row"
+          alignItems="center"
+          justifyItems="center"
+          alignContent="center"
+          justifyContent="center"
         >
-        <Flex w="100%" flexDirection="row" alignItems="center">
           {isCompact && <HamburgerIcon w="24px" h="24px" onClick={toggleSidebar} mr={10} mt={1} />}
-          <Heading>{activeRoute}</Heading>
+          {activeRoute && activeRoute.length > 0 ? (
+            <Heading size="lg" mr={4}>
+              {activeRoute}
+            </Heading>
+          ) : null}
           <Tooltip label={t('common.go_back')}>
             <IconButton
-              mt={2}
-              ml={4}
+              mt={1}
               colorScheme="blue"
               aria-label={t('common.go_back')}
               onClick={goBack}
@@ -115,6 +150,8 @@ export const Navbar = ({ toggleSidebar, activeRoute, languageSwitcher }: NavbarP
           </Tooltip>
           <Box ms="auto" w={{ base: 'unset' }}>
             <Flex alignItems="center" flexDirection="row">
+              {rightElements}
+              {favoritesButton}
               <Tooltip hasArrow label={t('common.theme')}>
                 <IconButton
                   aria-label={t('common.theme')}
@@ -124,27 +161,33 @@ export const Navbar = ({ toggleSidebar, activeRoute, languageSwitcher }: NavbarP
                 />
               </Tooltip>
               {languageSwitcher}
-              <HStack spacing={{ base: '0', md: '6' }} ml={1} mr={4}>
-                <Menu>
-                  <MenuButton py={2} transition="all 0.3s" _focus={{ boxShadow: 'none' }}>
+              <Box ml={1} mr={4}>
+                <Menu {...menuProps} gutter={0}>
+                  <MenuButton
+                    py={2}
+                    transition="all 0.3s"
+                    _focus={{ boxShadow: 'none' }}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
+                  >
                     <HStack>
                       {!isCompact && <Text fontWeight="bold">{user?.name}</Text>}
                       <Avatar h="40px" w="40px" fontSize="0.8rem" lineHeight="2rem" src={avatar} name={user?.name} />
                     </HStack>
                   </MenuButton>
-                  <Portal>
                   <MenuList
                     bg={useColorModeValue('white', 'gray.900')}
                     borderColor={useColorModeValue('gray.200', 'gray.700')}
+                    onMouseEnter={onMouseEnter}
+                    onMouseLeave={onMouseLeave}
                   >
                     <MenuItem onClick={goToProfile} w="100%">
                       {t('account.title')}
                     </MenuItem>
                     <MenuItem onClick={logout}>{t('common.logout')}</MenuItem>
                   </MenuList>
-                  </Portal>
                 </Menu>
-              </HStack>
+              </Box>
             </Flex>
           </Box>
         </Flex>

src/layout/Sidebar/NavLinkButton.tsx

@@ -1,37 +1,15 @@
 import React from 'react';
-import { Button, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { AccordionButton, AccordionItem, Flex, Text, useColorModeValue } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { NavLink } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import IconBox from 'components/Containers/IconBox';
-import { Route } from 'models/Routes';
+import { SingleRoute } from 'models/Routes';
 
 const variantChange = '0.2s linear';
 
-const commonStyle = {
-  boxSize: 'initial',
-  justifyContent: 'flex-start',
-  alignItems: 'center',
-  transition: variantChange,
-  bg: 'transparent',
-  ps: '6px',
-  py: '12px',
-  pe: '4px',
-  w: '100%',
-  borderRadius: '15px',
-  _active: {
-    bg: 'inherit',
-    transform: 'none',
-    borderColor: 'transparent',
-  },
-  _focus: {
-    boxShadow: '0px 7px 11px rgba(0, 0, 0, 0.04)',
-  },
-} as const;
-
 type Props = {
   isActive: boolean;
-  route: Route;
+  route: SingleRoute;
   toggleSidebar: () => void;
 };
 
@@ -39,42 +17,64 @@ export const NavLinkButton = ({ isActive, route, toggleSidebar }: Props) => {
   const { t } = useTranslation();
   const activeTextColor = useColorModeValue('gray.700', 'white');
   const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
-  const inactiveIconColor = useColorModeValue('gray.100', 'gray.600');
+  const activeBg = useColorModeValue('blue.50', 'blue.900');
+  const hoverBg = useColorModeValue('blue.100', 'blue.800');
 
   if (route.navButton) {
     return route.navButton(isActive, toggleSidebar, route) as JSX.Element;
   }
 
   return (
-    <NavLink to={route.path.replace(':id', '0')} key={uuid()} style={{ width: '100%' }}>
+    <NavLink to={route.path.replace(':id', '0')} style={{ width: '100%' }}>
       {isActive ? (
-        <Button {...commonStyle} boxShadow="none">
-          <Flex>
-            <IconBox bg="blue.300" color="white" h="38px" w="38px" me="6px" transition={variantChange}>
-              {route.icon(true)}
-            </IconBox>
-            <Text color={activeTextColor} my="auto" fontSize="md">
-              {t(route.name)}
-            </Text>
-          </Flex>
-        </Button>
-      ) : (
-        <Button
-          {...commonStyle}
-          ps="6px"
-          _focus={{
-            boxShadow: 'none',
+        <AccordionItem w="152px" borderTop="0px" borderBottom="0px">
+          <AccordionButton
+            px={1}
+            h={{
+              md: '40px',
+              lg: '50px',
+            }}
+            borderRadius="15px"
+            w="100%"
+            bg={activeBg}
+            _hover={{
+              bg: hoverBg,
             }}
           >
-          <Flex>
-            <IconBox bg={inactiveIconColor} color="blue.300" h="34px" w="34px" me="6px" transition={variantChange}>
+            <Flex alignItems="center" w="100%">
+              <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
                 {route.icon(false)}
               </IconBox>
-            <Text color={inactiveTextColor} my="auto" fontSize="sm">
+              <Text color={activeTextColor} fontSize="md" fontWeight="bold">
                 {t(route.name)}
               </Text>
             </Flex>
-        </Button>
+          </AccordionButton>
+        </AccordionItem>
+      ) : (
+        <AccordionItem w="152px" borderTop="0px" borderBottom="0px">
+          <AccordionButton
+            px={1}
+            h={{
+              md: '40px',
+              lg: '50px',
+            }}
+            borderRadius="15px"
+            w="100%"
+            _hover={{
+              bg: hoverBg,
+            }}
+          >
+            <Flex alignItems="center" w="100%">
+              <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
+                {route.icon(false)}
+              </IconBox>
+              <Text color={inactiveTextColor} fontSize="md" fontWeight="bold">
+                {t(route.name)}
+              </Text>
+            </Flex>
+          </AccordionButton>
+        </AccordionItem>
       )}
     </NavLink>
   );

src/layout/Sidebar/NestedNavButton/SubNavigationButton.tsx

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { Button, useColorModeValue } from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { NavLink } from 'react-router-dom';
+import { SubRoute } from 'models/Routes';
+
+type Props = {
+  isActive: (path: string) => boolean;
+  route: SubRoute;
+};
+
+const SubNavigationButton = ({ isActive, route }: Props) => {
+  const { t } = useTranslation();
+  const activeTextColor = useColorModeValue('gray.700', 'white');
+  const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
+  const activeBg = useColorModeValue('blue.50', 'blue.900');
+  const hoverBg = useColorModeValue('blue.100', 'blue.800');
+
+  const isCurrentlyActive = isActive(route.path);
+
+  return (
+    <NavLink to={route.path.replace(':id', '0')} style={{ width: '100%' }}>
+      <Button
+        w="100%"
+        justifyContent="left"
+        color={isCurrentlyActive ? activeTextColor : inactiveTextColor}
+        bg={isCurrentlyActive ? activeBg : 'transparent'}
+        _hover={{
+          bg: hoverBg,
+        }}
+        border="none"
+      >
+        {t(route.name)}
+      </Button>
+    </NavLink>
+  );
+};
+
+export default SubNavigationButton;

src/layout/Sidebar/NestedNavButton/index.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Text,
+  useColorModeValue,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import SubNavigationButton from './SubNavigationButton';
+import IconBox from 'components/Containers/IconBox';
+import { RouteGroup } from 'models/Routes';
+
+const variantChange = '0.2s linear';
+
+type Props = {
+  isActive: (path: string) => boolean;
+  route: RouteGroup;
+};
+
+const NestedNavButton = ({ isActive, route }: Props) => {
+  const { t } = useTranslation();
+  const inactiveTextColor = useColorModeValue('gray.600', 'gray.200');
+  const hoverBg = useColorModeValue('blue.100', 'blue.800');
+
+  return (
+    <AccordionItem w="152px" borderTop="0px" borderBottom="0px">
+      <AccordionButton
+        px={1}
+        h={{
+          md: '40px',
+          lg: '50px',
+        }}
+        _hover={{
+          bg: hoverBg,
+        }}
+        borderRadius="15px"
+        w="100%"
+      >
+        <Flex alignItems="center" w="100%">
+          <IconBox color="blue.300" h="30px" w="30px" me="6px" transition={variantChange} fontWeight="bold">
+            {route.icon(false)}
+          </IconBox>
+          <Text size="md" fontWeight="bold" color={inactiveTextColor}>
+            {typeof route.name === 'string' ? t(route.name) : route.name(t)}
+          </Text>
+        </Flex>
+        <AccordionIcon />
+      </AccordionButton>
+      <AccordionPanel pl="18px" paddingEnd={0} pr="-18px">
+        <Box pl={1} pr={-1} borderLeft="1px solid #63b3ed">
+          {route.children.map((subRoute) => (
+            <SubNavigationButton key={subRoute.path} route={subRoute} isActive={isActive} />
+          ))}
+        </Box>
+      </AccordionPanel>
+    </AccordionItem>
+  );
+};
+
+export default NestedNavButton;

src/layout/Sidebar/index.tsx

@@ -12,11 +12,12 @@ import {
   Spacer,
   useBreakpoint,
   VStack,
+  Accordion,
 } from '@chakra-ui/react';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
-import { v4 as uuid } from 'uuid';
 import { NavLinkButton } from './NavLinkButton';
+import NestedNavButton from './NestedNavButton';
 import { useAuth } from 'contexts/AuthProvider';
 import { Route } from 'models/Routes';
 
@@ -60,14 +61,25 @@ export const Sidebar = ({ routes, isOpen, toggle, logo, version, topNav, childre
   const sidebarContent = React.useMemo(
     () => (
       <>
+        <Accordion allowToggle>
           <VStack spacing={2} alignItems="start" w="100%" px={4}>
             {topNav ? topNav(isRouteActive, toggle) : null}
             {routes
               .filter(({ hidden, authorized }) => !hidden && authorized.includes(user?.userRole ?? ''))
-            .map((route) => (
-              <NavLinkButton key={uuid()} isActive={isRouteActive(route.path)} route={route} toggleSidebar={toggle} />
-            ))}
+              .map((route) =>
+                route.children ? (
+                  <NestedNavButton key={route.id} isActive={isRouteActive} route={route} />
+                ) : (
+                  <NavLinkButton
+                    key={route.id}
+                    isActive={isRouteActive(route.path)}
+                    route={route}
+                    toggleSidebar={toggle}
+                  />
+                ),
+              )}
           </VStack>
+        </Accordion>
         <Spacer />
         <Box mb={2}>{children}</Box>
         <Box>
@@ -77,7 +89,7 @@ export const Sidebar = ({ routes, isOpen, toggle, logo, version, topNav, childre
         </Box>
       </>
     ),
-    [user?.userRole, location],
+    [user?.userRole, location, topNav],
   );
 
   return (
@@ -117,7 +129,8 @@ export const Sidebar = ({ routes, isOpen, toggle, logo, version, topNav, childre
             h="calc(100vh - 32px)"
             my="16px"
             ml="16px"
-            borderRadius="16px"
+            borderRadius="15px"
+            border="0.5px solid"
           >
             {brand}
             <Flex direction="column" h="calc(100vh - 160px)" alignItems="center" overflowY="auto">

src/layout/index.tsx

@@ -10,7 +10,7 @@ import { Sidebar } from './Sidebar';
 import darkLogo from 'assets/Logo_Dark_Mode.svg';
 import lightLogo from 'assets/Logo_Light_Mode.svg';
 import LanguageSwitcher from 'components/LanguageSwitcher';
-import { Route as RouteProps } from 'models/Routes';
+import { RouteName } from 'models/Routes';
 import NotFoundPage from 'pages/NotFound';
 import routes from 'router/routes';
 
@@ -22,18 +22,57 @@ const Layout = () => {
   document.documentElement.dir = 'ltr';
 
   const activeRoute = React.useMemo(() => {
-    const route = routes.find(
-      (r) => r.path === location.pathname || location.pathname.split('/')[1] === r.path.split('/')[1],
-    );
+    let name: RouteName = '';
+    for (const route of routes) {
+      if (!route.children && route.path === location.pathname) {
+        name = route.navName ?? route.name;
+        break;
+      }
+      if (route.path?.includes('/:')) {
+        const routePath = route.path.split('/:')[0];
+        const currPath = location.pathname.split('/');
+        if (routePath && location.pathname.startsWith(routePath) && currPath.length === 3) {
+          name = route.navName ?? route.name;
+          break;
+        }
+      }
+      if (route.children) {
+        for (const child of route.children) {
+          if (child.path === location.pathname) {
+            name = child.navName ?? child.name;
+            break;
+          }
+        }
+      }
+    }
 
-    if (route) return route.navName ? t(route.navName) : t(route.name);
+    if (typeof name === 'function') return name(t);
 
-    return '';
+    if (name.includes('PATH')) {
+      name = location.pathname.split('/')[location.pathname.split('/').length - 1] ?? '';
+    }
+
+    if (name.includes('RAW-')) name.replace('RAW-', '');
+
+    return t(name);
   }, [t, location.pathname]);
 
-  const getRoutes = (r: RouteProps[]) =>
+  const routeInstances = React.useMemo(() => {
+    const instances = [];
+
+    for (const route of routes) {
       // @ts-ignore
-    r.map((route: RouteProps) => <Route path={route.path} element={<route.component />} key={uuid()} />);
+      if (!route.children) instances.push(<Route path={route.path} element={<route.component />} key={route.id} />);
+      else {
+        for (const child of route.children) {
+          // @ts-ignore
+          instances.push(<Route path={child.path} element={<child.component />} key={child.id} />);
+        }
+      }
+    }
+
+    return instances;
+  }, []);
 
   return (
     <>
@@ -59,9 +98,7 @@ const Layout = () => {
       </Sidebar>
       <Navbar toggleSidebar={toggleSidebar} languageSwitcher={<LanguageSwitcher />} activeRoute={activeRoute} />
       <PageContainer waitForUser>
-        <Routes>
-          {[...getRoutes(routes as RouteProps[]), <Route path="*" element={<NotFoundPage />} key={uuid()} />]}
-        </Routes>
+        <Routes>{[...routeInstances, <Route path="*" element={<NotFoundPage />} key={uuid()} />]}</Routes>
       </PageContainer>
     </>
   );

src/models/Device.ts

@@ -11,6 +11,8 @@ export interface GatewayDevice {
   entity: string;
   firmware: string;
   fwUpdatePolicy: string;
+  hasGPS: boolean;
+  hasRADIUSSessions: number;
   lastConfigurationChange: number;
   lastConfigurationDownload: number;
   lastFWUpdate: number;
@@ -37,6 +39,7 @@ export interface GatewayDevice {
     };
   };
   serialNumber: string;
+  simulated: boolean;
   subscriber: string;
   venue: string;
 }

src/models/Routes.ts

@@ -1,14 +1,53 @@
-import { ReactNode } from 'react';
+import React, { LazyExoticComponent } from 'react';
 
-export interface Route {
+export type RouteName = string | ((t: (s: string) => string) => string);
+
+export type SubRoute = {
+  id: string;
   authorized: string[];
   path: string;
-  name: string;
-  navName?: string;
-  icon: (active: boolean) => ReactNode;
-  navButton?: (isActive: boolean, toggleSidebar: () => void, route: Route) => React.ReactNode;
+  name: RouteName;
+  component: React.ReactElement | LazyExoticComponent<React.ComponentType<unknown>>;
+  navName?: RouteName;
+  hidden?: boolean;
+  icon?: undefined;
+  navButton?: undefined;
+  isEntity?: undefined;
+  isCustom?: undefined;
+  children?: undefined;
+};
+
+export type RouteGroup = {
+  id: string;
+  authorized: string[];
+  name: RouteName;
+  icon: (active: boolean) => React.ReactElement;
+  children: SubRoute[];
+  hidden?: boolean;
+  path?: undefined;
+  navName?: undefined;
+  navButton?: undefined;
+  isEntity?: undefined;
+  isCustom?: undefined;
+};
+
+export type SingleRoute = {
+  id: string;
+  authorized: string[];
+  path: string;
+  name: RouteName;
+  navName?: RouteName;
+  icon: (active: boolean) => React.ReactElement;
+  navButton?: (
+    isActive: boolean,
+    toggleSidebar: () => void,
+    route: Route,
+  ) => React.ReactElement | LazyExoticComponent<React.ComponentType<unknown>>;
   isEntity?: boolean;
-  component: unknown;
+  component: React.ReactElement | LazyExoticComponent<React.ComponentType<unknown>>;
   hidden?: boolean;
   isCustom?: boolean;
-}
+  children?: undefined;
+};
+
+export type Route = SingleRoute | RouteGroup;

src/models/User.ts

@@ -1,6 +1,5 @@
 import { Note } from './Note';
 
-
 export type UserRole =
   | 'root'
   | 'admin'

src/pages/DefaultConfigurations/List/Actions.tsx

@@ -17,7 +17,7 @@ import {
   useDisclosure,
   useToast,
 } from '@chakra-ui/react';
-import { MagnifyingGlass, Trash } from 'phosphor-react';
+import { MagnifyingGlass, Trash } from '@phosphor-icons/react';
 import { useTranslation } from 'react-i18next';
 import { DefaultConfigurationResponse, useDeleteDefaultConfig } from 'hooks/Network/DefaultConfigurations';
 import { AxiosError } from 'models/Axios';

src/pages/DefaultFirmware/CreateModal/ConfirmDefaultFirmwareCreation.tsx

@@ -0,0 +1,188 @@
+/* eslint-disable prefer-promise-reject-errors */
+import * as React from 'react';
+import { CheckCircleIcon, WarningIcon } from '@chakra-ui/icons';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Center,
+  Flex,
+  Heading,
+  Spinner,
+  Text,
+} from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
+import { useTranslation } from 'react-i18next';
+import { compactDate } from 'helpers/dateFormatting';
+import { getRevision } from 'helpers/stringHelper';
+import { DefaultFirmware } from 'hooks/Network/DefaultFirmware';
+import { getAllAvailableFirmware } from 'hooks/Network/Firmware';
+
+const getDefaultFirmware = async (deviceType: string, revision: string) =>
+  getAllAvailableFirmware(deviceType)
+    .then((res) => {
+      const found = res.firmwares.find((firmware) => firmware.revision === revision);
+      if (!found) {
+        return { error: { deviceType, error: 'Could not find available firmware for this revision' } };
+      }
+      return {
+        success: {
+          deviceType,
+          description: '',
+          revision,
+          imageCreationDate: found.imageDate,
+          uri: found.uri,
+          created: 0,
+          lastModified: 0,
+        },
+      };
+    })
+    .catch(() => ({ error: { deviceType, error: 'Could not fetch firmware available for this device type' } }));
+
+const getComputedData = async (deviceTypes: string[], revision: string) => {
+  const defaultFirmwares: DefaultFirmware[] = [];
+  const errors: { deviceType: string; error: string }[] = [];
+
+  const promises = deviceTypes.map((deviceType) => getDefaultFirmware(deviceType, revision));
+  const results = await Promise.allSettled(promises);
+
+  results.forEach((result) => {
+    if (result.status === 'fulfilled') {
+      if (result.value.error) {
+        errors.push(result.value.error);
+      } else if (result.value.success) {
+        defaultFirmwares.push(result.value.success);
+      }
+    }
+  });
+
+  return { defaultFirmwares, errors };
+};
+
+type Props = {
+  deviceTypes: string[];
+  revision: string;
+  goNext: (defaultFirmwares: DefaultFirmware[]) => Promise<void>;
+  setNextCallback: React.Dispatch<React.SetStateAction<(() => (Promise<void> | void) | undefined) | undefined>>;
+};
+
+const ConfirmDefaultFirmwareCreation = ({ deviceTypes, revision, goNext, setNextCallback }: Props) => {
+  const { t } = useTranslation();
+  const getCompleteData = useQuery(
+    ['default_firmware', 'computed_data'],
+    () => getComputedData(deviceTypes, revision),
+    {
+      refetchOnMount: true,
+    },
+  );
+
+  const onNext = async () => {
+    if (getCompleteData.data) {
+      await goNext(getCompleteData.data.defaultFirmwares);
+    }
+  };
+
+  React.useEffect(() => {
+    if (getCompleteData.data) {
+      setNextCallback(() => onNext);
+    } else {
+      setNextCallback(undefined);
+    }
+  }, [getCompleteData.data, setNextCallback]);
+
+  return (
+    <>
+      <Heading mb={4} size="sm">
+        {t('firmware.confirm_default_data')}
+      </Heading>
+      {getCompleteData.isFetching ? (
+        <Center my={4} display="flex" flexDirection="column">
+          <Spinner size="xl" />
+          <Heading size="sm" mt={2}>
+            {t('firmware.fetching_defaults')}
+          </Heading>
+        </Center>
+      ) : null}
+      {getCompleteData.data && !getCompleteData.isFetching ? (
+        <>
+          <Heading size="sm" mb={2}>
+            {t('firmware.one')}: {getRevision(revision)}
+          </Heading>
+          <Accordion allowToggle allowMultiple>
+            <AccordionItem>
+              <h2>
+                <AccordionButton>
+                  <Box as="span" flex="1" textAlign="left">
+                    <CheckCircleIcon color="green.500" mr={2} mt={-0.5} />
+                    {t('firmware.default_found', { count: getCompleteData.data?.defaultFirmwares.length })}
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+              </h2>
+              <AccordionPanel pb={4}>
+                <Accordion allowToggle allowMultiple>
+                  {getCompleteData.data?.defaultFirmwares.map((data) => (
+                    <AccordionItem key={data.deviceType}>
+                      <h2>
+                        <AccordionButton>
+                          <Box as="span" flex="1" textAlign="left">
+                            {data.deviceType}
+                          </Box>
+                          <AccordionIcon />
+                        </AccordionButton>
+                      </h2>
+                      <AccordionPanel pb={4}>
+                        <Flex>
+                          <Text>Image Date: </Text>
+                          <Text ml={2}>{compactDate(data.imageCreationDate)}</Text>
+                        </Flex>
+                        <Flex>
+                          <Text>URI: </Text>
+                          <Text ml={2}>{data.uri}</Text>
+                        </Flex>
+                      </AccordionPanel>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </AccordionPanel>
+            </AccordionItem>
+            <AccordionItem>
+              <h2>
+                <AccordionButton>
+                  <Box as="span" flex="1" textAlign="left">
+                    <WarningIcon color="red.500" mr={2} mt={-0.5} />
+                    {t('firmware.default_not_found', { count: getCompleteData.data?.errors.length })} (cannot create
+                    valid default firmware)
+                  </Box>
+                  <AccordionIcon />
+                </AccordionButton>
+              </h2>
+              <AccordionPanel pb={4}>
+                <Accordion allowToggle allowMultiple>
+                  {getCompleteData.data?.errors.map((error) => (
+                    <AccordionItem key={error.deviceType}>
+                      <h2>
+                        <AccordionButton>
+                          <Box as="span" flex="1" textAlign="left">
+                            {error.deviceType}
+                          </Box>
+                          <AccordionIcon />
+                        </AccordionButton>
+                      </h2>
+                      <AccordionPanel pb={4}>{error.error}</AccordionPanel>
+                    </AccordionItem>
+                  ))}
+                </Accordion>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
+        </>
+      ) : null}
+    </>
+  );
+};
+
+export default ConfirmDefaultFirmwareCreation;

src/pages/DefaultFirmware/CreateModal/CreateDefaultFirmwareResults.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { CheckCircleIcon, WarningIcon } from '@chakra-ui/icons';
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Flex,
+  Heading,
+  List,
+  ListItem,
+  Text,
+} from '@chakra-ui/react';
+import { useTranslation } from 'react-i18next';
+import { CreateDefaultFirmwareResult } from './utils';
+
+type Props = {
+  results: CreateDefaultFirmwareResult[];
+};
+
+const CreateDefaultFirmwareResults = ({ results }: Props) => {
+  const { t } = useTranslation();
+
+  const successes = results.filter((result) => !result.error);
+  const errors = results.filter((result) => result.error);
+
+  return (
+    <>
+      <Heading size="sm">{t('controller.devices.results')}: </Heading>
+      <Accordion allowToggle allowMultiple>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <CheckCircleIcon color="green.500" mr={2} mt={-0.5} />
+                {t('firmware.default_created', { count: successes.length })}
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <List>
+              {successes.map((success) => (
+                <ListItem key={success.deviceType}>
+                  <Text>{success.deviceType}</Text>
+                </ListItem>
+              ))}
+            </List>
+          </AccordionPanel>
+        </AccordionItem>
+        <AccordionItem>
+          <h2>
+            <AccordionButton>
+              <Box as="span" flex="1" textAlign="left">
+                <WarningIcon color="red.500" mr={2} mt={-0.5} />
+                {t('firmware.default_created_error_other', { count: errors.length })}
+              </Box>
+              <AccordionIcon />
+            </AccordionButton>
+          </h2>
+          <AccordionPanel pb={4}>
+            <List>
+              {errors.map((error) => (
+                <ListItem key={error.deviceType}>
+                  <Flex>
+                    <Text>{error.deviceType} -</Text>
+                    <Text ml={2}>{error.error}</Text>
+                  </Flex>
+                </ListItem>
+              ))}
+            </List>
+          </AccordionPanel>
+        </AccordionItem>
+      </Accordion>
+    </>
+  );
+};
+
+export default CreateDefaultFirmwareResults;

src/pages/DefaultFirmware/CreateModal/DeviceTypeSelection.tsx

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import { Heading } from '@chakra-ui/react';
+import { GroupBase, MultiValue, OptionBase, Select } from 'chakra-react-select';
+import { useTranslation } from 'react-i18next';
+import { useGetDefaultFirmware } from 'hooks/Network/DefaultFirmware';
+import { useGetDeviceTypes } from 'hooks/Network/Firmware';
+
+interface Option extends OptionBase {
+  label: string;
+  value: string;
+}
+
+type Props = {
+  goNext: (deviceTypes: string[]) => void;
+  setNextCallback: React.Dispatch<React.SetStateAction<(() => (Promise<void> | void) | undefined) | undefined>>;
+};
+
+const DeviceTypeSelection = ({ goNext, setNextCallback }: Props) => {
+  const { t } = useTranslation();
+  const getFirmware = useGetDefaultFirmware();
+  const getDeviceTypes = useGetDeviceTypes();
+  const [selectedDeviceTypes, setSelectedDeviceTypes] = React.useState<string[]>([]);
+  const availableDevicesTypes = React.useMemo(() => {
+    const alreadyCreatedDeviceTypes = getFirmware.data?.firmwares.map((firmware) => firmware.deviceType);
+    const deviceTypes = getDeviceTypes.data?.deviceTypes;
+    return deviceTypes?.filter((deviceType) => !alreadyCreatedDeviceTypes?.includes(deviceType));
+  }, [getDeviceTypes.data, getFirmware.data]);
+
+  const handleChange = (newValue: MultiValue<Option>) => {
+    const deviceTypes = newValue.map(({ value }) => value);
+    const allIndex = deviceTypes.indexOf('*');
+    if (allIndex === 0) {
+      setSelectedDeviceTypes(availableDevicesTypes ?? []);
+    } else if (allIndex > 0) {
+      setSelectedDeviceTypes(availableDevicesTypes ?? []);
+    } else {
+      setSelectedDeviceTypes(deviceTypes);
+    }
+  };
+
+  const options = React.useMemo(() => {
+    if (availableDevicesTypes?.length === selectedDeviceTypes.length)
+      return availableDevicesTypes?.map((deviceType) => ({ value: deviceType, label: deviceType })) ?? [];
+
+    return [
+      { value: '*', label: t('common.all') },
+      ...(availableDevicesTypes?.map((deviceType) => ({ value: deviceType, label: deviceType })) ?? []),
+    ];
+  }, [availableDevicesTypes, selectedDeviceTypes.length]);
+
+  const onNext = () => {
+    goNext(selectedDeviceTypes.sort((a, b) => a.localeCompare(b)));
+  };
+
+  React.useEffect(() => {
+    if (selectedDeviceTypes.length === 0) {
+      setNextCallback(undefined);
+    } else {
+      setNextCallback(() => onNext);
+    }
+  }, [selectedDeviceTypes, onNext]);
+
+  return (
+    <>
+      <Heading mb={4} size="sm">
+        {t('firmware.select_default_device_types')}
+      </Heading>
+      <Select<Option, true, GroupBase<Option>>
+        chakraStyles={{
+          control: (provided) => ({
+            ...provided,
+            borderRadius: '15px',
+            border: '2px solid',
+          }),
+          dropdownIndicator: (provided) => ({
+            ...provided,
+            backgroundColor: 'unset',
+            border: 'unset',
+          }),
+        }}
+        isMulti
+        closeMenuOnSelect={false}
+        options={options}
+        value={
+          selectedDeviceTypes.map((value) => ({
+            value,
+            label: value,
+          })) as MultiValue<Option>
+        }
+        isClearable={selectedDeviceTypes.length > 1}
+        onChange={handleChange}
+        isDisabled={!availableDevicesTypes}
+      />
+    </>
+  );
+};
+
+export default DeviceTypeSelection;