Improvements on platform admin web + api (#909)

idormenco · web-flow · commit af75e7c3e5d8 · 2025-03-18T13:55:54.000+02:00
* Improvements on platform admin web + api

* Update column-visibility-options.tsx
diff --git a/api/src/Vote.Monitor.Api.Feature.Ngo/Create/Endpoint.cs b/api/src/Vote.Monitor.Api.Feature.Ngo/Create/Endpoint.cs
@@ -34,7 +34,7 @@ public override async Task<Results<Ok<NgoModel>, ProblemDetails>> ExecuteAsync(R
             Id = ngo.Id,
             Name = ngo.Name,
             Status = ngo.Status,
-            NumberOfElectionsMonitoring = 0,
+            NumberOfMonitoredElections = 0,
             NumberOfNgoAdmins = 0,
             DateOfLastElection = null
         });
diff --git a/api/src/Vote.Monitor.Api.Feature.Ngo/Get/Endpoint.cs b/api/src/Vote.Monitor.Api.Feature.Ngo/Get/Endpoint.cs
@@ -18,26 +18,31 @@ public override async Task<Results<Ok<NgoModel>, NotFound>> ExecuteAsync(Request
         CancellationToken ct)
     {
         var sql = """
-            SELECT
-              N."Id",
-              N."Name",
-              N."Status",
-              (SELECT COUNT(1) 
-               FROM "NgoAdmins" NA 
-               WHERE NA."NgoId" = N."Id") AS "NumberOfNgoAdmins",
-              (SELECT COUNT(1) 
-               FROM "MonitoringNgos" MN 
-               WHERE MN."NgoId" = N."Id") AS "NumberOfElectionsMonitoring",
-              (
-                SELECT MAX(ER."StartDate") 
-                FROM "MonitoringNgos" MN
-                INNER JOIN "ElectionRounds" ER ON ER."Id" = MN."ElectionRoundId"
-                WHERE MN."NgoId" = N."Id"
-              ) AS "DateOfLastElection"
-            FROM
-              "Ngos" N
-            WHERE
-              N."Id" = @ngoId
+            SELECT N."Id",
+                   N."Name",
+                   N."Status",
+                   (SELECT COUNT(1)
+                    FROM "NgoAdmins" NA
+                    WHERE NA."NgoId" = N."Id")                        AS "NumberOfNgoAdmins",
+                   (SELECT COUNT(1)
+                    FROM "MonitoringNgos" MN
+                    WHERE MN."NgoId" = N."Id")                        AS "NumberOfMonitoredElections",
+            
+                   COALESCE((select jsonb_agg(jsonb_build_object('Id', er."Id",
+                                                                 'Title', er."Title",
+                                                                 'EnglishTitle', er."EnglishTitle",
+                                                                 'StartDate', er."StartDate",
+                                                                 'Status', er."Status"
+                                              ))
+                             from "MonitoringNgos" mn
+                                      inner join "ElectionRounds" er on er."Id" = mn."ElectionRoundId"
+                             where mn."NgoId" = N."Id"), '[]'::JSONB) AS "MonitoredElections",
+                   (SELECT MAX(ER."StartDate")
+                    FROM "MonitoringNgos" MN
+                             INNER JOIN "ElectionRounds" ER ON ER."Id" = MN."ElectionRoundId"
+                    WHERE MN."NgoId" = N."Id")                        AS "DateOfLastElection"
+            FROM "Ngos" N
+            WHERE N."Id" = @ngoId
             """;
 
         var queryArgs = new { ngoId = req.Id };
diff --git a/api/src/Vote.Monitor.Api.Feature.Ngo/List/Endpoint.cs b/api/src/Vote.Monitor.Api.Feature.Ngo/List/Endpoint.cs
@@ -43,7 +43,7 @@ WITH CTE_Ngos AS (
                            WHERE NA."NgoId" = N."Id") AS "NumberOfNgoAdmins",
                           (SELECT COUNT(1) 
                            FROM "MonitoringNgos" MN 
-                           WHERE MN."NgoId" = N."Id") AS "NumberOfElectionsMonitoring",
+                           WHERE MN."NgoId" = N."Id") AS "NumberOfMonitoredElections",
                           (
                             SELECT MAX(ER."StartDate") 
                             FROM "MonitoringNgos" MN
@@ -81,10 +81,10 @@ ORDER BY
                           WHEN @sortExpression = 'NumberOfNgoAdmins DESC' THEN "NumberOfNgoAdmins"
                           END DESC,  
                       CASE
-                          WHEN @sortExpression = 'NumberOfElectionsMonitoring ASC' THEN "NumberOfElectionsMonitoring"
+                          WHEN @sortExpression = 'NumberOfMonitoredElections ASC' THEN "NumberOfMonitoredElections"
                           END ASC,
                       CASE
-                          WHEN @sortExpression = 'NumberOfElectionsMonitoring DESC' THEN "NumberOfElectionsMonitoring"
+                          WHEN @sortExpression = 'NumberOfMonitoredElections DESC' THEN "NumberOfMonitoredElections"
                           END DESC,
                       CASE
                           WHEN @sortExpression = 'DateOfLastElection ASC' THEN "DateOfLastElection"
@@ -140,10 +140,10 @@ private static string GetSortExpression(string? sortColumnName, bool isAscending
             return $"{nameof(NgoModel.NumberOfNgoAdmins)} {sortOrder}";
         }
 
-        if (string.Equals(sortColumnName, nameof(NgoModel.NumberOfElectionsMonitoring),
+        if (string.Equals(sortColumnName, nameof(NgoModel.NumberOfMonitoredElections),
                 StringComparison.InvariantCultureIgnoreCase))
         {
-            return $"{nameof(NgoModel.NumberOfElectionsMonitoring)} {sortOrder}";
+            return $"{nameof(NgoModel.NumberOfMonitoredElections)} {sortOrder}";
         }
 
         if (string.Equals(sortColumnName, nameof(NgoModel.DateOfLastElection),
diff --git a/api/src/Vote.Monitor.Api.Feature.Ngo/NgoFeatureInstaller.cs b/api/src/Vote.Monitor.Api.Feature.Ngo/NgoFeatureInstaller.cs
@@ -1,11 +1,16 @@
-﻿using Microsoft.Extensions.DependencyInjection;
+﻿using Dapper;
+using Microsoft.Extensions.DependencyInjection;
+using Vote.Monitor.Core.Converters;
 
 namespace Vote.Monitor.Api.Feature.Ngo;
 
 public static class NgoFeatureInstaller
 {
     public static IServiceCollection AddNgoFeature(this IServiceCollection services)
     {
+        SqlMapper.AddTypeHandler(typeof(NgoModel.MonitoredElectionsModel[]),
+            new JsonToObjectConverter<NgoModel.MonitoredElectionsModel[]>());
+
         return services;
     }
 }
diff --git a/api/src/Vote.Monitor.Api.Feature.Ngo/NgoModel.cs b/api/src/Vote.Monitor.Api.Feature.Ngo/NgoModel.cs
@@ -1,4 +1,5 @@
-﻿using Vote.Monitor.Domain.Entities.NgoAggregate;
+﻿using Vote.Monitor.Domain.Entities.ElectionRoundAggregate;
+using Vote.Monitor.Domain.Entities.NgoAggregate;
 
 namespace Vote.Monitor.Api.Feature.Ngo;
 
@@ -8,6 +9,17 @@ public record NgoModel
     public string Name { get; init; }
     public NgoStatus Status { get; init; }
     public int NumberOfNgoAdmins { get; init; }
-    public int NumberOfElectionsMonitoring { get; init; }
+    public int NumberOfMonitoredElections { get; init; }
+
+    public MonitoredElectionsModel[] MonitoredElections { get; init; } = [];
     public DateOnly? DateOfLastElection { get; set; }
+    
+    public class MonitoredElectionsModel
+    {
+        public Guid Id { get; set; }
+        public string Title { get; set; }
+        public string EnglishTitle { get; set; }
+        public DateOnly StartDate { get; set; }
+        public ElectionRoundStatus Status { get; set; }
+    }
 }
diff --git a/web/src/features/election-rounds/components/AssignedFormTemplatesDashboard/AssignedFormTemplatesDashboard.tsx b/web/src/features/election-rounds/components/AssignedFormTemplatesDashboard/AssignedFormTemplatesDashboard.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useTranslation } from 'react-i18next';
+
+export interface AssignedFormTemplatesDashboardProps {
+  electionRoundId: string;
+}
+
+function AssignedFormTemplatesDashboard({ electionRoundId }: AssignedFormTemplatesDashboardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader className='flex gap-2 flex-column'>
+        <div className='flex flex-row items-center justify-between'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            {t('electionEvent.formTemplates.cardTitle')}
+          </CardTitle>
+        </div>
+        <Separator />
+      </CardHeader>
+      <CardContent className='flex flex-col items-baseline gap-6'>{electionRoundId}</CardContent>
+    </Card>
+  );
+}
+
+export default AssignedFormTemplatesDashboard;
diff --git a/web/src/features/election-rounds/components/CitizenReportingDashboard/CitizenReportingDashboard.tsx b/web/src/features/election-rounds/components/CitizenReportingDashboard/CitizenReportingDashboard.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useTranslation } from 'react-i18next';
+
+export interface CitizenReportingDashboardProps {
+  electionRoundId: string;
+}
+
+function CitizenReportingDashboard({ electionRoundId }: CitizenReportingDashboardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader className='flex gap-2 flex-column'>
+        <div className='flex flex-row items-center justify-between'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            {t('electionEvent.citizenReporting.cardTitle')}
+          </CardTitle>
+        </div>
+        <Separator />
+      </CardHeader>
+      <CardContent className='flex flex-col items-baseline gap-6'>{electionRoundId}</CardContent>
+    </Card>
+  );
+}
+
+export default CitizenReportingDashboard;
diff --git a/web/src/features/election-rounds/components/ElectionRoundDetails/ElectionRoundDetails.tsx b/web/src/features/election-rounds/components/ElectionRoundDetails/ElectionRoundDetails.tsx
@@ -10,7 +10,11 @@ import { useTranslation } from 'react-i18next';
 import { electionRoundDetailsQueryOptions } from '../../queries';
 import PollingStationsDashboard from '@/components/PollingStationsDashboard/PollingStationsDashboard';
 import { useNavigate } from '@tanstack/react-router';
