feat(ui): enhance notification summary block with priority counts and layout options

Author: michnowak

packages/blocks/notification-summary/src/api-harmonization/notification-summary.mapper.ts

@@ -1,13 +1,65 @@
-import { CMS } from '@o2s/configs.integrations';
+import { CMS, Notifications } from '@o2s/configs.integrations';
 
 import { NotificationSummaryBlock } from './notification-summary.model';
 
 export const mapNotificationSummary = (
     cms: CMS.Model.NotificationSummaryBlock.NotificationSummaryBlock,
+    notifications: Notifications.Model.Notifications,
     _locale: string,
 ): NotificationSummaryBlock => {
-    return {
+    const priorityCounts = notifications.data.reduce(
+        (acc, notification) => {
+            acc[notification.priority] = (acc[notification.priority] || 0) + 1;
+            return acc;
+        },
+        {} as Record<'LOW' | 'MEDIUM' | 'HIGH' | 'CRITICAL', number>,
+    );
+
+    const result: NotificationSummaryBlock = {
         __typename: 'NotificationSummaryBlock',
         id: cms.id,
+        layout: cms.layout,
     };
+
+    if (cms.high) {
+        result.high = {
+            title: cms.high.title,
+            icon: cms.high.icon,
+            value: priorityCounts.HIGH || 0,
+            description: cms.high.message,
+            color: 'text-destructive',
+        };
+    }
+
+    if (cms.medium) {
+        result.medium = {
+            title: cms.medium.title,
+            icon: cms.medium.icon,
+            value: priorityCounts.MEDIUM || 0,
+            description: cms.medium.message,
+            color: 'text-badge-secondary-background',
+        };
+    }
+
+    if (cms.low) {
+        result.low = {
+            title: cms.low.title,
+            icon: cms.low.icon,
+            value: priorityCounts.LOW || 0,
+            description: cms.low.message,
+            color: 'text-muted-foreground',
+        };
+    }
+
+    if (cms.critical) {
+        result.critical = {
+            title: cms.critical.title,
+            icon: cms.critical.icon,
+            value: priorityCounts.CRITICAL || 0,
+            description: cms.critical.message,
+            color: 'text-destructive',
+        };
+    }
+
+    return result;
 };

packages/blocks/notification-summary/src/api-harmonization/notification-summary.model.ts

@@ -1,7 +1,34 @@
-import { CMS } from '@o2s/configs.integrations';
-
 import { Models } from '@o2s/utils.api-harmonization';
 
 export class NotificationSummaryBlock extends Models.Block.Block {
     __typename!: 'NotificationSummaryBlock';
+    layout?: 'vertical' | 'horizontal';
+    high?: {
+        title: string;
+        icon?: string;
+        value: number;
+        description?: string;
+        color?: string;
+    };
+    medium?: {
+        title: string;
+        icon?: string;
+        value: number;
+        description?: string;
+        color?: string;
+    };
+    low?: {
+        title: string;
+        icon?: string;
+        value: number;
+        description?: string;
+        color?: string;
+    };
+    critical?: {
+        title: string;
+        icon?: string;
+        value: number;
+        description?: string;
+        color?: string;
+    };
 }

packages/blocks/notification-summary/src/api-harmonization/notification-summary.module.ts

@@ -1,5 +1,5 @@
 import { DynamicModule, Module } from '@nestjs/common';
-import { CMS } from '@o2s/configs.integrations';
+import { CMS, Notifications } from '@o2s/configs.integrations';
 
 import * as Framework from '@o2s/framework/modules';
 
@@ -17,6 +17,10 @@ export class NotificationSummaryBlockModule {
                     provide: CMS.Service,
                     useExisting: Framework.CMS.Service,
                 },
+                {
+                    provide: Notifications.Service,
+                    useExisting: Framework.Notifications.Service,
+                },
             ],
             controllers: [NotificationSummaryController],
             exports: [NotificationSummaryService],

