From 97ee7ad0cb6be395da0a7736599a956d2b4e8f1e Mon Sep 17 00:00:00 2001
From: "Luis Gustavo S. Barreto" <gustavo@ossystems.com.br>
Date: Tue, 30 Sep 2025 13:36:24 -0300
Subject: [PATCH] feat(ui): add DevicesDropdown component to replace
 notifications

---
 ui/src/components/AppBar/AppBar.vue           |   6 +-
 ui/src/components/AppBar/DevicesDropdown.vue  | 371 ++++++++++++++++++
 .../Notifications/NotificationsList.vue       |  43 --
 .../Notifications/NotificationsMenu.vue       |  87 ----
 .../components/Devices/DeviceActionButton.vue |   6 +-
 ui/src/components/Welcome/Welcome.vue         |   3 -
 ui/src/interfaces/INotification.ts            |  15 -
 ui/src/store/modules/notifications.ts         |  47 ---
 8 files changed, 377 insertions(+), 201 deletions(-)
 create mode 100644 ui/src/components/AppBar/DevicesDropdown.vue
 delete mode 100644 ui/src/components/AppBar/Notifications/NotificationsList.vue
 delete mode 100644 ui/src/components/AppBar/Notifications/NotificationsMenu.vue
 delete mode 100644 ui/src/interfaces/INotification.ts
 delete mode 100755 ui/src/store/modules/notifications.ts

diff --git a/ui/src/components/AppBar/AppBar.vue b/ui/src/components/AppBar/AppBar.vue
index 2f0686c7a6e..f81d7415fff 100644
--- a/ui/src/components/AppBar/AppBar.vue
+++ b/ui/src/components/AppBar/AppBar.vue
@@ -3,7 +3,7 @@
   <v-app-bar
     flat
     floating
-    class="bg-background border-b-thin"
+    class="bg-v-theme-surface border-b-thin"
     data-test="app-bar"
   >
     <v-app-bar-nav-icon
@@ -40,7 +40,7 @@
       <span>Need assistance? Click here for support.</span>
     </v-tooltip>
 
-    <NotificationsMenu data-test="notification-component" />
+    <DevicesDropdown data-test="devices-dropdown" />
 
     <v-menu>
       <template v-slot:activator="{ props }">
@@ -102,7 +102,7 @@ import { useRouter, useRoute, RouteLocationRaw, RouteLocation } from "vue-router
 import { useChatWoot } from "@productdevbook/chatwoot/vue";
 import handleError from "@/utils/handleError";
 import UserIcon from "../User/UserIcon.vue";
-import NotificationsMenu from "./Notifications/NotificationsMenu.vue";
+import DevicesDropdown from "./DevicesDropdown.vue";
 import PaywallChat from "../User/PaywallChat.vue";
 import { envVariables } from "@/envVariables";
 import useSnackbar from "@/helpers/snackbar";
