[NGO Admin] Rework filters on various pages

web/src/features/filtering/components/ActiveFilters.tsx

@@ -2,18 +2,18 @@ import { DateTimeFormat } from '@/common/formats';
 import { FilterBadge } from '@/components/ui/badge';
 import { useCurrentElectionRoundStore } from '@/context/election-round.store';
 import { useFormSubmissionsFilters } from '@/features/responses/hooks/form-submissions-queries';
-import { useNavigate } from '@tanstack/react-router';
-import { format } from 'date-fns/format';
-import { FC, useCallback } from 'react';
-import { FILTER_KEY, FILTER_LABEL } from '../filtering-enums';
-import { isNotNilOrWhitespace, toBoolean } from '@/lib/utils';
 import {
   mapFormSubmissionFollowUpStatus,
   mapIncidentCategory,
+  mapIncidentReportLocationType,
   mapQuickReportFollowUpStatus,
   mapQuickReportLocationType,
 } from '@/features/responses/utils/helpers';
-import { QuickReportFollowUpStatus } from '@/common/types';
+import { isNotNilOrWhitespace, toBoolean } from '@/lib/utils';
+import { useNavigate } from '@tanstack/react-router';
+import { format } from 'date-fns/format';
+import { FC, useCallback } from 'react';
+import { FILTER_KEY, FILTER_LABEL } from '../filtering-enums';
 
 interface ActiveFilterProps {
   filterId: string;
@@ -48,7 +48,6 @@ const FILTER_LABELS = new Map<string, string>([
   [FILTER_KEY.LocationL3, FILTER_LABEL.LocationL3],
   [FILTER_KEY.LocationL4, FILTER_LABEL.LocationL4],
   [FILTER_KEY.LocationL5, FILTER_LABEL.LocationL5],
-  [FILTER_KEY.FormSubmissionsMonitoringObserverTags, FILTER_LABEL.FormSubmissionsMonitoringObserverTags],
   [FILTER_KEY.PollingStationNumber, FILTER_LABEL.PollingStationNumber],
   [FILTER_KEY.FormId, FILTER_LABEL.FormId],
   [FILTER_KEY.FormStatusFilter, FILTER_LABEL.FormStatus],
@@ -59,12 +58,16 @@ const FILTER_LABELS = new Map<string, string>([
   [FILTER_KEY.QuickReportIncidentCategory, FILTER_LABEL.QuickReportIncidentCategory],
   [FILTER_KEY.QuickReportFollowUpStatus, FILTER_LABEL.QuickReportFollowUpStatus],
   [FILTER_KEY.HasQuickReports, FILTER_LABEL.HasQuickReports],
+  [FILTER_KEY.IncidentReportLocationType, FILTER_LABEL.IncidentReportLocationType],
+  [FILTER_KEY.QuickReportLocationType, FILTER_LABEL.IncidentReportLocationType],
 ]);
 
 const FILTER_VALUE_LOCALIZATORS = new Map<string, (value: any) => string>([
   [FILTER_KEY.QuickReportFollowUpStatus, mapQuickReportFollowUpStatus],
   [FILTER_KEY.FormSubmissionFollowUpStatus, mapFormSubmissionFollowUpStatus],
   [FILTER_KEY.QuickReportIncidentCategory, mapIncidentCategory],
+  [FILTER_KEY.IncidentReportLocationType, mapIncidentReportLocationType],
+  [FILTER_KEY.QuickReportLocationType, mapQuickReportLocationType],
 ]);
 
 const ActiveFilter: FC<ActiveFilterProps> = ({ filterId, value, isArray }) => {

web/src/features/filtering/components/FilteringIcon.tsx

@@ -0,0 +1,20 @@
+import { FunnelIcon } from '@heroicons/react/24/outline';
+import { FC, SetStateAction } from 'react';
+
+interface FilteringIconProps {
+  filteringIsExpanded: boolean;
+  setFilteringIsExpanded: (value: SetStateAction<boolean>) => void;
+}
+
+export const FilteringIcon: FC<FilteringIconProps> = ({ filteringIsExpanded, setFilteringIsExpanded }) => {
+  return (
+    <FunnelIcon
+      title={`${filteringIsExpanded ? 'Collapse' : 'Expand'} filtering`}
+      className='w-[20px] text-purple-900 cursor-pointer'
+      fill={filteringIsExpanded ? '#5F288D' : 'rgba(0,0,0,0)'}
+      onClick={() => {
+        setFilteringIsExpanded((prev) => !prev);
+      }}
+    />
+  );
+};

web/src/features/filtering/components/LocationTypeFilters.tsx

@@ -0,0 +1,68 @@
+import { SelectFilter, SelectFilterOption } from '@/features/filtering/components/SelectFilter';
+import { FILTER_KEY } from '@/features/filtering/filtering-enums';
+import { useFilteringContainer } from '@/features/filtering/hooks/useFilteringContainer';
+import { IncidentReportLocationType } from '@/features/responses/models/incident-report';
+import { QuickReportLocationType } from '@/features/responses/models/quick-report';
+import { mapIncidentReportLocationType, mapQuickReportLocationType } from '@/features/responses/utils/helpers';
+import { FC } from 'react';
+
+export const IncidentReportsLocationTypeFilter: FC = () => {
+  const { queryParams, navigateHandler } = useFilteringContainer();
+
+  const onChange = (value: string) => {
+    navigateHandler({ [FILTER_KEY.IncidentReportLocationType]: value });
+  };
+  const options: SelectFilterOption[] = [
+    {
+      value: IncidentReportLocationType.PollingStation,
+      label: mapIncidentReportLocationType(IncidentReportLocationType.PollingStation),
+    },
+
+    {
+      value: IncidentReportLocationType.OtherLocation,
+      label: mapIncidentReportLocationType(IncidentReportLocationType.OtherLocation),
+    },
+  ];
+
+  return (
+    <SelectFilter
+      value={(queryParams as any)[FILTER_KEY.IncidentReportLocationType]}
+      onChange={onChange}
+      options={options}
+      placeholder='Location Type'
+    />
+  );
+};
+
+export const QuickReportsLocationTypeFilter: FC = () => {
+  const { queryParams, navigateHandler } = useFilteringContainer();
+
+  const onChange = (value: string) => {
+    navigateHandler({ [FILTER_KEY.QuickReportLocationType]: value });
+  };
+  const options: SelectFilterOption[] = [
+    {
+      value: QuickReportLocationType.NotRelatedToAPollingStation,
+      label: mapQuickReportLocationType(QuickReportLocationType.NotRelatedToAPollingStation),
+    },
+
+    {
+      value: QuickReportLocationType.OtherPollingStation,
+      label: mapQuickReportLocationType(QuickReportLocationType.OtherPollingStation),
+    },
+
+    {
+      value: QuickReportLocationType.VisitedPollingStation,
+      label: mapQuickReportLocationType(QuickReportLocationType.VisitedPollingStation),
+    },
+  ];
+
+  return (
+    <SelectFilter
+      value={(queryParams as any)[FILTER_KEY.QuickReportLocationType]}
+      onChange={onChange}
+      options={options}
+      placeholder='Location Type'
+    />
+  );
+};

web/src/features/filtering/filtering-enums.ts

@@ -16,7 +16,6 @@ export const enum FILTER_KEY {
   LocationL4 = 'level4Filter',
   LocationL5 = 'level5Filter',
   PollingStationNumber = 'pollingStationNumberFilter',
-  FormSubmissionsMonitoringObserverTags = 'tagsFilter',
   ViewBy = 'viewBy',
   Tab = 'tab',
   FormId = 'formId',
@@ -26,14 +25,16 @@ export const enum FILTER_KEY {
   ToDate = 'submissionsToDate',
   SearchText = 'searchText',
   FormIsCompleted = 'formIsCompleted',
-  QuickReportIncidentCategory ='incidentCategory',
-  QuickReportFollowUpStatus ='quickReportFollowUpStatus',
-  HasQuickReports ='hasQuickReports',
+  QuickReportIncidentCategory = 'incidentCategory',
+  QuickReportFollowUpStatus = 'quickReportFollowUpStatus',
+  HasQuickReports = 'hasQuickReports',
+  IncidentReportLocationType = 'incidentReportLocationType',
+  QuickReportLocationType = 'quickReportLocationType',
 }
 
 export const enum FILTER_LABEL {
   MonitoringObserverStatus = 'Observer status',
-  MonitoringObserverTags = 'Tags',
+  MonitoringObserverTags = 'Observer tags',
   FormTypeFilter = 'Form type',
   HasFlaggedAnswers = 'Flagged answers',
   FollowUpStatus = 'Follow-up status',
@@ -45,15 +46,15 @@ export const enum FILTER_LABEL {
   LocationL4 = 'Location - L4',
   LocationL5 = 'Location - L5',
   PollingStationNumber = 'Polling station number',
-  FormSubmissionsMonitoringObserverTags = 'Observer tags',
   MediaFiles = 'Has attachments',
   FormId = 'Form',
   FormStatus = 'Form status',
   FromDate = 'From date',
   ToDate = 'To Date',
   SearchText = 'Search text',
   FormCompleted = 'Form completed',
-  QuickReportIncidentCategory ='Incident category',
-  QuickReportFollowUpStatus ='Quick report follow up status',
-  HasQuickReports ='Has quick reports',
+  QuickReportIncidentCategory = 'Incident category',
+  QuickReportFollowUpStatus = 'Quick report follow up status',
+  HasQuickReports = 'Has quick reports',
+  IncidentReportLocationType = 'Location type',
 }

web/src/features/filtering/hooks/useFilteringContainer.ts

@@ -1,6 +1,6 @@
 import { useSetPrevSearch } from '@/common/prev-search-store';
 import { useNavigate, useSearch } from '@tanstack/react-router';
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { HIDDEN_FILTERS } from '../components/ActiveFilters';
 import { FILTER_KEY } from '../filtering-enums';
 
@@ -14,12 +14,13 @@ export function useFilteringContainer() {
 
   const setPrevSearch = useSetPrevSearch();
   const filteringIsActive = useMemo(() => {
-
     return Object.entries(queryParams)
       .filter(([key, _]) => !HIDDEN_FILTERS.includes(key))
       .some(([_, value]) => !!value);
   }, [queryParams]);
 
+  const [filteringIsExpanded, setFilteringIsExpanded] = useState(filteringIsActive ?? false);
+
   const navigateHandler = useCallback(
     (search: Record<string, any | undefined>) => {
       void navigate({
@@ -44,5 +45,13 @@ export function useFilteringContainer() {
     setPrevSearch(filterObject(queryParams, HIDDEN_FILTERS));
   };
 
-  return { queryParams, filteringIsActive, navigate, navigateHandler, resetFilters };
+  return {
+    queryParams,
+    filteringIsActive,
+    filteringIsExpanded,
+    setFilteringIsExpanded,
+    navigate,
+    navigateHandler,
+    resetFilters,
+  };
 }

web/src/features/forms/components/Dashboard/Dashboard.tsx

@@ -44,13 +44,14 @@ import { formsKeys, useForms } from '../../queries';
 import AddTranslationsDialog, { useAddTranslationsDialog } from './AddTranslationsDialog';
 import CreateForm from './CreateForm';
 import { FormFilters } from './FormFilters/FormFilters';
+import { FilteringIcon } from '@/features/filtering/components/FilteringIcon';
 
 export default function FormsDashboard(): ReactElement {
   const navigate = useNavigate();
   const search = Route.useSearch();
   const debouncedSearch = useDebounce(search, 300);
   const [searchText, setSearchText] = useState('');
-  const { filteringIsActive } = useFilteringContainer();
+  const { filteringIsExpanded, setFilteringIsExpanded } = useFilteringContainer();
 
   const queryParams = useMemo(() => {
     const params = [
@@ -347,7 +348,6 @@ export default function FormsDashboard(): ReactElement {
     return defaultColumns;
   }, [currentElectionRoundId, isMonitoringNgoForCitizenReporting]);
 
-  const [isFiltering, setIsFiltering] = useState(filteringIsActive);
 
   const handleSearchInput = (ev: React.FormEvent<HTMLInputElement>) => {
     setSearchText(ev.currentTarget.value);
@@ -526,18 +526,12 @@ export default function FormsDashboard(): ReactElement {
         <div className='flex justify-end gap-4 px-6'>
           <>
             <Input className='max-w-md' onChange={handleSearchInput} placeholder='Search' />
-            <FunnelIcon
-              className='w-[20px] text-purple-900 cursor-pointer'
-              fill={isFiltering ? '#5F288D' : 'rgba(0,0,0,0)'}
-              onClick={() => {
-                setIsFiltering((prev) => !prev);
-              }}
-            />
+            <FilteringIcon filteringIsExpanded={filteringIsExpanded} setFilteringIsExpanded={setFilteringIsExpanded} />
           </>
         </div>
 
         <Separator />
-        {isFiltering && <FormFilters />}
+        {filteringIsExpanded && <FormFilters />}
       </CardHeader>
       <CardContent>
         <QueryParamsDataTable

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

@@ -39,6 +39,7 @@ import ImportMonitoringObserversDialog from '../MonitoringObserversList/ImportMo
 import ImportMonitoringObserversErrorsDialog from '../MonitoringObserversList/ImportMonitoringObserversErrorsDialog';
 import ConfirmResendInvitationDialog from './ConfirmResendInvitationDialog';
 import CreateMonitoringObserverDialog from './CreateMonitoringObserverDialog';
+import { FilteringIcon } from '@/features/filtering/components/FilteringIcon';
 
 function MonitoringObserversList() {
   const navigate = useNavigate();
@@ -136,8 +137,7 @@ function MonitoringObserversList() {
   const importMonitoringObserversDialog = useDialog();
   const importMonitoringObserverErrorsDialog = useDialog();
   const confirmResendInvitesDialog = useDialog();
-  const { filteringIsActive, navigateHandler } = useFilteringContainer();
-  const [filtersExpanded, setFiltersExpanded] = useState(false);
+  const { filteringIsExpanded, setFilteringIsExpanded, navigateHandler } = useFilteringContainer();
 
   const handleSearchInput = (ev: React.FormEvent<HTMLInputElement>) => {
     setSearchText(ev.currentTarget.value);
@@ -208,11 +208,6 @@ function MonitoringObserversList() {
     },
   });
 
-  const changeIsFiltering = () => {
-    setFiltersExpanded((prev) => {
-      return !prev;
-    });
-  };
 
   function handleResendInviteToObserver(id?: string): void {
     setMonitoringObserverId(id);
@@ -339,16 +334,12 @@ function MonitoringObserversList() {
         <div className='flex flex-row justify-end gap-4 px-6 filters'>
           <>
             <Input onChange={handleSearchInput} value={searchText} className='max-w-md' placeholder='Search' />
-            <FunnelIcon
-              onClick={changeIsFiltering}
-              className='w-[20px] text-purple-900 cursor-pointer'
-              fill={filteringIsActive ? '#5F288D' : 'rgba(0,0,0,0)'}
-            />
+            <FilteringIcon filteringIsExpanded={filteringIsExpanded} setFilteringIsExpanded={setFilteringIsExpanded} />
             <Cog8ToothIcon className='w-[20px] text-purple-900' />
           </>
         </div>
         <Separator />
-        {filtersExpanded && <MonitoringObserversListFilters />}
+        {filteringIsExpanded && <MonitoringObserversListFilters />}
       </CardHeader>
       <CardContent>
         <QueryParamsDataTable

web/src/features/monitoring-observers/filtering/MonitoringObserverTagsSelect.tsx

@@ -6,14 +6,8 @@ import { useMonitoringObserversTags } from '@/hooks/tags-queries';
 
 import { FC } from 'react';
 
-interface MonitoringObserverTagsSelectProps {
-  isFilteringFormSubmissions?: boolean;
-}
-
-export const MonitoringObserverTagsSelect: FC<MonitoringObserverTagsSelectProps> = ({ isFilteringFormSubmissions }) => {
-  const COMPONENT_FILTER_KEY = isFilteringFormSubmissions
-    ? FILTER_KEY.FormSubmissionsMonitoringObserverTags
-    : FILTER_KEY.MonitoringObserverTags;
+export const MonitoringObserverTagsSelect: FC = () => {
+  const COMPONENT_FILTER_KEY = FILTER_KEY.MonitoringObserverTags;
 
   const currentElectionRoundId = useCurrentElectionRoundStore((s) => s.currentElectionRoundId);
   const { data: tags } = useMonitoringObserversTags(currentElectionRoundId);