packages/blocks/notification-summary/src/api-harmonization/notification-summary.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@nestjs/common';
-import { CMS } from '@o2s/configs.integrations';
+import { CMS, Notifications } from '@o2s/configs.integrations';
 import { Observable, forkJoin, map } from 'rxjs';
 
 import { Models } from '@o2s/utils.api-harmonization';
@@ -10,14 +10,24 @@ import { GetNotificationSummaryBlockQuery } from './notification-summary.request
 
 @Injectable()
 export class NotificationSummaryService {
-    constructor(private readonly cmsService: CMS.Service) {}
+    constructor(
+        private readonly cmsService: CMS.Service,
+        private readonly notificationService: Notifications.Service,
+    ) {}
 
     getNotificationSummaryBlock(
         query: GetNotificationSummaryBlockQuery,
         headers: Models.Headers.AppHeaders,
     ): Observable<NotificationSummaryBlock> {
         const cms = this.cmsService.getNotificationSummaryBlock({ ...query, locale: headers['x-locale'] });
+        const notifications = this.notificationService.getNotificationList({
+            limit: 1000,
+            offset: 0,
+            locale: headers['x-locale'],
+        });
 
-        return forkJoin([cms]).pipe(map(([cms]) => mapNotificationSummary(cms, headers['x-locale'])));
+        return forkJoin([notifications, cms]).pipe(
+            map(([notifications, cms]) => mapNotificationSummary(cms, notifications, headers['x-locale'])),
+        );
     }
 }

packages/blocks/notification-summary/src/frontend/NotificationSummary.client.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/nextjs';
+
+import { NotificationSummaryPure } from './NotificationSummary.client';
+
+const meta = {
+    title: 'Blocks/NotificationSummary',
+    component: NotificationSummaryPure,
+} satisfies Meta<typeof NotificationSummaryPure>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        routing: {
+            locales: ['en', 'de', 'pl'],
+            defaultLocale: 'en',
+            pathnames: {
+                '/login': {
+                    en: '/sign-in',
+                    de: '/einloggen',
+                    pl: '/logowanie',
+                },
+            },
+        },
+        __typename: 'NotificationSummaryBlock',
+        id: 'notification-summary-1',
+        layout: 'horizontal',
+        high: {
+            title: 'High Priority',
+            icon: 'AlertCircle',
+            value: 12,
+            description: 'High priority notifications',
+            color: 'text-destructive',
+        },
+        medium: {
+            title: 'Medium Priority',
+            icon: 'Info',
+            value: 5,
+            description: 'Medium priority notifications',
+            color: 'text-badge-secondary-background',
+        },
+        accessToken:
+            'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoiSmFuZSBEb2UiLCJlbWFpbCI6ImphbmVAZXhhbXBsZS5jb20iLCJyb2xlIjoic2VsZnNlcnZpY2Vfb3JnX2FkbWluIiwiY3VzdG9tZXIiOnsiaWQiOiJjdXN0LTAwMSIsInJvbGVzIjpbInNlbGZzZXJ2aWNlX29yZ191c2VyIiwic2VsZnNlcnZpY2Vfb3JnX3VzZXIiLCJzZWxmc2VydmljZV9vcmdfYWRtaW4iXSwibmFtZSI6IkFjbWUgQ29ycG9yYXRpb24ifSWiaWF0IjoxNzU2MzI0NTg0fQ.wFAXi1DbgN67z8xQcqZdGz9YeAolbim3lecVIzV2rv0',
+        locale: 'en',
+    },
+};
+
+export const Vertical: Story = {
+    args: {
+        ...Default.args,
+        layout: 'vertical',
+    },
+};
+
+export const AllPriorities: Story = {
+    args: {
+        ...Default.args,
+        critical: {
+            title: 'Critical Priority',
+            icon: 'AlertTriangle',
+            value: 3,
+            description: 'Critical priority notifications',
+            color: 'text-destructive',
+        },
+        high: {
+            title: 'High Priority',
+            icon: 'AlertCircle',
+            value: 12,
+            description: 'High priority notifications',
+            color: 'text-destructive',
+        },
+        medium: {
+            title: 'Medium Priority',
+            icon: 'Info',
+            value: 5,
+            description: 'Medium priority notifications',
+            color: 'text-badge-secondary-background',
+        },
+        low: {
+            title: 'Low Priority',
+            icon: 'Bell',
+            value: 8,
+            description: 'Low priority notifications',
+            color: 'text-muted-foreground',
+        },
+    },
+};
+
+export const SinglePriority: Story = {
+    args: {
+        ...Default.args,
+        high: {
+            title: 'High Priority',
+            icon: 'AlertCircle',
+            value: 12,
+            description: 'High priority notifications',
+            color: 'text-destructive',
+        },
+        medium: undefined,
+    },
+};