diff --git a/ui/src/components/AppBar/DevicesDropdown.vue b/ui/src/components/AppBar/DevicesDropdown.vue
new file mode 100644
index 00000000000..02ce24ee099
--- /dev/null
+++ b/ui/src/components/AppBar/DevicesDropdown.vue
@@ -0,0 +1,371 @@
+<template>
+  <v-icon
+    @click="toggleDrawer"
+    color="primary"
+    aria-label="Open devices menu"
+    icon="mdi-developer-board"
+    data-test="devices-icon"
+    class="ml-3 mr-2"
+  />
+
+  <Teleport to="body">
+    <v-navigation-drawer
+      v-model="drawerOpen"
+      location="right"
+      temporary
+      :width="drawerWidth"
+      class="bg-v-theme-surface"
+      data-test="devices-drawer"
+    >
+    <v-card
+      class="bg-v-theme-surface h-100"
+      flat
+      data-test="devices-card"
+    >
+      <!-- Header with Stats -->
+      <v-card-title class="text-h6 pb-3 border-b">
+        Device Management
+      </v-card-title>
+
+      <v-card-text class="pa-4">
+        <v-row dense class="mb-4">
+          <v-col cols="3">
+            <v-card
+              class="pa-3 text-center"
+              variant="tonal"
+              data-test="total-devices-card"
+            >
+              <div class="text-h4 font-weight-bold">
+                {{ stats.registered_devices }}
+              </div>
+              <div class="text-caption text-medium-emphasis">
+                Total
+              </div>
+            </v-card>
+          </v-col>
+
+          <v-col cols="3">
+            <v-card
+              class="pa-3 text-center"
+              variant="tonal"
+              data-test="online-devices-card"
+            >
+              <div class="text-h4 font-weight-bold">
+                {{ stats.online_devices }}
+              </div>
+              <div class="text-caption text-medium-emphasis">
+                Online
+              </div>
+            </v-card>
+          </v-col>
+
+          <v-col cols="3">
+            <v-card
+              class="pa-3 text-center"
+              variant="tonal"
+              data-test="pending-devices-card"
+            >
+              <div class="text-h4 font-weight-bold">
+                {{ stats.pending_devices }}
+              </div>
+              <div class="text-caption text-medium-emphasis">
+                Pending
+              </div>
+            </v-card>
+          </v-col>
+
+          <v-col cols="3">
+            <v-card
+              class="pa-3 text-center"
+              variant="tonal"
+              data-test="offline-devices-card"
+            >
+              <div class="text-h4 font-weight-bold">
+                {{ offlineDevices }}
+              </div>
+              <div class="text-caption text-medium-emphasis">
+                Offline
+              </div>
+            </v-card>
+          </v-col>
+        </v-row>
+
+        <!-- Tab Buttons -->
+        <v-btn-toggle
+          v-model="activeTab"
+          mandatory
+          color="primary"
+          variant="outlined"
+          divided
+          class="mb-3 w-100"
+          data-test="tab-toggle"
+        >
+          <v-btn value="pending" data-test="pending-tab" class="flex-1-1">
+            <v-icon icon="mdi-clock-alert" size="small" class="mr-2" />
+            Pending Approval
+            <v-chip
+              v-if="stats.pending_devices > 0"
+              color="warning"
+              size="x-small"
+              class="ml-2"
+            >
+              {{ stats.pending_devices }}
+            </v-chip>
+          </v-btn>
+          <v-btn value="recent" data-test="recent-tab" class="flex-1-1">
+            <v-icon icon="mdi-history" size="small" class="mr-2" />
+            Recent Activity
+          </v-btn>
+        </v-btn-toggle>
+
+        <v-window v-model="activeTab">
+          <!-- Pending Tab -->
+          <v-window-item value="pending">
+            <!-- Pending Devices List -->
+            <v-card
+              variant="text"
+              class="overflow-y-auto border"
+              :max-height="isMobile ? 'calc(100vh - 300px)' : '400px'"
+            >
+              <template v-if="pendingDevices.length > 0">
+                <v-list density="compact" class="bg-v-theme-surface pa-0">
+                  <template v-for="(device, index) in pendingDevices" :key="device.uid">
+                    <v-divider v-if="index > 0" />
+                    <v-list-item class="px-3 py-3">
+                      <template v-slot:prepend>
+                        <v-icon icon="mdi-devices" color="primary" size="small" />
+                      </template>
+
+                      <v-list-item-title class="text-body-2 font-weight-medium mb-1">
+                        {{ device.name }}
+                      </v-list-item-title>
+
+                      <v-list-item-subtitle class="text-caption">
+                        <span class="font-mono">{{ device.identity?.mac || device.uid }}</span>
+                        <span class="mx-1">•</span>
+                        <span>{{ getDeviceIP(device) }}</span>
+                      </v-list-item-subtitle>
+
+                      <template v-slot:append>
+                        <span class="text-caption text-medium-emphasis">
+                          {{ formatTimeAgo(device.status_updated_at) }}
+                        </span>
+                      </template>
+
+                      <div class="d-flex gap-2 mt-2">
+                        <v-btn
+                          color="success"
+                          variant="flat"
+                          size="small"
+                          prepend-icon="mdi-check-circle"
+                          @click="handleAccept(device.uid)"
+                          :data-test="`accept-${device.uid}`"
+                        >
+                          Accept
+                        </v-btn>
+                        <v-btn
+                          color="error"
+                          variant="tonal"
+                          size="small"
+                          @click="handleReject(device.uid)"
+                          :data-test="`reject-${device.uid}`"
+                        >
+                          Reject
+                        </v-btn>
+                        <v-btn
+                          icon="mdi-dots-vertical"
+                          variant="text"
+                          size="small"
+                          :to="`/devices/${device.uid}`"
+                        />
+                      </div>
+                    </v-list-item>
+                  </template>
+                </v-list>
+              </template>
+
+              <template v-else>
+                <div class="pa-8 text-center">
+                  <v-icon icon="mdi-check-circle" size="64" color="success" class="opacity-50 mb-3" />
+                  <p class="text-body-2 text-medium-emphasis">No pending devices</p>
+                  <p class="text-caption text-disabled mt-1">All devices have been approved</p>
+                </div>
+              </template>
+            </v-card>
+          </v-window-item>
+
+          <!-- Recent Activity Tab -->
+          <v-window-item value="recent">
+            <v-card
+              variant="outlined"
+              class="overflow-y-auto"
+              :max-height="isMobile ? 'calc(100vh - 400px)' : '400px'"
+            >
+              <v-list density="compact" class="pa-0">
+                <template v-for="(device, index) in recentDevices" :key="device.uid">
+                  <v-divider v-if="index > 0" />
+                  <v-list-item class="px-3 py-2" :to="`/devices/${device.uid}`">
+                    <template v-slot:prepend>
+                      <v-badge
+                        :color="device.online ? 'success' : 'grey'"
+                        dot
+                        inline
+                        class="mr-2"
+                      />
+                    </template>
+
+                    <v-list-item-title class="text-body-2 font-weight-medium">
+                      {{ device.name }}
+                    </v-list-item-title>
+
+                    <v-list-item-subtitle class="text-caption font-mono">
+                      {{ device.identity?.mac || device.uid }}
+                    </v-list-item-subtitle>
+
+                    <template v-slot:append>
+                      <span class="text-caption text-medium-emphasis">
+                        {{ device.online ? 'Active now' : formatTimeAgo(device.last_seen) }}
+                      </span>
+                    </template>
+                  </v-list-item>
+                </template>
+              </v-list>
+            </v-card>
+          </v-window-item>
+        </v-window>
+      </v-card-text>
+
+      <!-- Footer -->
+      <v-divider />
+      <v-card-actions class="pa-3">
+        <v-btn
+          to="/devices"
+          variant="text"
+          color="primary"
+          block
+          size="small"
+          append-icon="mdi-arrow-right"
+          data-test="view-all-devices-btn"
+        >
+          View All Devices
+        </v-btn>
+      </v-card-actions>
+    </v-card>
+  </v-navigation-drawer>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { computed, onBeforeMount, ref } from "vue";
+import { useDisplay } from "vuetify";
+import useStatsStore from "@/store/modules/stats";
+import useDevicesStore from "@/store/modules/devices";
+import handleError from "@/utils/handleError";
+import useSnackbar from "@/helpers/snackbar";
+import moment from "moment";
+
+const { mobile, thresholds } = useDisplay();
+const statsStore = useStatsStore();
+const devicesStore = useDevicesStore();
+const snackbar = useSnackbar();
+
+const isMobile = computed(() => mobile.value);
+const drawerWidth = computed(() => thresholds.value.sm);
+const drawerOpen = ref(false);
+const activeTab = ref("pending");
+const pendingDevicesList = ref<any[]>([]);
+const recentDevicesList = ref<any[]>([]);
+
+const stats = computed(() => statsStore.stats);
+const hasPendingDevices = computed(() => stats.value.pending_devices > 0);
+const offlineDevices = computed(() =>
+  stats.value.registered_devices - stats.value.online_devices
+);
+
+const pendingDevices = computed(() => pendingDevicesList.value);
+const recentDevices = computed(() => recentDevicesList.value);
+
+const toggleDrawer = () => {
+  drawerOpen.value = !drawerOpen.value;
+  console.log("Drawer toggled:", drawerOpen.value);
+};
+
+const getDeviceIP = (device: any) => {
+  return device.info?.public_ip || device.info?.private_ip || "N/A";
+};
+
+const formatTimeAgo = (date: string | Date) => {
+  try {
+    return moment(date).fromNow();
+  } catch {
+    return "Unknown";
+  }
+};
+
+const handleAccept = async (uid: string) => {
+  try {
+    await devicesStore.acceptDevice(uid);
+    await fetchStats();
+    await fetchPendingDevices();
+    snackbar.showSuccess("Device accepted successfully");
+  } catch (error: unknown) {
+    snackbar.showError("Failed to accept device");
+    handleError(error);
+  }
+};
+
+const handleReject = async (uid: string) => {
+  try {
+    await devicesStore.rejectDevice(uid);
+    await fetchStats();
+    await fetchPendingDevices();
+    snackbar.showSuccess("Device rejected successfully");
+  } catch (error: unknown) {
+    snackbar.showError("Failed to reject device");
+    handleError(error);
+  }
+};
+
+const fetchStats = async () => {
+  try {
+    await statsStore.fetchStats();
+  } catch (error: unknown) {
+    snackbar.showError("Failed to load device statistics");
+    handleError(error);
+  }
+};
+
+const fetchPendingDevices = async () => {
+  try {
+    await devicesStore.fetchDeviceList({ status: "pending", page: 1, perPage: 100 });
+    pendingDevicesList.value = [...devicesStore.devices];
+  } catch (error: unknown) {
+    handleError(error);
+  }
+};
+
+const fetchRecentDevices = async () => {
+  try {
+    await devicesStore.fetchDeviceList({ status: "accepted", page: 1, perPage: 10 });
+    recentDevicesList.value = [...devicesStore.devices]
+      .sort((a, b) => new Date(b.last_seen).getTime() - new Date(a.last_seen).getTime())
+      .slice(0, 10);
+  } catch (error: unknown) {
+    handleError(error);
+  }
+};
+
+onBeforeMount(async () => {
+  await fetchStats();
+  await fetchPendingDevices();
+  await fetchRecentDevices();
+});
+
+defineExpose({ fetchStats, fetchPendingDevices, drawerOpen });
+</script>
+
+<style scoped>
+.v-window {
+  overflow: visible;
+}
+</style>
\ No newline at end of file
diff --git a/ui/src/components/AppBar/Notifications/NotificationsList.vue b/ui/src/components/AppBar/Notifications/NotificationsList.vue
deleted file mode 100644
index d2a7093afd9..00000000000
--- a/ui/src/components/AppBar/Notifications/NotificationsList.vue
+++ /dev/null
@@ -1,43 +0,0 @@
-<template>
-  <v-list @click.stop class="pa-0" density="compact">
-    <v-list-subheader>Pending Devices</v-list-subheader>
-    <v-divider />
-
-    <v-list-item
-      v-for="notification in notifications"
-      :key="notification.id"
-    >
-      <v-list-item-title>
-        <router-link
-          :to="{ name: 'DeviceDetails', params: { identifier: notification.data.uid } }"
-          :data-test="notification.data.uid + '-title'"
-        >
-          {{ notification.data.name }}
-        </router-link>
-      </v-list-item-title>
-
-      <template v-slot:append>
-        <v-list-item-action>
-          <DeviceActionButton
-            :uid="notification.data.uid"
-            :name="notification.data.name"
-            :variant="notification.type"
-            :isInNotification="true"
-            :show="true"
-            action="accept"
-            :data-test="notification.data.uid + '-btn'"
-          />
-        </v-list-item-action>
-      </template>
-    </v-list-item>
-  </v-list>
-</template>
-
-<script setup lang="ts">
-import DeviceActionButton from "@/components/Devices/DeviceActionButton.vue";
-import { INotification } from "@/interfaces/INotification";
-
-defineProps<{
-  notifications: Array<INotification>,
-}>();
-</script>
diff --git a/ui/src/components/AppBar/Notifications/NotificationsMenu.vue b/ui/src/components/AppBar/Notifications/NotificationsMenu.vue
deleted file mode 100644
index 4af10650cf9..00000000000
--- a/ui/src/components/AppBar/Notifications/NotificationsMenu.vue
+++ /dev/null
@@ -1,87 +0,0 @@
-<template>
-  <v-menu :close-on-content-click="true">
-    <template v-slot:activator="{ props }">
-      <v-badge
-        :model-value="showNotifications"
-        :content="notificationCount"
-        offset-y="-5"
-        location="top right"
-        color="success"
-        size="x-small"
-        data-test="notifications-badge"
-        class="ml-3 mr-2"
-      >
-        <v-icon
-          v-bind="props"
-          color="primary"
-          aria-label="Open notifications menu"
-          icon="mdi-bell"
-        />
-      </v-badge>
-    </template>
-
-    <v-card
-      v-if="showNotifications"
-      data-test="notifications-card"
-    >
-      <NotificationsList
-        :notifications
-      />
-
-      <v-btn
-        to="/devices/pending"
-        variant="tonal"
-        link
-        block
-        size="small"
-        data-test="pending-devices-btn"
-      >
-        Show all Pending Devices
-      </v-btn>
-    </v-card>
-
-    <v-card
-      v-else
-      data-test="empty-card"
-      class="pa-2 bg-v-theme-surface"
-    >
-      <v-card-subtitle>{{ emptyCardMessage }}</v-card-subtitle>
-    </v-card>
-  </v-menu>
-</template>
-
-<script setup lang="ts">
-import { computed, onBeforeMount } from "vue";
-import hasPermission from "@/utils/permission";
-import handleError from "@/utils/handleError";
-import useSnackbar from "@/helpers/snackbar";
-import NotificationsList from "./NotificationsList.vue";
-import useNotificationsStore from "@/store/modules/notifications";
-
-const notificationsStore = useNotificationsStore();
-const snackbar = useSnackbar();
-const notifications = computed(() => notificationsStore.notifications);
-const notificationCount = computed(() => notificationsStore.notificationCount);
-const canViewNotifications = hasPermission("notification:view");
-const showNotifications = computed(() => notificationCount.value > 0 && canViewNotifications);
-const emptyCardMessage = computed(() => (
-  canViewNotifications ? "You don't have notifications" : "You don't have permission to view notifications"
-));
-
-const fetchNotifications = async () => {
-  try {
-    await notificationsStore.fetchNotifications();
-  } catch (error: unknown) {
-    if (canViewNotifications) {
-      snackbar.showError("Failed to load notifications.");
-      handleError(error);
-    }
-  }
-};
-
-onBeforeMount(async () => {
-  await fetchNotifications();
-});
-
-defineExpose({ fetchNotifications });
-</script>
diff --git a/ui/src/components/Devices/DeviceActionButton.vue b/ui/src/components/Devices/DeviceActionButton.vue
index f5cfdff398d..7f792f228e3 100644
--- a/ui/src/components/Devices/DeviceActionButton.vue
+++ b/ui/src/components/Devices/DeviceActionButton.vue
@@ -60,7 +60,7 @@ import useSnackbar from "@/helpers/snackbar";
 import MessageDialog from "../MessageDialog.vue";
 import useBillingStore from "@/store/modules/billing";
 import useDevicesStore from "@/store/modules/devices";
