Enhance filtering

.env.example

@@ -6,7 +6,6 @@ Domain__DbConnectionConfig__Port=5432
 Domain__DbConnectionConfig__Database=vote-monitor
 Domain__DbConnectionConfig__UserId=postgres
 Domain__DbConnectionConfig__Password=docker
-
 Seeders__PlatformAdminSeeder__FirstName=John
 Seeders__PlatformAdminSeeder__LastName=Doe
 Seeders__PlatformAdminSeeder__Email=john.doe@example.com

api/src/Vote.Monitor.Api.Feature.PollingStation/FetchLevels/Endpoint.cs

@@ -42,7 +42,6 @@ public override async Task<Results<Ok<Response>, NotFound>> ExecuteAsync(Request
                     x.Level3,
                     x.Level4,
                     x.Level5,
-                    x.Number
                 })
                 .Distinct()
                 .ToListAsync(cancellationToken: ct);
@@ -108,18 +107,6 @@ public override async Task<Results<Ok<Response>, NotFound>> ExecuteAsync(Request
                         Depth = 5
                     });
                 }
-
-                if (!string.IsNullOrWhiteSpace(ps.Number))
-                {
-                    var numberLevelKey = BuildKey(ps.Level1, ps.Level2, ps.Level3, ps.Level4, ps.Level5, ps.Number);
-                    parentNode = cache.GetOrCreate(numberLevelKey, () => new LevelNode
-                    {
-                        Id = ++id,
-                        Name = ps.Number,
-                        ParentId = parentNode.Id,
-                        Depth = 6
-                    });
-                }
             }
 
             return new Response

api/src/Vote.Monitor.Api.Feature.PollingStation/List/Request.cs

@@ -22,4 +22,7 @@ public class Request : BaseSortPaginatedRequest
 
     [QueryParam]
     public string? Level5Filter { get; set; }
+
+    [QueryParam]
+    public string? PollingStationNumberFilter { get; set; }
 }

api/src/Vote.Monitor.Api.Feature.PollingStation/Specifications/ListPollingStationsSpecification.cs

@@ -14,6 +14,7 @@ public ListPollingStationsSpecification(List.Request request)
             .Where(x => x.Level3 == request.Level3Filter, !string.IsNullOrWhiteSpace(request.Level3Filter))
             .Where(x => x.Level4 == request.Level4Filter, !string.IsNullOrWhiteSpace(request.Level4Filter))
             .Where(x => x.Level5 == request.Level5Filter, !string.IsNullOrWhiteSpace(request.Level5Filter))
+            .Where(x => x.Number == request.PollingStationNumberFilter, !string.IsNullOrWhiteSpace(request.PollingStationNumberFilter))
             .ApplyOrdering(request)
             .Paginate(request)
             .AsNoTracking();

api/src/Vote.Monitor.Api/Vote.Monitor.Api.csproj

@@ -39,6 +39,7 @@
 
   <ItemGroup>
     <ProjectReference Include="..\Authorization.Policies\Authorization.Policies.csproj" />
+    <ProjectReference Include="..\Feature.Citizen.Guides\Feature.Citizen.Guides.csproj" />
     <ProjectReference Include="..\Feature.CitizenReports.Attachments\Feature.CitizenReports.Attachments.csproj" />
     <ProjectReference Include="..\Feature.Citizen.Guides\Feature.Citizen.Guides.csproj" />
     <ProjectReference Include="..\Feature.CitizenReports.Notes\Feature.CitizenReports.Notes.csproj" />

web/src/common/types.ts

@@ -49,15 +49,17 @@ export enum QuestionType {
   RatingQuestionType = 'ratingQuestion',
 }
 