packages/blocks/notification-summary/src/frontend/NotificationSummary.client.tsx

@@ -1,21 +1,55 @@
 'use client';
 
-import { createNavigation } from 'next-intl/navigation';
 import React from 'react';
 
+import { cn } from '@o2s/ui/lib/utils';
+
+import { InfoCard } from '@o2s/ui/components/Cards/InfoCard';
+import { DynamicIcon, DynamicIconProps } from '@o2s/ui/components/DynamicIcon';
+import { RichText } from '@o2s/ui/components/RichText';
+
+import { Typography } from '@o2s/ui/elements/typography';
+
 import { NotificationSummaryPureProps } from './NotificationSummary.types';
 
-export const NotificationSummaryPure: React.FC<NotificationSummaryPureProps> = ({
-    locale,
-    accessToken,
-    routing,
-    ...component
-}) => {
-    const { Link: LinkComponent } = createNavigation(routing);
+export const NotificationSummaryPure: React.FC<NotificationSummaryPureProps> = ({ ...component }) => {
+    const { high, medium, low, critical, layout } = component;
+
+    const isVertical = layout === 'vertical';
+    const containerClass = cn('w-full gap-6', isVertical ? 'flex flex-col' : 'grid grid-cols-1 md:grid-cols-2');
+
+    const priorityCards = [
+        { key: 'critical' as const, data: critical },
+        { key: 'high' as const, data: high },
+        { key: 'medium' as const, data: medium },
+        { key: 'low' as const, data: low },
+    ].filter(({ data }) => data !== undefined);
 
     return (
-        <div className="w-full flex flex-col gap-4">
-            {component.__typename}: {component.id}
+        <div className={containerClass}>
+            {priorityCards.map(({ key, data }) => (
+                <InfoCard
+                    key={key}
+                    title={data!.title}
+                    value={
+                        <Typography variant="highlightedBig" className={data!.color}>
+                            {data!.value}
+                        </Typography>
+                    }
+                    description={
+                        data!.description ? (
+                            <div className="line-clamp-3">
+                                <RichText content={data!.description} className={data!.color} />
+                            </div>
+                        ) : undefined
+                    }
+                    icon={
+                        data!.icon ? (
+                            <DynamicIcon name={data!.icon as DynamicIconProps['name']} className={data!.color} />
+                        ) : undefined
+                    }
+                />
+            ))}
         </div>
     );
 };

packages/framework/src/modules/cms/models/blocks/notification-summary.model.ts

@@ -1,5 +1,10 @@
-import { Block } from '@/utils/models';
+import { Block, InfoCard } from '@/utils/models';
 
 export class NotificationSummaryBlock extends Block.Block {
     title?: string;
+    high?: InfoCard.InfoCard;
+    medium?: InfoCard.InfoCard;
+    low?: InfoCard.InfoCard;
+    critical?: InfoCard.InfoCard;
+    layout?: 'vertical' | 'horizontal';
 }