-import useNotificationsStore from "@/store/modules/notifications";
+import useStatsStore from "@/store/modules/stats";
 
 interface DeviceActionButtonProps {
   name?: string;
@@ -79,7 +79,7 @@ const props = withDefaults(defineProps<DeviceActionButtonProps>(), {
 const emit = defineEmits(["update"]);
 const billingStore = useBillingStore();
 const devicesStore = useDevicesStore();
-const { fetchNotifications } = useNotificationsStore();
+const statsStore = useStatsStore();
 const snackbar = useSnackbar();
 const isBillingActive = computed(() => billingStore.isActive);
 const icon = {
@@ -98,7 +98,7 @@ const close = () => {
 
 const refreshDevices = async () => {
   try {
-    await fetchNotifications();
+    await statsStore.fetchStats();
     emit("update");
     close();
   } catch (error: unknown) {
diff --git a/ui/src/components/Welcome/Welcome.vue b/ui/src/components/Welcome/Welcome.vue
index 10dc712b217..843175e96ab 100644
--- a/ui/src/components/Welcome/Welcome.vue
+++ b/ui/src/components/Welcome/Welcome.vue
@@ -93,7 +93,6 @@ import BaseDialog from "../BaseDialog.vue";
 import useAuthStore from "@/store/modules/auth";
 import { IDevice } from "@/interfaces/IDevice";
 import useDevicesStore from "@/store/modules/devices";
-import useNotificationsStore from "@/store/modules/notifications";
 import useStatsStore from "@/store/modules/stats";
 
 type Timer = ReturnType<typeof setInterval>;
@@ -101,7 +100,6 @@ type Timer = ReturnType<typeof setInterval>;
 const showDialog = defineModel<boolean>({ required: true });
 const authStore = useAuthStore();
 const devicesStore = useDevicesStore();
-const { fetchNotifications } = useNotificationsStore();
 const statsStore = useStatsStore();
 const snackbar = useSnackbar();
 const el = ref<number>(1);
@@ -134,7 +132,6 @@ const acceptDevice = async () => {
     if (firstPendingDevice.value) {
       await devicesStore.acceptDevice(firstPendingDevice.value.uid);
 
-      await fetchNotifications();
       await statsStore.fetchStats();
 
       el.value = 4;
diff --git a/ui/src/interfaces/INotification.ts b/ui/src/interfaces/INotification.ts
deleted file mode 100644
index 838904ca6ca..00000000000
--- a/ui/src/interfaces/INotification.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { IContainer } from "@/interfaces/IContainer";
-import { IDevice } from "@/interfaces/IDevice";
-
-export enum NotificationType {
-  DEVICE = "device",
-  CONTAINER = "container"
-}
-
-type NotificationData = IDevice | IContainer;
-
-export interface INotification {
-  id: string;
-  type: NotificationType;
-  data: NotificationData;
-}
diff --git a/ui/src/store/modules/notifications.ts b/ui/src/store/modules/notifications.ts
deleted file mode 100755
index a15e4d40fe0..00000000000
--- a/ui/src/store/modules/notifications.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { defineStore } from "pinia";
-import { ref, computed } from "vue";
-import { fetchDevices } from "../api/devices";
-import { fetchContainers } from "../api/containers";
-import { deviceToNotification, containerToNotification } from "@/utils/notificationAdapters";
-import { IDevice } from "@/interfaces/IDevice";
-import { IContainer } from "@/interfaces/IContainer";
-import { INotification } from "@/interfaces/INotification";
-
-const useNotificationsStore = defineStore("notifications", () => {
-  const notifications = ref<INotification[]>([]);
-  const notificationCount = computed(() => notifications.value.length);
-
-  const fetchNotifications = async () => {
-    try {
-      const [deviceRes, containerRes] = await Promise.all([
-        fetchDevices(1, 10, "pending"),
-        fetchContainers(1, 10, "pending"),
-      ]);
-
-      const devices = deviceRes.data as IDevice[];
-      const containers = containerRes.data as IContainer[];
-
-      const deviceNotifications = devices.map(deviceToNotification);
-      const containerNotifications = containers.map(containerToNotification);
-
-      const combinedNotifications = [
-        ...deviceNotifications,
-        ...containerNotifications,
-      ];
-
-      notifications.value = combinedNotifications;
-    } catch (error) {
-      notifications.value = [];
-      throw error;
-    }
-  };
-
-  return {
-    notifications,
-    notificationCount,
-
-    fetchNotifications,
-  };
-});
-
-export default useNotificationsStore;