-export const ZDisplayLogicCondition = z.enum(["Equals",
-  "NotEquals",
-  "LessThan",
-  "LessEqual",
-  "GreaterThan",
-  "GreaterEqual",
-  "Includes"]);
-
-export type DisplayLogicCondition = z.infer<typeof ZDisplayLogicCondition>
+export const ZDisplayLogicCondition = z.enum([
+  'Equals',
+  'NotEquals',
+  'LessThan',
+  'LessEqual',
+  'GreaterThan',
+  'GreaterEqual',
+  'Includes',
+]);
+
+export type DisplayLogicCondition = z.infer<typeof ZDisplayLogicCondition>;
 
 export interface DisplayLogic {
   parentQuestionId: string;
@@ -150,7 +152,7 @@ export type NumberAnswer = z.infer<typeof NumberAnswerSchema>;
 
 export const DateAnswerSchema = BaseAnswerSchema.extend({
   $answerType: z.literal(AnswerType.DateAnswerType),
-  date: z.string().datetime({ offset: true } ).optional(),
+  date: z.string().datetime({ offset: true }).optional(),
 });
 export type DateAnswer = z.infer<typeof DateAnswerSchema>;
 
@@ -205,22 +207,22 @@ export enum FollowUpStatus {
   NeedsFollowUp = 'NeedsFollowUp',
   Resolved = 'Resolved',
 }
+
+export enum QuestionsAnswered {
+  None = 'None',
+  Some = 'Some',
+  All = 'All',
+}
 export type HistogramData = {
   [bucket: string]: number;
 };
 
-
-export const ZFormType = z.enum(["PSI",
-  "Opening",
-  "Voting",
-  "ClosingAndCounting",
-  "CitizenReporting",
-  "Other"]);
+export const ZFormType = z.enum(['PSI', 'Opening', 'Voting', 'ClosingAndCounting', 'CitizenReporting', 'Other']);
 
 export type FormType = z.infer<typeof ZFormType>;
 
 export const ZTranslationStatus = z.enum(['Translated', 'MissingTranslations']);
 export type TranslationStatus = z.infer<typeof ZTranslationStatus>;
 
 const ZLanguagesTranslationStatus = z.record(z.string(), ZTranslationStatus);
-export type LanguagesTranslationStatus = z.infer<typeof ZLanguagesTranslationStatus>;
+export type LanguagesTranslationStatus = z.infer<typeof ZLanguagesTranslationStatus>;

web/src/components/PollingStationsFilters/PollingStationsFilters.tsx

@@ -5,6 +5,7 @@ import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { usePollingStationsLocationLevels } from '@/hooks/polling-stations-levels';
 import { useNavigate, useSearch } from '@tanstack/react-router';
 import { useCallback, useMemo } from 'react';
+import { Input } from '../ui/input';
 
 export function PollingStationsFilters(): FunctionComponent {
   const navigate = useNavigate();
@@ -61,30 +62,20 @@ export function PollingStationsFilters(): FunctionComponent {
     [data, selectedLevel4Node?.id]
   );
 
-  const filteredPollingStationNumbers = useMemo(() => {
-    const parentId =
-      selectedLevel5Node?.id ??
-      selectedLevel4Node?.id ??
-      selectedLevel3Node?.id ??
-      selectedLevel2Node?.id ??
-      selectedLevel1Node?.id;
-
-    return data?.[6]?.filter((n) => !!n.name && n.parentId === parentId).sort((a, b) => {
-      const numA = Number(a.name);
-      const numB = Number(b.name);
-
-      // If both are valid numbers, compare numerically
-      if (!isNaN(numA) && !isNaN(numB)) {
-          return numA - numB;
-      }
-
-      // If one is numeric and the other is not, place numeric first
-      if (!isNaN(numA)) return -1;
-      if (!isNaN(numB)) return 1;
-
-      // If both are non-numeric, compare them as strings
-      return a.name.localeCompare(b.name);
-  });
+  const isFinalNode = useMemo(() => {
+    if (data === undefined) return false;
+
+    if (selectedLevel5Node) return true;
+    if (selectedLevel4Node)
+      return data[5] === undefined || !data[5].some((node) => node.parentId === selectedLevel4Node.id);
+    if (selectedLevel3Node)
+      return data[4] === undefined || !data[4].some((node) => node.parentId === selectedLevel3Node?.id);
+    if (selectedLevel2Node)
+      return data[3] === undefined || !data[3].some((node) => node.parentId === selectedLevel2Node?.id);
+    if (selectedLevel1Node)
+      return data[2] === undefined || !data[2].some((node) => node.parentId === selectedLevel1Node?.id);
+
+    return false;
   }, [
     data,
     selectedLevel1Node?.id,
@@ -119,11 +110,11 @@ export function PollingStationsFilters(): FunctionComponent {
             level3Filter: undefined,
             level4Filter: undefined,
             level5Filter: undefined,
-            pollingStationNumberFilter: undefined
+            pollingStationNumberFilter: undefined,
           });
         }}
         value={search.level1Filter ?? ''}>
-        <SelectTrigger >
+        <SelectTrigger>
           <SelectValue placeholder='Location - L1' />
         </SelectTrigger>
         <SelectContent>
@@ -145,11 +136,11 @@ export function PollingStationsFilters(): FunctionComponent {
             level3Filter: undefined,
             level4Filter: undefined,
             level5Filter: undefined,
-            pollingStationNumberFilter: undefined
+            pollingStationNumberFilter: undefined,
           });
         }}
         value={search.level2Filter ?? ''}>
