Squashed commit of the following:

commit 742f250
Author: imdeaconu <imdeaconu@gmail.com>
Date:   Wed Sep 11 19:54:55 2024 +0300

    add read notification checkmark

commit ea11fa0
Author: imdeaconu <imdeaconu@gmail.com>
Date:   Wed Sep 11 19:54:30 2024 +0300

    add read notification column

Author: imdeaconu

web/src/features/monitoring-observers/components/PushMessageDetails/PushMessageDetails.tsx

@@ -7,12 +7,13 @@ import { DateTimeFormat } from '@/common/formats';
 import type { FunctionComponent } from '@/common/types';
 import { NavigateBack } from '@/components/NavigateBack/NavigateBack';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
-import { pushMessageDetailsQueryOptions ,Route} from '@/routes/monitoring-observers/push-messages.$id_.view';
+import { pushMessageDetailsQueryOptions, Route } from '@/routes/monitoring-observers/push-messages.$id_.view';
+import { CheckIcon } from '@heroicons/react/24/outline';
 import { useSuspenseQuery } from '@tanstack/react-query';
 
 export default function PushMessageDetails(): FunctionComponent {
-  const { id } = Route.useParams()
-  const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
+  const { id } = Route.useParams();
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: pushMessage } = useSuspenseQuery(pushMessageDetailsQueryOptions(currentElectionRoundId, id));
 
   return (
@@ -47,9 +48,14 @@ export default function PushMessageDetails(): FunctionComponent {
             <div className='flex flex-col gap-1'>
               <p className='font-bold text-gray-700'>Total targeted observers {pushMessage?.receivers?.length ?? 0}</p>
               {pushMessage?.receivers?.map((receiver) => (
-                <p className='font-normal text-gray-900' key={receiver.id}>
-                  {receiver.name}
-                </p>
+                <div className='flex gap-1'>
+                  <p className='font-normal text-gray-900' key={receiver.id}>
+                    {receiver.name}
+                  </p>
+                  {receiver.hasReadNotification && (
+                    <CheckIcon title='Notification read' className='h-4 w-4 self-center' color='#147638' />
+                  )}
+                </div>
               ))}
             </div>
           </div>

web/src/features/monitoring-observers/components/PushMessages/PushMessages.tsx

@@ -3,19 +3,19 @@ import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { DataTableColumnHeader } from '@/components/ui/DataTable/DataTableColumnHeader';
 import { QueryParamsDataTable } from '@/components/ui/DataTable/QueryParamsDataTable';
 import { Separator } from '@/components/ui/separator';
+import { ChevronRightIcon } from '@heroicons/react/24/outline';
 import { Link, useNavigate } from '@tanstack/react-router';
 import type { CellContext, ColumnDef } from '@tanstack/react-table';
 import { Plus } from 'lucide-react';
-import { ChevronRightIcon } from '@heroicons/react/24/outline';
 
-import { usePushMessages } from '../../hooks/push-messages-queries';
-import { format } from 'date-fns';
-import type { PushMessageModel } from '../../models/push-message';
-import { useCallback } from 'react';
 import { DateTimeFormat } from '@/common/formats';
-import type { TableCellProps } from '@/components/ui/DataTable/DataTable';
 import type { FunctionComponent } from '@/common/types';
+import type { TableCellProps } from '@/components/ui/DataTable/DataTable';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
+import { format } from 'date-fns';
+import { useCallback } from 'react';
+import { usePushMessages } from '../../hooks/push-messages-queries';
+import type { PushMessageModel } from '../../models/push-message';
 
 function PushMessages(): FunctionComponent {
   const pushMessagesColDefs: ColumnDef<PushMessageModel>[] = [
@@ -24,67 +24,37 @@ function PushMessages(): FunctionComponent {
       accessorKey: 'sentAt',
       enableSorting: false,
       enableGlobalFilter: false,
-      cell: ({ row }) => <div>{format(row.original.sentAt, DateTimeFormat)}</div>
+      cell: ({ row }) => <div>{format(row.original.sentAt, DateTimeFormat)}</div>,
     },
     {
       header: ({ column }) => <DataTableColumnHeader title='Sender name' column={column} />,
       accessorKey: 'sender',
       enableSorting: false,
       enableGlobalFilter: false,
-      cell: ({
-        row: {
-          original: { sender },
-        },
-      }) => (
-        <p>
-          {sender}
-        </p>
-      ),
     },
     {
       header: ({ column }) => <DataTableColumnHeader title='Targeted Observers' column={column} />,
       accessorKey: 'numberOfTargetedObservers',
       enableSorting: false,
       enableGlobalFilter: false,
-      cell: ({
-        row: {
-          original: { numberOfTargetedObservers },
-        },
-      }) => (
-        <p>
-          {numberOfTargetedObservers}
-        </p>
-      ),
+    },
+    {
+      header: ({ column }) => <DataTableColumnHeader title='Read notifications' column={column} />,
+      accessorKey: 'numberOfReadNotifications',
+      enableSorting: false,
+      enableGlobalFilter: false,
     },
     {
       header: ({ column }) => <DataTableColumnHeader title='Title' column={column} />,
       accessorKey: 'title',
       enableSorting: false,
       enableGlobalFilter: false,
-      cell: ({
-        row: {
-          original: { title },
-        },
-      }) => (
-        <p>
-          {title}
-        </p>
-      ),
     },
     {
       header: ({ column }) => <DataTableColumnHeader title='Body' column={column} />,
       accessorKey: 'body',
       enableSorting: false,
       enableGlobalFilter: false,
-      cell: ({
-        row: {
-          original: { body },
-        },
-      }) => (
-        <p>
-          {body}
-        </p>
-      ),
     },
     {
       header: '',
@@ -105,15 +75,14 @@ function PushMessages(): FunctionComponent {
 
   const getCellProps = (context: CellContext<PushMessageModel, unknown>): TableCellProps | void => {
     if (context.column.id === 'body' || context.column.id === 'title') {
-
       return {
         className: 'truncate hover:text-clip',
-      }
+      };
     }
-  }
+  };
 
   const navigate = useNavigate();
-    const currentElectionRoundId = useCurrentElectionRoundStore(s => s.currentElectionRoundId);
+  const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
 
   const navigateToPushMessage = useCallback(
     (id: string) => {