-
+import PsiFormDashboard from '../PsiFormDashboard/PsiFormDashboard';
+import MonitoringNgosDashboard from '../MonitoringNgosDashboard/MonitoringNgosDashboard';
+import CitizenReportingDashboard from '../CitizenReportingDashboard/CitizenReportingDashboard';
+import AssignedFormTemplatesDashboard from '../AssignedFormTemplatesDashboard/AssignedFormTemplatesDashboard';
+import { ElectionRoundDetailsTab } from './tabs';
 function ElectionRoundDetails() {
   const navigate = useNavigate();
   const { electionRoundId, tab } = Route.useParams();
@@ -26,34 +30,64 @@ function ElectionRoundDetails() {
   return (
     <Layout title={electionRound.title} subtitle={electionRound.englishTitle} enableBreadcrumbs={false}>
       <Tabs
-        defaultValue={tab ?? 'event-details'}
+        defaultValue={tab ?? ElectionRoundDetailsTab.EventDetails}
         onValueChange={(tab) => {
           navigate({
             to: '/election-rounds/$electionRoundId/$tab',
             params: { electionRoundId, tab },
-            replace: true,
           });
         }}>
-        <TabsList className='grid grid-cols-4 bg-gray-200 w-[800px]'>
-          <TabsTrigger value='event-details'>{t('electionEvent.eventDetails.tabTitle')}</TabsTrigger>
-          <TabsTrigger value='polling-stations'>{t('electionEvent.pollingStations.tabTitle')}</TabsTrigger>
-          <TabsTrigger value='locations'>{t('electionEvent.locations.tabTitle')}</TabsTrigger>
-          <TabsTrigger value='form-templates'>{t('electionEvent.formTemplates.tabTitle')}</TabsTrigger>
+        <TabsList className='grid grid-cols-7 bg-gray-200'>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.EventDetails}>
+            {t('electionEvent.eventDetails.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.PsiForm}>
+            {t('electionEvent.psiForm.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.PollingStations}>
+            {t('electionEvent.pollingStations.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.MonitoringNgos}>
+            {t('electionEvent.monitoringNgos.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.CitizenReporting}>
+            {t('electionEvent.citizenReporting.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.Locations}>
+            {t('electionEvent.locations.tabTitle')}
+          </TabsTrigger>
+          <TabsTrigger className='whitespace-normal text-wrap' value={ElectionRoundDetailsTab.FormTemplates}>
+            {t('electionEvent.formTemplates.tabTitle')}
+          </TabsTrigger>
         </TabsList>
 
-        <TabsContent value='event-details'>
+        <TabsContent value={ElectionRoundDetailsTab.EventDetails}>
           <ElectionEventDescription />
         </TabsContent>
 
-        <TabsContent value='polling-stations'>
+        <TabsContent value={ElectionRoundDetailsTab.PsiForm}>
+          <PsiFormDashboard electionRoundId={electionRoundId} />
+        </TabsContent>
+
+        <TabsContent value={ElectionRoundDetailsTab.PollingStations}>
           <PollingStationsDashboard />
         </TabsContent>
 
-        <TabsContent value='locations'>
+        <TabsContent value={ElectionRoundDetailsTab.MonitoringNgos}>
+          <MonitoringNgosDashboard electionRoundId={electionRoundId} />
+        </TabsContent>
+
+        <TabsContent value={ElectionRoundDetailsTab.CitizenReporting}>
+          <CitizenReportingDashboard electionRoundId={electionRoundId} />
+        </TabsContent>
+
+        <TabsContent value={ElectionRoundDetailsTab.Locations}>
           <LocationsDashboard />
         </TabsContent>
 
-        <TabsContent value='form-templates'>{/* <FormTemplatesAssign /> */}</TabsContent>
+        <TabsContent value={ElectionRoundDetailsTab.FormTemplates}>
+          <AssignedFormTemplatesDashboard electionRoundId={electionRoundId} />
+        </TabsContent>
       </Tabs>
     </Layout>
   );
diff --git a/web/src/features/election-rounds/components/ElectionRoundDetails/tabs.ts b/web/src/features/election-rounds/components/ElectionRoundDetails/tabs.ts
@@ -0,0 +1,9 @@
+export enum ElectionRoundDetailsTab {
+  EventDetails = 'event-details',
+  PsiForm = 'psi-form',
+  PollingStations = 'polling-stations',
+  MonitoringNgos = 'monitoring-ngos',
+  CitizenReporting = 'citizen-reporting',
+  Locations = 'locations',
+  FormTemplates = 'form-templates',
+}
diff --git a/web/src/features/election-rounds/components/MonitoringNgosDashboard/MonitoringNgosDashboard.tsx b/web/src/features/election-rounds/components/MonitoringNgosDashboard/MonitoringNgosDashboard.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useTranslation } from 'react-i18next';
+
+export interface MonitoringNgosDashboardProps {
+  electionRoundId: string;
+}
+function MonitoringNgosDashboard({ electionRoundId }: MonitoringNgosDashboardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader className='flex gap-2 flex-column'>
+        <div className='flex flex-row items-center justify-between'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            {t('electionEvent.monitoringNgos.cardTitle')}
+          </CardTitle>
+        </div>
+        <Separator />
+      </CardHeader>
+      <CardContent className='flex flex-col items-baseline gap-6'>{electionRoundId}</CardContent>
+    </Card>
+  );
+}
+
+export default MonitoringNgosDashboard;
diff --git a/web/src/features/election-rounds/components/PsiFormDashboard/PsiFormDashboard.tsx b/web/src/features/election-rounds/components/PsiFormDashboard/PsiFormDashboard.tsx
@@ -0,0 +1,26 @@
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Separator } from '@/components/ui/separator';
+import { useTranslation } from 'react-i18next';
+
+export interface PsiFormDashboardProps {
+  electionRoundId: string;
+}
+function PsiFormDashboard({ electionRoundId }: PsiFormDashboardProps) {
+  const { t } = useTranslation();
+
+  return (
+    <Card>
+      <CardHeader className='flex gap-2 flex-column'>
+        <div className='flex flex-row items-center justify-between'>
+          <CardTitle className='text-2xl font-semibold leading-none tracking-tight'>
+            {t('electionEvent.psiForm.cardTitle')}
+          </CardTitle>
+        </div>
+        <Separator />
+      </CardHeader>
+      <CardContent className='flex flex-col items-baseline gap-6'>{electionRoundId}</CardContent>
+    </Card>
+  );
+}
+
+export default PsiFormDashboard;
diff --git a/web/src/features/ngos/components/Dashboard/Dashboard.tsx b/web/src/features/ngos/components/Dashboard/Dashboard.tsx
@@ -62,7 +62,7 @@ export default function NGOsDashboard(): ReactElement {
     },
 
     {
-      accessorKey: 'numberOfElectionsMonitoring',
+      accessorKey: 'numberOfMonitoredElections',
       enableSorting: true,
       header: ({ column }) => <DataTableColumnHeader title='Election events' column={column} />,
     },
diff --git a/web/src/features/ngos/components/NGODetails.tsx b/web/src/features/ngos/components/NGODetails.tsx
@@ -56,7 +56,7 @@ export const NGODetailsView: FC<NGODetailsProps> = ({ data }) => {
 
         <div className='flex flex-col gap-1'>
           <p className='font-bold text-gray-700'>Election events</p>
-          <p className='font-normal text-gray-900'>{data.numberOfElectionsMonitoring}</p>
+          <p className='font-normal text-gray-900'>{data.numberOfMonitoredElections}</p>
         </div>
 
         <div className='flex flex-col gap-1'>
diff --git a/web/src/features/ngos/models/NGO.tsx b/web/src/features/ngos/models/NGO.tsx
@@ -1,13 +1,23 @@
 /* eslint-disable unicorn/prefer-top-level-await */
 
+import { ElectionRoundStatus } from '@/common/types';
 import { z } from 'zod';
 
+export interface MonitoredElectionModel {
+  id: string;
+  title: string;
+  englishTitle: string;
+  startDate: string;
+  status: ElectionRoundStatus;
+}
+
 export interface NGO {
   id: string;
   name: string;
   status: NGOStatus;
   numberOfNgoAdmins: number;
-  numberOfElectionsMonitoring: number;
+  numberOfMonitoredElections: number;
+  monitoredElections: MonitoredElectionModel[];
   dateOfLastElection: string;
 }
 
diff --git a/web/src/features/responses/utils/column-visibility-options.tsx b/web/src/features/responses/utils/column-visibility-options.tsx
diff --git a/web/src/locales/en.json b/web/src/locales/en.json
diff --git a/web/src/routes/election-event/index.tsx b/web/src/routes/election-event/index.tsx
diff --git a/web/src/routes/election-rounds/$electionRoundId/$tab.tsx b/web/src/routes/election-rounds/$electionRoundId/$tab.tsx
diff --git a/web/src/routes/election-rounds/$electionRoundId/index.tsx b/web/src/routes/election-rounds/$electionRoundId/index.tsx
diff --git a/web/src/routes/monitoring-observers/index.tsx b/web/src/routes/monitoring-observers/index.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,16 @@`
`1`		`-using Microsoft.Extensions.DependencyInjection;`
	`1`	`+using Dapper;`
	`2`	`+using Microsoft.Extensions.DependencyInjection;`
	`3`	`+using Vote.Monitor.Core.Converters;`
`2`	`4`
`3`	`5`	`namespace Vote.Monitor.Api.Feature.Ngo;`
`4`	`6`
`5`	`7`	`public static class NgoFeatureInstaller`
`6`	`8`	`{`
`7`	`9`	`public static IServiceCollection AddNgoFeature(this IServiceCollection services)`
`8`	`10`	`{`
	`11`	`+ SqlMapper.AddTypeHandler(typeof(NgoModel.MonitoredElectionsModel[]),`
	`12`	`+ new JsonToObjectConverter<NgoModel.MonitoredElectionsModel[]>());`
	`13`	`+`
`9`	`14`	`return services;`
`10`	`15`	`}`
`11`	`16`	`}`