Merge remote-tracking branch 'origin/main' into feat/gateway-v2

backend/src/@types/fastify.d.ts

@@ -85,6 +85,7 @@ import { TIdentityUaServiceFactory } from "@app/services/identity-ua/identity-ua
 import { TIntegrationServiceFactory } from "@app/services/integration/integration-service";
 import { TIntegrationAuthServiceFactory } from "@app/services/integration-auth/integration-auth-service";
 import { TMicrosoftTeamsServiceFactory } from "@app/services/microsoft-teams/microsoft-teams-service";
+import { TNotificationServiceFactory } from "@app/services/notification/notification-service";
 import { TOfflineUsageReportServiceFactory } from "@app/services/offline-usage-report/offline-usage-report-service";
 import { TOrgRoleServiceFactory } from "@app/services/org/org-role-service";
 import { TOrgServiceFactory } from "@app/services/org/org-service";
@@ -297,6 +298,8 @@ declare module "fastify" {
       secretRotationV2: TSecretRotationV2ServiceFactory;
       microsoftTeams: TMicrosoftTeamsServiceFactory;
       assumePrivileges: TAssumePrivilegeServiceFactory;
+      relay: TRelayServiceFactory;
+      gatewayV2: TGatewayV2ServiceFactory;
       githubOrgSync: TGithubOrgSyncServiceFactory;
       folderCommit: TFolderCommitServiceFactory;
       pit: TPitServiceFactory;
@@ -307,8 +310,7 @@ declare module "fastify" {
       bus: TEventBusService;
       sse: TServerSentEventsService;
       identityAuthTemplate: TIdentityAuthTemplateServiceFactory;
-      relay: TRelayServiceFactory;
+      notification: TNotificationServiceFactory;
-      gatewayV2: TGatewayV2ServiceFactory;
       offlineUsageReport: TOfflineUsageReportServiceFactory;
     };
     // this is exclusive use for middlewares in which we need to inject data

backend/src/@types/knex.d.ts

@@ -545,6 +545,11 @@ import {
   TSecretReminderRecipientsInsert,
   TSecretReminderRecipientsUpdate
 } from "@app/db/schemas/secret-reminder-recipients";
+import {
+  TUserNotifications,
+  TUserNotificationsInsert,
+  TUserNotificationsUpdate
+} from "@app/db/schemas/user-notifications";
 
 declare module "knex" {
   namespace Knex {
@@ -1248,6 +1253,17 @@ declare module "knex/types/tables" {
       TSecretScanningResourcesInsert,
       TSecretScanningResourcesUpdate
     >;
+    [TableName.InstanceRelayConfig]: KnexOriginal.CompositeTableType<
+      TInstanceRelayConfig,
+      TInstanceRelayConfigInsert,
+      TInstanceRelayConfigUpdate
+    >;
+    [TableName.OrgRelayConfig]: KnexOriginal.CompositeTableType<
+      TOrgRelayConfig,
+      TOrgRelayConfigInsert,
+      TOrgRelayConfigUpdate
+    >;
+    [TableName.Relay]: KnexOriginal.CompositeTableType<TRelays, TRelaysInsert, TRelaysUpdate>;
     [TableName.SecretScanningScan]: KnexOriginal.CompositeTableType<
       TSecretScanningScans,
       TSecretScanningScansInsert,
@@ -1275,16 +1291,10 @@ declare module "knex/types/tables" {
       TOrgGatewayConfigV2Update
     >;
     [TableName.GatewayV2]: KnexOriginal.CompositeTableType<TGatewaysV2, TGatewaysV2Insert, TGatewaysV2Update>;
-    [TableName.InstanceRelayConfig]: KnexOriginal.CompositeTableType<
+    [TableName.UserNotifications]: KnexOriginal.CompositeTableType<
-      TInstanceRelayConfig,
+      TUserNotifications,
-      TInstanceRelayConfigInsert,
+      TUserNotificationsInsert,
-      TInstanceRelayConfigUpdate
+      TUserNotificationsUpdate
     >;
-    [TableName.OrgRelayConfig]: KnexOriginal.CompositeTableType<
-      TOrgRelayConfig,
-      TOrgRelayConfigInsert,
-      TOrgRelayConfigUpdate
-    >;
-    [TableName.Relay]: KnexOriginal.CompositeTableType<TRelays, TRelaysInsert, TRelaysUpdate>;
   }
 }

backend/src/db/migrations/20250829203610_user-notifications.ts

@@ -0,0 +1,50 @@
+import { Knex } from "knex";
+
+import { TableName } from "../schemas";
+import { createOnUpdateTrigger, dropOnUpdateTrigger } from "../utils";
+
+export async function up(knex: Knex): Promise<void> {
+  if (!(await knex.schema.hasTable(TableName.UserNotifications))) {
+    const createTableSql = knex.schema
+      .createTable(TableName.UserNotifications, (t) => {
+        t.uuid("id").defaultTo(knex.fn.uuid());
+        t.uuid("userId").notNullable();
+        t.uuid("orgId").nullable();
+
+        t.string("type").notNullable();
+        t.string("title").notNullable(); // Markdown
+        t.text("body").nullable(); // Markdown
+        t.string("link").nullable();
+        t.boolean("isRead").notNullable().defaultTo(false);
+
+        t.timestamps(true, true, true);
+
+        t.primary(["id", "createdAt"]);
+      })
+      .toString();
+
+    await knex.schema.raw(`
+        ${createTableSql} PARTITION BY RANGE ("createdAt");
+    `);
+
+    await knex.schema.raw(
+      `CREATE TABLE ${TableName.UserNotifications}_default PARTITION OF ${TableName.UserNotifications} DEFAULT`
+    );
+
+    await knex.schema.alterTable(TableName.UserNotifications, (t) => {
+      t.foreign("userId").references("id").inTable(TableName.Users).onDelete("CASCADE");
+      t.foreign("orgId").references("id").inTable(TableName.Organization).onDelete("CASCADE");
+
+      t.index("type");
+      t.index(["userId", "isRead"]);
+      t.index(["userId", "createdAt", "orgId"]);
+    });
+
+    await createOnUpdateTrigger(knex, TableName.UserNotifications);
+  }
+}
+
+export async function down(knex: Knex): Promise<void> {
+  await knex.schema.dropTableIfExists(TableName.UserNotifications);
+  await dropOnUpdateTrigger(knex, TableName.UserNotifications);
+}

backend/src/db/schemas/models.ts

@@ -131,6 +131,7 @@ export enum TableName {
   SecretApprovalRequestSecretTagV2 = "secret_approval_request_secret_tags_v2",
   SnapshotSecretV2 = "secret_snapshot_secrets_v2",
   ProjectSplitBackfillIds = "project_split_backfill_ids",
+  UserNotifications = "user_notifications",
   // Gateway
   OrgGatewayConfig = "org_gateway_config",
   Gateway = "gateways",

backend/src/db/schemas/user-notifications.ts

@@ -0,0 +1,25 @@
+// Code generated by automation script, DO NOT EDIT.
+// Automated by pulling database and generating zod schema
+// To update. Just run npm run generate:schema
+// Written by akhilmhdh.
+
+import { z } from "zod";
+
+import { TImmutableDBKeys } from "./models";
+
+export const UserNotificationsSchema = z.object({
+  id: z.string().uuid(),
+  userId: z.string().uuid(),
+  orgId: z.string().uuid().nullable().optional(),
+  type: z.string(),
+  title: z.string(),
+  body: z.string().nullable().optional(),
+  link: z.string().nullable().optional(),
+  isRead: z.boolean().default(false),
+  createdAt: z.date(),
+  updatedAt: z.date()
+});
+
+export type TUserNotifications = z.infer<typeof UserNotificationsSchema>;
+export type TUserNotificationsInsert = Omit<z.input<typeof UserNotificationsSchema>, TImmutableDBKeys>;
+export type TUserNotificationsUpdate = Partial<Omit<z.input<typeof UserNotificationsSchema>, TImmutableDBKeys>>;

backend/src/ee/services/access-approval-request/access-approval-request-service.ts

@@ -20,6 +20,8 @@ import { TProjectSlackConfigDALFactory } from "@app/services/slack/project-slack
 import { SmtpTemplates, TSmtpService } from "@app/services/smtp/smtp-service";
 import { TUserDALFactory } from "@app/services/user/user-dal";
 
+import { TNotificationServiceFactory } from "../../../services/notification/notification-service";
+import { NotificationType } from "../../../services/notification/notification-types";
 import { TAccessApprovalPolicyApproverDALFactory } from "../access-approval-policy/access-approval-policy-approver-dal";
 import { TAccessApprovalPolicyDALFactory } from "../access-approval-policy/access-approval-policy-dal";
 import { TGroupDALFactory } from "../group/group-dal";
@@ -67,6 +69,7 @@ type TSecretApprovalRequestServiceFactoryDep = {
   projectSlackConfigDAL: Pick<TProjectSlackConfigDALFactory, "getIntegrationDetailsByProject">;
   microsoftTeamsService: Pick<TMicrosoftTeamsServiceFactory, "sendNotification">;
   projectMicrosoftTeamsConfigDAL: Pick<TProjectMicrosoftTeamsConfigDALFactory, "getIntegrationDetailsByProject">;
+  notificationService: Pick<TNotificationServiceFactory, "createUserNotifications">;
 };
 
 export const accessApprovalRequestServiceFactory = ({
@@ -84,7 +87,8 @@ export const accessApprovalRequestServiceFactory = ({
   kmsService,
   microsoftTeamsService,
   projectMicrosoftTeamsConfigDAL,
-  projectSlackConfigDAL
+  projectSlackConfigDAL,
+  notificationService
 }: TSecretApprovalRequestServiceFactoryDep): TAccessApprovalRequestServiceFactory => {
   const $getEnvironmentFromPermissions = (permissions: unknown): string | null => {
     if (!Array.isArray(permissions) || permissions.length === 0) {
@@ -245,7 +249,8 @@ export const accessApprovalRequestServiceFactory = ({
       );
 
       const requesterFullName = `${requestedByUser.firstName} ${requestedByUser.lastName}`;
-      const approvalUrl = `${cfg.SITE_URL}/projects/secret-management/${project.id}/approval`;
+      const approvalPath = `/projects/secret-management/${project.id}/approval`;
+      const approvalUrl = `${cfg.SITE_URL}${approvalPath}`;
 
       await triggerWorkflowIntegrationNotification({
         input: {
@@ -274,6 +279,17 @@ export const accessApprovalRequestServiceFactory = ({
         }
       });
 
+      await notificationService.createUserNotifications(
+        approverUsers.map((approver) => ({
+          userId: approver.id,
+          orgId: actorOrgId,
+          type: NotificationType.ACCESS_APPROVAL_REQUEST,
+          title: "Access Approval Request",
+          body: `**${requesterFullName}** (${requestedByUser.email}) has requested ${isTemporary ? "temporary" : "permanent"} access to **${secretPath}** in the **${envSlug}** environment for project **${project.name}**.`,
+          link: approvalPath
+        }))
+      );
+
       await smtpService.sendMail({
         recipients: approverUsers.filter((approver) => approver.email).map((approver) => approver.email!),
         subjectLine: "Access Approval Request",
@@ -391,7 +407,8 @@ export const accessApprovalRequestServiceFactory = ({
 
       const requesterFullName = `${requestedByUser.firstName} ${requestedByUser.lastName}`;
       const editorFullName = `${editedByUser.firstName} ${editedByUser.lastName}`;
-      const approvalUrl = `${cfg.SITE_URL}/projects/secret-management/${project.id}/approval`;
+      const approvalPath = `/projects/secret-management/${project.id}/approval`;
+      const approvalUrl = `${cfg.SITE_URL}${approvalPath}`;
 
       await triggerWorkflowIntegrationNotification({
         input: {
@@ -422,27 +439,44 @@ export const accessApprovalRequestServiceFactory = ({
         }
       });
 
-      await smtpService.sendMail({
+      await notificationService.createUserNotifications(
-        recipients: policy.approvers
+        policy.approvers
-          .filter((approver) => Boolean(approver.email) && approver.userId !== editedByUser.id)
+          .filter((approver) => Boolean(approver.userId) && approver.userId !== editedByUser.id)
-          .map((approver) => approver.email!),
+          .map((approver) => ({
-        subjectLine: "Access Approval Request Updated",
+            userId: approver.userId!,
-        substitutions: {
+            orgId: actorOrgId,
-          projectName: project.name,
+            type: NotificationType.ACCESS_APPROVAL_REQUEST_UPDATED,
-          requesterFullName,
+            title: "Access Approval Request Updated",
-          requesterEmail: requestedByUser.email,
+            body: `**${editorFullName}** (${editedByUser.email}) has updated the access request submitted by **${requesterFullName}** (${requestedByUser.email}) for **${secretPath}** in the **${envSlug}** environment for project **${project.name}**.`,
-          isTemporary: true,
+            link: approvalPath
-          expiresIn: msFn(ms(temporaryRange || ""), { long: true }),
+          }))
-          secretPath,
+      );
-          environment: envSlug,
+
-          permissions: accessTypes,
+      const recipients = policy.approvers
-          approvalUrl,
+        .filter((approver) => Boolean(approver.email) && approver.userId !== editedByUser.id)
-          editNote,
+        .map((approver) => approver.email!);
-          editorFullName,
+
-          editorEmail: editedByUser.email
+      if (recipients.length > 0) {
-        },
+        await smtpService.sendMail({
-        template: SmtpTemplates.AccessApprovalRequestUpdated
+          recipients,
-      });
+          subjectLine: "Access Approval Request Updated",
+          substitutions: {
+            projectName: project.name,
+            requesterFullName,
+            requesterEmail: requestedByUser.email,
+            isTemporary: true,
+            expiresIn: msFn(ms(temporaryRange || ""), { long: true }),
+            secretPath,
+            environment: envSlug,
+            permissions: accessTypes,
+            approvalUrl,
+            editNote,
+            editorFullName,
+            editorEmail: editedByUser.email
+          },
+          template: SmtpTemplates.AccessApprovalRequestUpdated
+        });
+      }
 
       return approvalRequest;
     });

backend/src/queue/queue-service.ts

@@ -23,6 +23,7 @@ import { logger } from "@app/lib/logger";
 import { QueueWorkerProfile } from "@app/lib/types";
 import { CaType } from "@app/services/certificate-authority/certificate-authority-enums";
 import { ExternalPlatforms } from "@app/services/external-migration/external-migration-types";
+import { TCreateUserNotificationDTO } from "@app/services/notification/notification-types";
 import {
   TFailedIntegrationSyncEmailsPayload,
   TIntegrationSyncPayload,
@@ -67,7 +68,8 @@ export enum QueueName {
   SecretScanningV2 = "secret-scanning-v2",
   TelemetryAggregatedEvents = "telemetry-aggregated-events",
   DailyReminders = "daily-reminders",
-  SecretReminderMigration = "secret-reminder-migration"
+  SecretReminderMigration = "secret-reminder-migration",
+  UserNotification = "user-notification"
 }
 
 export enum QueueJobs {
@@ -109,7 +111,8 @@ export enum QueueJobs {
   PkiSubscriberDailyAutoRenewal = "pki-subscriber-daily-auto-renewal",
   TelemetryAggregatedEvents = "telemetry-aggregated-events",
   DailyReminders = "daily-reminders",
-  SecretReminderMigration = "secret-reminder-migration"
+  SecretReminderMigration = "secret-reminder-migration",
+  UserNotification = "user-notification-job"
 }
 
 export type TQueueJobTypes = {
@@ -313,6 +316,10 @@ export type TQueueJobTypes = {
     name: QueueJobs.TelemetryAggregatedEvents;
     payload: undefined;
   };
+  [QueueName.UserNotification]: {
+    name: QueueJobs.UserNotification;
+    payload: { notifications: TCreateUserNotificationDTO[] };
+  };
 };
 
 const SECRET_SCANNING_JOBS = [

backend/src/server/routes/index.ts

@@ -225,6 +225,11 @@ import { kmsServiceFactory } from "@app/services/kms/kms-service";
 import { microsoftTeamsIntegrationDALFactory } from "@app/services/microsoft-teams/microsoft-teams-integration-dal";
 import { microsoftTeamsServiceFactory } from "@app/services/microsoft-teams/microsoft-teams-service";
 import { projectMicrosoftTeamsConfigDALFactory } from "@app/services/microsoft-teams/project-microsoft-teams-config-dal";
+import { notificationQueueServiceFactory } from "@app/services/notification/notification-queue";
+import { notificationServiceFactory } from "@app/services/notification/notification-service";
+import { userNotificationDALFactory } from "@app/services/notification/user-notification-dal";
+import { offlineUsageReportDALFactory } from "@app/services/offline-usage-report/offline-usage-report-dal";
+import { offlineUsageReportServiceFactory } from "@app/services/offline-usage-report/offline-usage-report-service";
 import { incidentContactDALFactory } from "@app/services/org/incident-contacts-dal";
 import { orgBotDALFactory } from "@app/services/org/org-bot-dal";
 import { orgDALFactory } from "@app/services/org/org-dal";
@@ -298,8 +303,6 @@ import { TSmtpService } from "@app/services/smtp/smtp-service";
 import { invalidateCacheQueueFactory } from "@app/services/super-admin/invalidate-cache-queue";
 import { TSuperAdminDALFactory } from "@app/services/super-admin/super-admin-dal";
 import { getServerCfg, superAdminServiceFactory } from "@app/services/super-admin/super-admin-service";
-import { offlineUsageReportDALFactory } from "@app/services/offline-usage-report/offline-usage-report-dal";
-import { offlineUsageReportServiceFactory } from "@app/services/offline-usage-report/offline-usage-report-service";
 import { telemetryDALFactory } from "@app/services/telemetry/telemetry-dal";
 import { telemetryQueueServiceFactory } from "@app/services/telemetry/telemetry-queue";
 import { telemetryServiceFactory } from "@app/services/telemetry/telemetry-service";
@@ -429,6 +432,7 @@ export const registerRoutes = async (
   const telemetryDAL = telemetryDALFactory(db);
   const appConnectionDAL = appConnectionDALFactory(db);
   const secretSyncDAL = secretSyncDALFactory(db, folderDAL);
+  const userNotificationDAL = userNotificationDALFactory(db);
 
   // ee db layer ops
   const permissionDAL = permissionDALFactory(db);
@@ -581,6 +585,13 @@ export const registerRoutes = async (
     auditLogStreamService
   });
 
+  const notificationQueue = await notificationQueueServiceFactory({
+    userNotificationDAL,
+    queueService
+  });
+
+  const notificationService = notificationServiceFactory({ notificationQueue, userNotificationDAL });
+
   const auditLogService = auditLogServiceFactory({ auditLogDAL, permissionService, auditLogQueue });
   const secretApprovalPolicyService = secretApprovalPolicyServiceFactory({
     projectEnvDAL,
@@ -1414,7 +1425,8 @@ export const registerRoutes = async (
     kmsService,
     groupDAL,
     microsoftTeamsService,
-    projectMicrosoftTeamsConfigDAL
+    projectMicrosoftTeamsConfigDAL,
+    notificationService
   });
 
   const secretReplicationService = secretReplicationServiceFactory({
@@ -1718,7 +1730,8 @@ export const registerRoutes = async (
     secretVersionV2DAL: secretVersionV2BridgeDAL,
     identityUniversalAuthClientSecretDAL: identityUaClientSecretDAL,
     serviceTokenService,
-    orgService
+    orgService,
+    userNotificationDAL
   });
 
   const dailyReminderQueueService = dailyReminderQueueServiceFactory({
@@ -2143,6 +2156,8 @@ export const registerRoutes = async (
     kmip: kmipService,
     kmipOperation: kmipOperationService,
     gateway: gatewayService,
+    relay: relayService,
+    gatewayV2: gatewayV2Service,
     secretRotationV2: secretRotationV2Service,
     microsoftTeams: microsoftTeamsService,
     assumePrivileges: assumePrivilegeService,
@@ -2152,8 +2167,7 @@ export const registerRoutes = async (
     reminder: reminderService,
     bus: eventBusService,
     sse: sseService,
-    relay: relayService,
+    notification: notificationService
-    gatewayV2: gatewayV2Service
   });
 
   const cronJobs: CronJob[] = [];

backend/src/server/routes/v1/index.ts

@@ -33,6 +33,7 @@ import { registerIntegrationAuthRouter } from "./integration-auth-router";
 import { registerIntegrationRouter } from "./integration-router";
 import { registerInviteOrgRouter } from "./invite-org-router";
 import { registerMicrosoftTeamsRouter } from "./microsoft-teams-router";
+import { registerNotificationRouter } from "./notification-router";
 import { registerOrgAdminRouter } from "./org-admin-router";
 import { registerOrgRouter } from "./organization-router";
 import { registerPasswordRouter } from "./password-router";
@@ -83,6 +84,7 @@ export const registerV1Routes = async (server: FastifyZodProvider) => {
   await server.register(registerAdminRouter, { prefix: "/admin" });
   await server.register(registerOrgAdminRouter, { prefix: "/organization-admin" });
   await server.register(registerUserRouter, { prefix: "/user" });
+  await server.register(registerNotificationRouter, { prefix: "/notifications" });
   await server.register(registerInviteOrgRouter, { prefix: "/invite-org" });
   await server.register(registerUserActionRouter, { prefix: "/user-action" });
   await server.register(registerSecretImportRouter, { prefix: "/secret-imports" });

backend/src/server/routes/v1/notification-router.ts

@@ -0,0 +1,123 @@
+import { z } from "zod";
+
+import { UserNotificationsSchema } from "@app/db/schemas/user-notifications";
+import { UnauthorizedError } from "@app/lib/errors";
+import { readLimit, writeLimit } from "@app/server/config/rateLimiter";
+import { verifyAuth } from "@app/server/plugins/auth/verify-auth";
+import { AuthMode } from "@app/services/auth/auth-type";
+
+export const registerNotificationRouter = async (server: FastifyZodProvider) => {
+  server.route({
+    url: "/user",
+    config: {
+      rateLimit: readLimit
+    },
+    method: "GET",
+    schema: {
+      response: {
+        200: z.object({
+          notifications: UserNotificationsSchema.array()
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      if (req.auth.authMode !== AuthMode.JWT) {
+        throw new UnauthorizedError({ message: "This endpoint can only be accessed by users" });
+      }
+
+      const notifications = await server.services.notification.listUserNotifications({
+        userId: req.auth.userId,
+        orgId: req.auth.orgId
+      });
+
+      return { notifications };
+    }
+  });
+
+  server.route({
+    url: "/user/:notificationId",
+    config: {
+      rateLimit: writeLimit
+    },
+    method: "DELETE",
+    schema: {
+      params: z.object({
+        notificationId: z.string()
+      }),
+      response: {
+        200: z.object({
+          notification: UserNotificationsSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      if (req.auth.authMode !== AuthMode.JWT) {
+        throw new UnauthorizedError({ message: "This endpoint can only be accessed by users" });
+      }
+
+      const notification = await server.services.notification.deleteUserNotification({
+        notificationId: req.params.notificationId,
+        userId: req.auth.userId
+      });
+
+      return { notification };
+    }
+  });
+
+  server.route({
+    url: "/user/:notificationId",
+    config: {
+      rateLimit: writeLimit
+    },
+    method: "PATCH",
+    schema: {
+      params: z.object({
+        notificationId: z.string()
+      }),
+      body: z.object({
+        isRead: z.boolean()
+      }),
+      response: {
+        200: z.object({
+          notification: UserNotificationsSchema
+        })
+      }
+    },
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      if (req.auth.authMode !== AuthMode.JWT) {
+        throw new UnauthorizedError({ message: "This endpoint can only be accessed by users" });
+      }
+
+      const notification = await server.services.notification.updateUserNotification({
+        notificationId: req.params.notificationId,
+        userId: req.auth.userId,
+        ...req.body
+      });
+
+      return { notification };
+    }
+  });
+
+  // Mark all user notifications as read
+  server.route({
+    url: "/user/mark-as-read",
+    config: {
+      rateLimit: writeLimit
+    },
+    method: "POST",
+    onRequest: verifyAuth([AuthMode.JWT]),
+    handler: async (req) => {
+      if (req.auth.authMode !== AuthMode.JWT) {
+        throw new UnauthorizedError({ message: "This endpoint can only be accessed by users" });
+      }
+
+      await server.services.notification.markUserNotificationsAsRead({
+        userId: req.auth.userId,
+        orgId: req.auth.orgId
+      });
+    }
+  });
+};

backend/src/services/notification/notification-queue.ts

@@ -0,0 +1,39 @@
+import { QueueJobs, TQueueServiceFactory } from "@app/queue";
+
+import { TCreateUserNotificationDTO } from "./notification-types";
+import { TUserNotificationDALFactory } from "./user-notification-dal";
+
+type TNotificationQueueServiceFactoryDep = {
+  userNotificationDAL: Pick<TUserNotificationDALFactory, "batchInsert">;
+  queueService: TQueueServiceFactory;
+};
+
+export type TNotificationQueueServiceFactory = {
+  pushUserNotifications: (data: TCreateUserNotificationDTO[]) => Promise<void>;
+};
+
+export const notificationQueueServiceFactory = async ({
+  userNotificationDAL,
+  queueService
+}: TNotificationQueueServiceFactoryDep): Promise<TNotificationQueueServiceFactory> => {
+  const pushUserNotifications = async (data: TCreateUserNotificationDTO[]) => {
+    await queueService.queuePg(QueueJobs.UserNotification, { notifications: data });
+  };
+
+  await queueService.startPg(
+    QueueJobs.UserNotification,
+    async ([job]) => {
+      const { notifications } = job.data as { notifications: TCreateUserNotificationDTO[] };
+      await userNotificationDAL.batchInsert(notifications);
+    },
+    {
+      batchSize: 1,
+      workerCount: 2,
+      pollingIntervalSeconds: 1
+    }
+  );
+
+  return {
+    pushUserNotifications
+  };
+};

backend/src/services/notification/notification-service.ts

@@ -0,0 +1,81 @@
+import { NotFoundError, UnauthorizedError } from "@app/lib/errors";
+
+import { TNotificationQueueServiceFactory } from "./notification-queue";
+import { TCreateUserNotificationDTO } from "./notification-types";
+import { TUserNotificationDALFactory } from "./user-notification-dal";
+
+type TNotificationServiceFactoryDep = {
+  notificationQueue: TNotificationQueueServiceFactory;
+  userNotificationDAL: TUserNotificationDALFactory;
+};
+
+export type TNotificationServiceFactory = ReturnType<typeof notificationServiceFactory>;
+
+export const notificationServiceFactory = ({
+  notificationQueue,
+  userNotificationDAL
+}: TNotificationServiceFactoryDep) => {
+  const listUserNotifications = async ({ userId, orgId }: { userId: string; orgId: string }) => {
+    const now = new Date();
+    const threeMonthsAgo = new Date();
+    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
+
+    const notifications = await userNotificationDAL.find({
+      userId,
+      orgId,
+      startDate: threeMonthsAgo.toISOString(),
+      endDate: now.toISOString()
+    });
+
+    return notifications;
+  };
+
+  const createUserNotifications = async (data: TCreateUserNotificationDTO[]) => {
+    return notificationQueue.pushUserNotifications(data);
+  };
+
+  const deleteUserNotification = async ({ userId, notificationId }: { userId: string; notificationId: string }) => {
+    if (!userId) throw new UnauthorizedError({ message: "Invalid userId" });
+
+    const deletedNotifications = await userNotificationDAL.delete({ id: notificationId, userId });
+
+    if (deletedNotifications.length <= 0) throw new NotFoundError({ message: "Notification not found" });
+
+    return deletedNotifications[0];
+  };
+
+  const markUserNotificationsAsRead = async ({ userId, orgId }: { userId: string; orgId: string }) => {
+    await userNotificationDAL.markAllNotificationsAsRead(userId, orgId);
+  };
+
+  const updateUserNotification = async ({
+    userId,
+    notificationId,
+    isRead
+  }: {
+    userId: string;
+    notificationId: string;
+    isRead: boolean;
+  }) => {
+    const [updatedNotification] = await userNotificationDAL.update(
+      {
+        id: notificationId,
+        userId
+      },
+      {
+        isRead
+      }
+    );
+
+    if (!updatedNotification) throw new NotFoundError({ message: "Notification not found" });
+    return updatedNotification;
+  };
+
+  return {
+    listUserNotifications,
+    createUserNotifications,
+    deleteUserNotification,
+    markUserNotificationsAsRead,
+    updateUserNotification
+  };
+};

backend/src/services/notification/notification-types.ts

@@ -0,0 +1,15 @@
+export enum NotificationType {
+  ACCESS_APPROVAL_REQUEST = "access-approval-request",
+  ACCESS_APPROVAL_REQUEST_UPDATED = "access-approval-request-updated"
+}
+
+export interface TCreateUserNotificationDTO {
+  userId: string;
+  // Adding an orgId will make the notification only show up when a user is in a certain org. Otherwise, it shows up in all orgs.
+  // Keep in mind that org-scoped links for a notification will break if orgId is missing and the user is in the wrong org
+  orgId?: string;
+  type: NotificationType;
+  title: string;
+  body?: string;
+  link?: string;
+}

backend/src/services/notification/user-notification-dal.ts

@@ -0,0 +1,130 @@
+import knex from "knex";
+
+import { TDbClient } from "@app/db";
+import { TableName } from "@app/db/schemas";
+import { DatabaseError, GatewayTimeoutError } from "@app/lib/errors";
+import { ormify, selectAllTableCols } from "@app/lib/knex";
+import { logger } from "@app/lib/logger";
+import { QueueName } from "@app/queue";
+
+export type TUserNotificationDALFactory = ReturnType<typeof userNotificationDALFactory>;
+
+const QUERY_TIMEOUT_MS = 10 * 60 * 1000; // 10 minutes
+const PRUNE_BATCH_SIZE = 10000;
+const MAX_RETRY_ON_FAILURE = 3;
+
+export const userNotificationDALFactory = (db: TDbClient) => {
+  const notificationOrm = ormify(db, TableName.UserNotifications);
+
+  const find = async (
+    {
+      userId,
+      orgId,
+      startDate,
+      endDate,
+      limit = 1000,
+      offset = 0
+    }: {
+      userId: string;
+      orgId: string;
+      startDate: string;
+      endDate: string;
+      limit?: number;
+      offset?: number;
+    },
+    tx?: knex.Knex
+  ) => {
+    try {
+      const docs = await (tx || db.replicaNode())(TableName.UserNotifications)
+        .where(`${TableName.UserNotifications}.userId`, userId)
+        .andWhere((qb) => {
+          void qb
+            .where(`${TableName.UserNotifications}.orgId`, orgId)
+            .orWhereNull(`${TableName.UserNotifications}.orgId`);
+        })
+        .whereRaw(`"${TableName.UserNotifications}"."createdAt" >= ?::timestamptz`, [startDate])
+        .andWhereRaw(`"${TableName.UserNotifications}"."createdAt" < ?::timestamptz`, [endDate])
+        .select(selectAllTableCols(TableName.UserNotifications))
+        .limit(limit)
+        .offset(offset)
+        .orderBy(`${TableName.UserNotifications}.createdAt`, "desc")
+        .timeout(1000 * 120); // 2 minutes timeout
+
+      return docs;
+    } catch (error) {
+      if (error instanceof knex.KnexTimeoutError) {
+        throw new GatewayTimeoutError({
+          error,
+          message: "Failed to fetch notifications due to timeout."
+        });
+      }
+
+      throw new DatabaseError({ error });
+    }
+  };
+
+  // delete all notifications older than 3 months
+  const pruneNotifications = async () => {
+    const threeMonthsAgo = new Date();
+    threeMonthsAgo.setMonth(threeMonthsAgo.getMonth() - 3);
+    let deletedNotificationIds: { id: string }[] = [];
+    let numberOfRetryOnFailure = 0;
+
+    logger.info(`${QueueName.DailyResourceCleanUp}: prune notifications started`);
+    do {
+      try {
+        // eslint-disable-next-line no-await-in-loop
+        deletedNotificationIds = await db.transaction(async (trx) => {
+          await trx.raw(`SET statement_timeout = ${QUERY_TIMEOUT_MS}`);
+
+          const findExpiredNotificationSubQuery = trx(TableName.UserNotifications)
+            .where("createdAt", "<", threeMonthsAgo)
+            .orderBy(`${TableName.UserNotifications}.createdAt`, "desc")
+            .select("id")
+            .limit(PRUNE_BATCH_SIZE);
+
+          // eslint-disable-next-line no-await-in-loop
+          const results = await trx(TableName.UserNotifications)
+            .whereIn("id", findExpiredNotificationSubQuery)
+            .del()
+            .returning("id");
+
+          return results;
+        });
+
+        numberOfRetryOnFailure = 0;
+      } catch (error) {
+        numberOfRetryOnFailure += 1;
+        deletedNotificationIds = [];
+        logger.error(error, "Failed to delete notification on pruning. Retrying...");
+      } finally {
+        // eslint-disable-next-line no-await-in-loop
+        await new Promise((resolve) => {
+          setTimeout(resolve, 10);
+        });
+      }
+    } while (
+      deletedNotificationIds.length > 0 ||
+      (numberOfRetryOnFailure > 0 && numberOfRetryOnFailure < MAX_RETRY_ON_FAILURE)
+    );
+
+    if (numberOfRetryOnFailure >= MAX_RETRY_ON_FAILURE) {
+      logger.error(
+        `${QueueName.DailyResourceCleanUp}: prune notifications completed with persistent errors after ${MAX_RETRY_ON_FAILURE} retries. Some notifications might not have been pruned.`
+      );
+    } else {
+      logger.info(`${QueueName.DailyResourceCleanUp}: prune notifications completed`);
+    }
+  };
+
+  const markAllNotificationsAsRead = async (userId: string, orgId: string) => {
+    await db(TableName.UserNotifications)
+      .where({ userId })
+      .andWhere((qb) => {
+        void qb.where({ orgId }).orWhereNull("orgId");
+      })
+      .update({ isRead: true });
+  };
+
+  return { ...notificationOrm, pruneNotifications, find, markAllNotificationsAsRead };
+};

backend/src/services/resource-cleanup/resource-cleanup-queue.ts

@@ -3,6 +3,7 @@ import { TSnapshotDALFactory } from "@app/ee/services/secret-snapshot/snapshot-d
 import { getConfig } from "@app/lib/config/env";
 import { logger } from "@app/lib/logger";
 import { QueueJobs, QueueName, TQueueServiceFactory } from "@app/queue";
+import { TUserNotificationDALFactory } from "@app/services/notification/user-notification-dal";
 
 import { TIdentityAccessTokenDALFactory } from "../identity-access-token/identity-access-token-dal";
 import { TIdentityUaClientSecretDALFactory } from "../identity-ua/identity-ua-client-secret-dal";
@@ -25,6 +26,7 @@ type TDailyResourceCleanUpQueueServiceFactoryDep = {
   serviceTokenService: Pick<TServiceTokenServiceFactory, "notifyExpiringTokens">;
   queueService: TQueueServiceFactory;
   orgService: TOrgServiceFactory;
+  userNotificationDAL: Pick<TUserNotificationDALFactory, "pruneNotifications">;
 };
 
 export type TDailyResourceCleanUpQueueServiceFactory = ReturnType<typeof dailyResourceCleanUpQueueServiceFactory>;
@@ -40,7 +42,8 @@ export const dailyResourceCleanUpQueueServiceFactory = ({
   secretVersionV2DAL,
   identityUniversalAuthClientSecretDAL,
   serviceTokenService,
-  orgService
+  orgService,
+  userNotificationDAL
 }: TDailyResourceCleanUpQueueServiceFactoryDep) => {
   const appCfg = getConfig();
 
@@ -78,6 +81,7 @@ export const dailyResourceCleanUpQueueServiceFactory = ({
           await serviceTokenService.notifyExpiringTokens();
           await orgService.notifyInvitedUsers();
           await auditLogDAL.pruneAuditLog();
+          await userNotificationDAL.pruneNotifications();
           logger.info(`${QueueName.DailyResourceCleanUp}: queue task completed`);
         } catch (error) {
           logger.error(error, `${QueueName.DailyResourceCleanUp}: resource cleanup failed`);

frontend/src/components/v2/ContentLoader/ContentLoader.tsx

@@ -11,9 +11,10 @@ type Props = {
   text?: string | string[];
   frequency?: number;
   className?: string;
+  lottieClassName?: string;
 };
 
-export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
+export const ContentLoader = ({ text, frequency = 2000, className, lottieClassName }: Props) => {
   const [pos, setPos] = useState(0);
   const isTextArray = Array.isArray(text);
   useEffect(() => {
@@ -33,7 +34,11 @@ export const ContentLoader = ({ text, frequency = 2000, className }: Props) => {
         className
       )}
     >
-      <Lottie isAutoPlay icon="infisical_loading" className="h-32 w-32" />
+      <Lottie
+        isAutoPlay
+        icon="infisical_loading"
+        className={twMerge("h-32 w-32", lottieClassName)}
+      />
       {text && isTextArray && (
         <AnimatePresence mode="wait">
           <motion.div

frontend/src/components/v2/Tooltip/Tooltip.tsx

@@ -16,6 +16,7 @@ export type TooltipProps = Omit<TooltipPrimitive.TooltipContentProps, "open" | "
   center?: boolean;
   size?: "sm" | "md";
   rootProps?: RootProps;
+  delayDuration?: number;
 };
 
 export const Tooltip = ({
@@ -31,12 +32,13 @@ export const Tooltip = ({
   position = "top",
   size = "md",
   rootProps,
+  delayDuration = 50,
   ...props
 }: TooltipProps) =>
   // just render children if tooltip content is empty
   content ? (
     <TooltipPrimitive.Root
-      delayDuration={50}
+      delayDuration={delayDuration}
       {...rootProps}
       open={isOpen}
       defaultOpen={defaultOpen}

frontend/src/hooks/api/notifications/mutations.tsx

@@ -0,0 +1,70 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { useOrganization } from "@app/context";
+
+import { notificationKeys } from "./queries";
+import { TUserNotification } from "./types";
+
+export const useMarkAllNotificationsAsRead = () => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg.id || "";
+
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async () => {
+      await apiRequest.post("/api/v1/notifications/user/mark-as-read");
+    },
+    onSuccess: () => {
+      queryClient.setQueryData<TUserNotification[]>(notificationKeys.list(orgId), (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.map((notification) => ({
+          ...notification,
+          isRead: true
+        }));
+      });
+    }
+  });
+};
+
+export const useUpdateNotification = () => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg.id || "";
+
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async ({ notificationId, isRead }: { notificationId: string; isRead: boolean }) => {
+      const { data } = await apiRequest.patch<{ notification: TUserNotification }>(
+        `/api/v1/notifications/user/${notificationId}`,
+        { isRead }
+      );
+      return data.notification;
+    },
+    onSuccess: (updatedNotification) => {
+      queryClient.setQueryData<TUserNotification[]>(notificationKeys.list(orgId), (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.map((notification) =>
+          notification.id === updatedNotification.id ? updatedNotification : notification
+        );
+      });
+    }
+  });
+};
+
+export const useDeleteNotification = () => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg.id || "";
+
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (notificationId: string) => {
+      await apiRequest.delete(`/api/v1/notifications/user/${notificationId}`);
+    },
+    onSuccess: (_, notificationId) => {
+      queryClient.setQueryData<TUserNotification[]>(notificationKeys.list(orgId), (oldData) => {
+        if (!oldData) return oldData;
+        return oldData.filter((notification) => notification.id !== notificationId);
+      });
+    }
+  });
+};

frontend/src/hooks/api/notifications/queries.tsx

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { apiRequest } from "@app/config/request";
+import { useOrganization } from "@app/context";
+
+import { TUserNotification } from "./types";
+
+export const notificationKeys = {
+  all: ["notifications"] as const,
+  list: (orgId: string) => [...notificationKeys.all, "list", { orgId }] as const
+};
+
+export const useGetMyNotifications = () => {
+  const { currentOrg } = useOrganization();
+  const orgId = currentOrg.id || "";
+
+  return useQuery({
+    queryKey: notificationKeys.list(orgId),
+    queryFn: async () => {
+      const {
+        data: { notifications }
+      } = await apiRequest.get<{ notifications: TUserNotification[] }>(
+        "/api/v1/notifications/user"
+      );
+      return notifications;
+    },
+    refetchInterval: 30 * 1000 // Poll every 30 seconds
+  });
+};

frontend/src/hooks/api/notifications/types.ts

@@ -0,0 +1,10 @@
+export interface TUserNotification {
+  id: string;
+  userId: string;
+  type: string;
+  title: string;
+  body?: string | null;
+  link?: string | null;
+  isRead: boolean;
+  createdAt: string;
+}

frontend/src/layouts/OrganizationLayout/components/NavBar/Navbar.tsx

@@ -48,6 +48,7 @@ import { AuthMethod } from "@app/hooks/api/users/types";
 import { navigateUserToOrg } from "@app/pages/auth/LoginPage/Login.utils";
 
 import { ServerAdminsPanel } from "../ServerAdminsPanel/ServerAdminsPanel";
+import { NotificationDropdown } from "./NotificationDropdown";
 
 const getPlan = (subscription: SubscriptionPlan) => {
   if (subscription.groups) return "Enterprise";
@@ -118,6 +119,7 @@ export const Navbar = () => {
   const [shouldShowMfa, toggleShowMfa] = useToggle(false);
   const router = useRouter();
   const queryClient = useQueryClient();
+
   const location = useLocation();
   const matches = useRouterState({ select: (s) => s.matches.at(-1)?.context });
   const breadcrumbs = matches && "breadcrumbs" in matches ? matches.breadcrumbs : undefined;
@@ -304,7 +306,7 @@ export const Navbar = () => {
       <div className="flex-grow" />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger>
-          <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2 py-1 hover:bg-mineshaft-600">
+          <div className="rounded-l-md border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
             <FontAwesomeIcon icon={faCircleQuestion} className="text-mineshaft-200" />
           </div>
         </DropdownMenuTrigger>
@@ -358,9 +360,10 @@ export const Navbar = () => {
           )}
         </DropdownMenuContent>
       </DropdownMenu>
+      <NotificationDropdown />
       <DropdownMenu modal={false}>
         <DropdownMenuTrigger asChild>
-          <div className="rounded-r-md border border-mineshaft-500 px-2 py-1 hover:bg-mineshaft-600">
+          <div className="rounded-r-md border border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
             <FontAwesomeIcon icon={faUserCircle} className="text-mineshaft-200" />
           </div>
         </DropdownMenuTrigger>

frontend/src/layouts/OrganizationLayout/components/NavBar/Notification.tsx

@@ -0,0 +1,60 @@
+import Markdown from "react-markdown";
+import { faCircle, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { formatDistance } from "date-fns";
+import { twMerge } from "tailwind-merge";
+
+import { IconButton, Tooltip } from "@app/components/v2";
+import { TUserNotification } from "@app/hooks/api/notifications/types";
+
+type Props = {
+  notification: TUserNotification;
+  onDelete: (notificationId: string) => void;
+};
+
+export const Notification = ({ notification, onDelete }: Props) => {
+  return (
+    <div
+      className={twMerge(
+        "group relative flex cursor-pointer items-start border-b border-mineshaft-600 p-3 transition-colors",
+        notification.link ? "hover:bg-mineshaft-700" : "cursor-default",
+        !notification.isRead && "bg-mineshaft-800"
+      )}
+    >
+      <div className="flex w-full min-w-0 flex-col">
+        <div className="flex gap-2">
+          {!notification.isRead && (
+            <FontAwesomeIcon icon={faCircle} className="mt-1.5 size-2 text-yellow-400" />
+          )}
+          <Tooltip content={<Markdown>{notification.title}</Markdown>} delayDuration={300}>
+            <span className="overflow-hidden text-ellipsis whitespace-nowrap text-sm font-medium leading-5 text-mineshaft-100">
+              <Markdown components={{ p: "span" }}>{notification.title}</Markdown>
+            </span>
+          </Tooltip>
+          <span className="ml-auto mt-px whitespace-nowrap text-xs text-mineshaft-400">
+            {formatDistance(notification.createdAt, new Date())} ago
+          </span>
+        </div>
+        {notification.body && (
+          <span className="max-w-[350px] text-xs text-mineshaft-300">
+            <Markdown>{notification.body}</Markdown>
+          </span>
+        )}
+      </div>
+      <div className="flex w-0 flex-shrink-0 justify-end opacity-0 transition-all group-hover:w-[24px] group-hover:opacity-100">
+        <IconButton
+          ariaLabel="delete"
+          variant="plain"
+          colorSchema="danger"
+          size="sm"
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(notification.id);
+          }}
+        >
+          <FontAwesomeIcon icon={faTrash} />
+        </IconButton>
+      </div>
+    </div>
+  );
+};

frontend/src/layouts/OrganizationLayout/components/NavBar/NotificationDropdown.tsx

@@ -0,0 +1,116 @@
+import { useMemo } from "react";
+import { faBell } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useRouter } from "@tanstack/react-router";
+
+import {
+  ContentLoader,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger
+} from "@app/components/v2";
+import {
+  useDeleteNotification,
+  useMarkAllNotificationsAsRead,
+  useUpdateNotification
+} from "@app/hooks/api/notifications/mutations";
+import { useGetMyNotifications } from "@app/hooks/api/notifications/queries";
+
+import { Notification } from "./Notification";
+
+export const NotificationDropdown = () => {
+  const router = useRouter();
+
+  const { data: notifications, isLoading } = useGetMyNotifications();
+  const { mutate: markAllAsRead } = useMarkAllNotificationsAsRead();
+  const { mutate: updateNotification } = useUpdateNotification();
+  const { mutate: deleteNotification } = useDeleteNotification();
+
+  const unreadCount = useMemo(
+    () => notifications?.filter((n) => !n.isRead).length || 0,
+    [notifications]
+  );
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger>
+        <div className="relative border border-r-0 border-mineshaft-500 px-2.5 py-1 hover:bg-mineshaft-600">
+          <FontAwesomeIcon icon={faBell} className="text-mineshaft-200" />
+          {unreadCount > 0 && (
+            <span className="absolute -right-1 -top-1 flex h-4 min-w-4 items-center justify-center rounded-full bg-yellow-400 px-1 text-[10px] text-black">
+              {unreadCount > 99 ? "99+" : unreadCount}
+            </span>
+          )}
+        </div>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        side="bottom"
+        className="mt-3 flex h-[550px] w-[400px] overflow-hidden rounded-lg"
+      >
+        <div className="flex w-full flex-col">
+          <div className="flex items-center justify-between border-b border-mineshaft-500 px-3 py-2">
+            <span className="font-semibold text-white">Notifications</span>
+            <button
+              type="button"
+              className="text-xs font-medium text-mineshaft-300 hover:text-primary-400 disabled:pointer-events-none disabled:opacity-50"
+              onClick={(e) => {
+                e.preventDefault();
+                markAllAsRead();
+              }}
+              disabled={unreadCount === 0}
+            >
+              Mark all as read
+            </button>
+          </div>
+          <div className="flex h-full w-full overflow-auto">
+            {isLoading && (
+              <div className="flex h-full w-full items-center justify-center">
+                <ContentLoader className="pointer-events-none" lottieClassName="size-10" />
+              </div>
+            )}
+            {!isLoading && notifications?.length === 0 && (
+              <div className="flex h-full w-full flex-col items-center justify-center">
+                <FontAwesomeIcon icon={faBell} size="3x" className="text-mineshaft-400" />
+                <span className="mt-4 text-sm text-mineshaft-300">No new notifications</span>
+                <span className="text-xs text-mineshaft-400">
+                  We&apos;ll let you know when something important happens.
+                </span>
+              </div>
+            )}
+            {!isLoading && notifications && notifications.length > 0 && (
+              <div className="flex w-full flex-col">
+                {notifications.map((notification) => (
+                  <div
+                    role="button"
+                    tabIndex={0}
+                    key={notification.id}
+                    onClick={() => {
+                      if (!notification.isRead) {
+                        updateNotification({ notificationId: notification.id, isRead: true });
+                      }
+                      if (notification.link) {
+                        router.navigate({ to: notification.link });
+                      }
+                    }}
+                    onKeyDown={(e) => {
+                      if (e.key !== "Enter") return;
+                      if (!notification.isRead) {
+                        updateNotification({ notificationId: notification.id, isRead: true });
+                      }
+                      if (notification.link) {
+                        router.navigate({ to: notification.link });
+                      }
+                    }}
+                  >
+                    <Notification notification={notification} onDelete={deleteNotification} />
+                  </div>
+                ))}
+              </div>
+            )}
+          </div>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};