-        <SelectTrigger >
+        <SelectTrigger>
           <SelectValue placeholder='Location - L2' />
         </SelectTrigger>
         <SelectContent>
@@ -174,7 +165,7 @@ export function PollingStationsFilters(): FunctionComponent {
           });
         }}
         value={search.level3Filter ?? ''}>
-        <SelectTrigger >
+        <SelectTrigger>
           <SelectValue placeholder='Location - L3' />
         </SelectTrigger>
         <SelectContent>
@@ -194,7 +185,7 @@ export function PollingStationsFilters(): FunctionComponent {
           navigateHandler({ level4Filter: value, level5Filter: undefined, pollingStationNumberFilter: undefined });
         }}
         value={search.level4Filter ?? ''}>
-        <SelectTrigger >
+        <SelectTrigger>
           <SelectValue placeholder='Location - L4' />
         </SelectTrigger>
         <SelectContent>
@@ -214,7 +205,7 @@ export function PollingStationsFilters(): FunctionComponent {
           navigateHandler({ level5Filter: value, pollingStationNumberFilter: undefined });
         }}
         value={search.level5Filter ?? ''}>
-        <SelectTrigger >
+        <SelectTrigger>
           <SelectValue placeholder='Location - L5' />
         </SelectTrigger>
         <SelectContent>
@@ -228,25 +219,14 @@ export function PollingStationsFilters(): FunctionComponent {
         </SelectContent>
       </Select>
 
-      <Select
-        disabled={!filteredPollingStationNumbers?.length}
-        onValueChange={(value) => {
-          navigateHandler({ pollingStationNumberFilter: value });
+      <Input
+        placeholder='Polling station number'
+        disabled={!isFinalNode}
+        onChange={(e) => {
+          navigateHandler({ pollingStationNumberFilter: e.target.value });
         }}
-        value={search.pollingStationNumberFilter ?? ''}>
-        <SelectTrigger >
-          <SelectValue placeholder='Polling station number' />
-        </SelectTrigger>
-        <SelectContent>
-          <SelectGroup>
-            {filteredPollingStationNumbers?.map((node) => (
-              <SelectItem key={node.id} value={node.name}>
-                {node.name}
-              </SelectItem>
-            ))}
-          </SelectGroup>
-        </SelectContent>
-      </Select>
+        value={search.pollingStationNumberFilter ?? ''}
+      />
     </>
   );
 }

web/src/components/ui/DataTable/DataTable.tsx

@@ -204,6 +204,9 @@ export function DataTable<TData extends RowData, TValue, TQueryParams = object>(
       pagination,
       columnVisibility,
     },
+    defaultColumn: {
+      size: 165,
+    },
   });
 
   return (

web/src/components/ui/date-picker.tsx

@@ -0,0 +1,52 @@
+import { addDays, format } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import * as React from 'react';
+import { DateRange } from 'react-day-picker';
+
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
+import { cn } from '@/lib/utils';
+
+export function DatePickerWithRange({ className }: React.HTMLAttributes<HTMLDivElement>) {
+  const [date, setDate] = React.useState<DateRange | undefined>({
+    from: new Date(2022, 0, 20),
+    to: addDays(new Date(2022, 0, 20), 20),
+  });
+
+  return (
+    <div className={cn('grid gap-2', className)}>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            id='date'
+            variant={'outline'}
+            className={cn('w-[300px] justify-start text-left font-normal', !date && 'text-muted-foreground')}>
+            <CalendarIcon className='w-4 h-4 mr-2' />
+            {date?.from ? (
+              date.to ? (
+                <>
+                  {format(date.from, 'LLL dd, y')} - {format(date.to, 'LLL dd, y')}
+                </>
+              ) : (
+                format(date.from, 'LLL dd, y')
+              )
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto p-0' align='start'>
+          <Calendar
+            initialFocus
+            mode='range'
+            defaultMonth={date?.from}
+            selected={date}
+            onSelect={setDate}
+            numberOfMonths={2}
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}