@buerokratt-ria/common-gui-components 0.0.51 → 0.0.53

package/CHANGELOG.md

@@ -4,6 +4,17 @@ All changes to this project will be documented in this file.
 
 ## Template [MajorVersion.MediterraneanVersion.MinorVersion] - DD-MM-YYYY
 
+## [0.0.53] - 06.05.2026
+
+- Removed the Chosen CSA filter from chat history.
+- Added Clear filters action for chat history filters.
+- Added Choose all / Vali kõik option to the chosen columns filter.
+- Persisted selected chat history columns in user preferences.
+
+## [0.0.52] - 05.05.2026
+
+- Updated loading logic
+
 ## [0.0.51] - 05.05.2026
 
 - History page header alignment

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buerokratt-ria/common-gui-components",
-  "version": "0.0.51",
+  "version": "0.0.53",
   "description": "Common GUI components and pre defined templates.",
   "main": "index.ts",
   "author": "ExiRai",

package/templates/history-page/src/History.scss

@@ -3,10 +3,6 @@
 @import 'src/styles/settings/variables/other';
 @import 'src/styles/settings/variables/typography';
 
-.input-wrapper {
-  width: 40%;
-}
-
 .header-container {
     align-items: center;
     display: flex;
@@ -89,3 +85,11 @@
 .spinner {
   height: 24px;
 }
+
+.history-content {
+  &--loading {
+    opacity: 0.5;
+    pointer-events: none;
+    user-select: none;
+  }
+}

package/templates/history-page/src/index.tsx

@@ -1,16 +1,17 @@
-import React, {FC, PropsWithChildren, useEffect, useMemo, useRef, useState} from 'react';
+import {FC, PropsWithChildren, useEffect, useMemo, useRef, useState} from 'react';
 import {useTranslation} from 'react-i18next';
 import {useMutation} from '@tanstack/react-query';
 import {ColumnPinningState, createColumnHelper, PaginationState, SortingState,} from '@tanstack/react-table';
 import {endOfDay, format, formatISO, startOfDay} from "date-fns";
 import {AxiosError} from 'axios';
 import './History.scss';
-import {MdOutlineRemoveRedEye} from 'react-icons/md';
+import {MdOutlineRemoveRedEye } from 'react-icons/md';
 import {CgSpinner} from 'react-icons/cg';
 
 import {
     Button,
     Card,
+    ClearFiltersButton,
     DataTable,
     Dialog,
     Drawer,
@@ -61,6 +62,8 @@ type ExportResult = {
     chatIds: string[];
 };
 
+const ALL_COLUMNS_VALUE = '__all__';
+
 const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                               user,
                                                               userDomains,
@@ -86,8 +89,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const passedStartDate = delegatedStartDate ?? params.get("start");
     const passedEndDate = delegatedEndDate ?? params.get("end");
     const skipNextSelectedColumnsEffect = useRef(false);
-    const passedCustomerSupportIds = params.getAll('customerSupportIds');
-    const [search, setSearch] = useState('');
     const [selectedChat, setSelectedChat] = useState<ChatType | null>(null);
     const [searchParams, setSearchParams] = useSearchParams();
     const [statusChangeModal, setStatusChangeModal] = useState<string | null>(
@@ -114,7 +115,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     const [messagesTrigger, setMessagesTrigger] = useState(false);
     const [selectedColumns, setSelectedColumns] = useState<string[]>([]);
-    const [customerSupportAgents, setCustomerSupportAgents] = useState<any[]>([]);
     const [counterKey, setCounterKey] = useState<number>(0)
 
     const useStore = userDomains;
@@ -126,6 +126,8 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const showTest = envVal === undefined ? true : envVal.toLowerCase() === 'true';
     const [loading, setLoading] = useState(false);
     const abortRef = useRef<AbortController | null>(null);
+    const loadingTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+    const timeoutAbortRef = useRef(false);
 
     const parseDateParam = (dateString: string | null) => {
       if (!dateString) return new Date();
@@ -135,13 +137,16 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     const { control, setValue, watch } = useForm<{
       startDate: Date | string;
       endDate: Date | string;
+      search: string;
     }>({
       defaultValues: {
         startDate: passedStartDate ? parseDateParam(passedStartDate) : startOfDay(new Date()),
         endDate: passedEndDate ? parseDateParam(passedEndDate) : endOfDay(new Date()),
+        search: '',
       },
     });
 
+    const search = watch('search');
     const startDate = watch('startDate');
     const endDate = watch('endDate');
 
@@ -149,7 +154,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         getAllEndedChats.mutate({
             startDate: formatISO(startOfDay(new Date(startDate))),
             endDate: formatISO(endOfDay(new Date(endDate))),
-            customerSupportIds: passedCustomerSupportIds,
             pagination,
             sorting,
             search,
@@ -196,7 +200,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 getAllEndedChats.mutate({
                     startDate: hasStart ? unifyDateFromat(delegatedStartDate) : formatISO(startOfDay(new Date(startDate))),
                     endDate: hasEnd ? unifyDateFromat(delegatedEndDate) : formatISO(endOfDay(new Date(endDate))),
-                    customerSupportIds: passedCustomerSupportIds,
                     pagination,
                     sorting,
                     search,
@@ -227,13 +230,12 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 }
 
                 skipNextSelectedColumnsEffect.current = true;
-                setSelectedColumns(newSelectedColumns);
+                setSelectedColumns(getUiSelectedColumns(newSelectedColumns));
                 setCounterKey(prev => prev + 1);
 
                 getAllEndedChats.mutate({
                     startDate: formatISO(startOfDay(new Date(startDate))),
                     endDate: formatISO(endOfDay(new Date(endDate))),
-                    customerSupportIds: passedCustomerSupportIds,
                     pagination: updatedPagination,
                     sorting,
                     search,
@@ -262,7 +264,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             getAllEndedChats.mutate({
                 startDate: formatISO(startOfDay(new Date(startDate))),
                 endDate: formatISO(endOfDay(new Date(endDate))),
-                customerSupportIds: passedCustomerSupportIds,
                 pagination,
                 sorting,
                 search,
@@ -270,10 +271,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         }
     }, [selectedColumns, currentDomains]);
 
-    useEffect(() => {
-        listCustomerSupportAgents.mutate();
-    }, []);
-
     const updatePagePreferences = useMutation({
         mutationFn: (data: {
             page_results: number;
@@ -292,7 +289,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         mutationFn: (data: {
             startDate: string;
             endDate: string;
-            customerSupportIds: string[];
             pagination: PaginationState;
             sorting: SortingState;
             search: string;
@@ -307,7 +303,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             }
 
             return apiDevEnded.post('agents/chats/ended', {
-                customerSupportIds: data.customerSupportIds,
                 startDate: formatISO(startOfDay(new Date(data.startDate))),
                 endDate: formatISO(endOfDay(new Date(data.endDate))),
                 urls: getDomainsArray(currentDomains),
@@ -334,8 +329,32 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             setTotalPages(res?.data?.response[0]?.totalPages ?? 1);
             setTotalCount(res?.data?.response[0]?.totalCount ?? null);
         },
+        onError: (error: AxiosError) => {
+            if (error.code === 'ERR_CANCELED' && !timeoutAbortRef.current) return;
+            timeoutAbortRef.current = false;
+            toast?.open({
+                type: 'error',
+                title: t('global.notificationError'),
+                message: 'Veateade',
+            });
+        },
     });
 
+    useEffect(() => {
+        if (getAllEndedChats.isPending) {
+            loadingTimeoutRef.current = setTimeout(() => {
+                timeoutAbortRef.current = true;
+                abortRef.current?.abort();
+            }, 10000);
+        } else if (loadingTimeoutRef.current) {
+                clearTimeout(loadingTimeoutRef.current);
+                loadingTimeoutRef.current = null;
+            }
+        return () => {
+            if (loadingTimeoutRef.current) clearTimeout(loadingTimeoutRef.current);
+        };
+    }, [getAllEndedChats.isPending]);
+
     const getChatById = useMutation({
         mutationFn: () =>
             apiDev.post('chats/get', {
@@ -347,27 +366,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         },
     });
 
-    const listCustomerSupportAgents = useMutation({
-        mutationFn: () =>
-            apiDev.post('accounts/customer-support-agents', {
-                page: 0,
-                page_size: 99999,
-                sorting: 'name asc',
-                show_active_only: false,
-                roles: ['ROLE_CUSTOMER_SUPPORT_AGENT'],
-            }),
-        onSuccess: (res: any) => {
-            setCustomerSupportAgents([
-                {label: 'Bürokratt', value: 'chatbot'},
-                ...res.data.response.map((item) => ({
-                    label: [item.firstName, item.lastName].join(' ').trim(),
-                    value: item.idCode,
-                })),
-            ]);
-        },
-    });
-
-    const visibleColumnOptions = useMemo(() => {
+    const realColumnOptions: {readonly label: string; readonly value: string}[] = useMemo(() => {
         const columns = [
             {label: t('chat.history.startTime'), value: 'created'},
             {label: t('chat.history.endTime'), value: 'ended'},
@@ -396,6 +395,49 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         return columns;
     }, [t, showEmail, testMessageEnabled])
 
+    const visibleColumnOptions = useMemo(() => [
+        {label: t('chat.history.chooseAll'), value: ALL_COLUMNS_VALUE},
+        ...realColumnOptions,
+    ], [t, realColumnOptions]);
+
+    const getRealSelectedColumns = (columns: string[]) =>
+        columns.filter((column) => column !== ALL_COLUMNS_VALUE);
+
+    const getAllColumnValues = () => realColumnOptions.map((option) => option.value);
+
+    const areAllColumnsSelected = (columns: string[]) => {
+        const realSelectedColumns = getRealSelectedColumns(columns);
+        const allColumnValues = getAllColumnValues();
+
+        return allColumnValues.length > 0 &&
+            allColumnValues.every((column) => realSelectedColumns.includes(column));
+    };
+
+    const getUiSelectedColumns = (columns: string[]) => {
+        const realSelectedColumns = getRealSelectedColumns(columns);
+
+        if (areAllColumnsSelected(realSelectedColumns)) {
+            return [ALL_COLUMNS_VALUE, ...getAllColumnValues()];
+        }
+
+        return realSelectedColumns;
+    };
+
+    const normalizeSelectedColumns = (selection: string[]) => {
+        const currentAllSelected = selectedColumns.includes(ALL_COLUMNS_VALUE) || areAllColumnsSelected(selectedColumns);
+        const nextAllSelected = selection.includes(ALL_COLUMNS_VALUE);
+
+        if (nextAllSelected && !currentAllSelected) {
+            return [ALL_COLUMNS_VALUE, ...getAllColumnValues()];
+        }
+
+        if (!nextAllSelected && currentAllSelected) {
+            return [];
+        }
+
+        return getUiSelectedColumns(selection);
+    };
+
     const chatStatusChangeMutation = useMutation({
         mutationFn: async (data: { chatId: string | number; event: string }) => {
             const changeableTo = [
@@ -430,7 +472,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
             getAllEndedChats.mutate({
                 startDate: formatISO(startOfDay(new Date(startDate))),
                 endDate: formatISO(endOfDay(new Date(endDate))),
-                customerSupportIds: passedCustomerSupportIds,
                 pagination,
                 sorting,
                 search,
@@ -898,9 +939,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
     };
 
     const getFilteredColumns = () => {
-        if (selectedColumns.length === 0) return endedChatsColumns;
+        const realSelectedColumns = getRealSelectedColumns(selectedColumns);
+
+        if (realSelectedColumns.length === 0) return endedChatsColumns;
         return endedChatsColumns.filter((c) =>
-            ['detail', 'forward', ...selectedColumns].includes(c.id ?? '')
+            ['detail', 'forward', ...realSelectedColumns].includes(c.id ?? '')
         );
     };
 
@@ -927,10 +970,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
         selectedColumns: string[],
         t: (key: string) => string
     ): ExportResult => {
+        const realSelectedColumns = getRealSelectedColumns(selectedColumns);
         const activeColumns =
-            selectedColumns.length > 0
+            realSelectedColumns.length > 0
                 ? allColumns.filter(
-                    (col) => col.id && col.id !== 'detail' && selectedColumns.includes(col.id)
+                    (col) => col.id && col.id !== 'detail' && realSelectedColumns.includes(col.id)
                 )
                 : allColumns.filter((col) => col.id && col.id !== 'detail');
 
@@ -1000,9 +1044,10 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 sortBy = `${sorting[0].id} ${sortType}`;
             }
 
-            const { headers } = mapChatsToExportRows([], endedChatsColumns, selectedColumns, t);
-            const activeColumns = selectedColumns.length > 0
-                ? endedChatsColumns.filter((col) => col.id && col.id !== 'detail' && selectedColumns.includes(col.id))
+            const realSelectedColumns = getRealSelectedColumns(selectedColumns);
+            const { headers } = mapChatsToExportRows([], endedChatsColumns, realSelectedColumns, t);
+            const activeColumns = realSelectedColumns.length > 0
+                ? endedChatsColumns.filter((col) => col.id && col.id !== 'detail' && realSelectedColumns.includes(col.id))
                 : endedChatsColumns.filter((col) => col.id && col.id !== 'detail');
             const columnIds = activeColumns.map((col) => col.id!);
 
@@ -1015,7 +1060,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 urls: getDomainsArray(currentDomains),
                 sorting: sortBy,
                 search,
-                customerSupportIds: passedCustomerSupportIds,
             });
 
             const downloadData = response.data.data ?? response.data;
@@ -1034,6 +1078,21 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
 
     const endUserFullName = getUserName();
 
+    const isClearFiltersVisible = useMemo(()=> {
+        return search.length > 0 || selectedColumns.length > 0;
+    }, [search, selectedColumns]);
+
+    const onClearFilersClick = () => {
+        const clearedColumns: string[] = [];
+        setSelectedColumns(clearedColumns);
+        setCounterKey(0);
+        setValue('search', '');
+        updatePagePreferences.mutate({
+            page_results: pagination.pageSize,
+            selected_columns: clearedColumns
+        });
+    };
+
     if (!filteredEndedChatsList) return <>Loading... {{filteredEndedChatsList}} something is wrong </>;
 
     return (
@@ -1059,27 +1118,30 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                 )}
             </div>
 
-            <Card>
+            <div className={`history-content${getAllEndedChats.isPending ? ' history-content--loading' : ''}`}>
+            <Card style={{marginBottom: '16px'}}>
                 <Track gap={16}>
                     {displaySearchBar && (
-                        <FormInput
-                            className="input-wrapper"
-                            label={t('chat.history.searchChats')}
-                            hideLabel
-                            name="searchChats"
-                            placeholder={t('chat.history.searchChats') + '...'}
-                            onChange={(e) => {
-                                setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
-                                setSearchParams((params) => {
-                                  params.set("page", "1");
-                                  return params;
-                                });
-                                setSearch(e.target.value);
-                                debouncedGetAllEnded(e.target.value);
-                            }}
-                        />)}
-
-                    <Track style={{width: '100%'}} gap={16}>
+                        <Controller name="search" control={control} render={({ field }) => {
+                            return <FormInput
+                                label={t('chat.history.searchChats')}
+                                hideLabel
+                                name="searchChats"
+                                value={field.value}
+                                placeholder={t('chat.history.searchChats') + '...'}
+                                onChange={(e) => {
+                                    setPagination({ pageIndex: 0, pageSize: pagination.pageSize });
+                                    setSearchParams((params) => {
+                                        params.set("page", "1");
+                                        return params;
+                                    });
+                                    field.onChange(e.target.value);
+                                    debouncedGetAllEnded(e.target.value);
+                                }}
+                            />
+                        }} />
+                    )}
+                    <Track gap={16}>
                         {displayDateFilter && (
                             <>
                                 <Track gap={10}>
@@ -1106,7 +1168,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                         getAllEndedChats.mutate({
                                                             startDate: start,
                                                             endDate: formatISO(endOfDay(new Date(endDate))),
-                                                            customerSupportIds: passedCustomerSupportIds,
                                                             pagination: resetPagination,
                                                             sorting,
                                                             search,
@@ -1141,7 +1202,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                                         getAllEndedChats.mutate({
                                                             startDate: formatISO(startOfDay(new Date(startDate))),
                                                             endDate: end,
-                                                            customerSupportIds: passedCustomerSupportIds,
                                                             pagination: resetPagination,
                                                             sorting,
                                                             search,
@@ -1154,6 +1214,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 </Track>
                             </>
                         )}
+                        <Track style={{width: '240px'}}>
                         <FormMultiselect
                             key={counterKey}
                             name="visibleColumns"
@@ -1163,54 +1224,18 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                             selectedOptions={visibleColumnOptions.filter((o) =>
                                 selectedColumns.includes(o.value)
                             )}
+                            selectedOptionsCount={getRealSelectedColumns(selectedColumns).length}
                             onSelectionChange={(selection) => {
-                                const columns = selection?.map((s) => s.value) ?? [];
+                                const columns = normalizeSelectedColumns(selection?.map((s) => s.value) ?? []);
                                 setSelectedColumns(columns);
+                                setCounterKey(prev => prev + 1);
                                 updatePagePreferences.mutate({
                                     page_results: pagination.pageSize,
-                                    selected_columns: columns
+                                    selected_columns: getRealSelectedColumns(columns)
                                 })
                             }}
-                        />
-                        <FormMultiselect
-                            name="agent"
-                            label={t('')}
-                            placeholder={t('chat.history.chosenCsa')}
-                            options={customerSupportAgents}
-                            selectedOptions={customerSupportAgents.filter((item) =>
-                                passedCustomerSupportIds.includes(item.value)
-                            )}
-                            onSelectionChange={(selection) => {
-                                setSearchParams((params) => {
-                                    params.delete('customerSupportIds');
-                                    params.set('page', '1');
-                                    selection?.forEach((s) => {
-                                      params.append("customerSupportIds", s.value);
-                                      if (s.value === "chatbot") params.append("customerSupportIds", "-");
-                                      return params;
-                                    });
-                                    return params;
-                                });
-
-                                setPagination({pageIndex: 0, pageSize: pagination.pageSize});
-
-                                const customerSupportIds =
-                                  selection?.reduce((acc, s) => {
-                                    acc.push(s.value);
-                                    if (s.value === "chatbot") acc.push("-");
-                                    return acc;
-                                  }, []) || [];
-
-                                getAllEndedChats.mutate({
-                                    startDate,
-                                    endDate,
-                                    customerSupportIds: customerSupportIds,
-                                    pagination: {pageIndex: 0, pageSize: pagination.pageSize},
-                                    sorting,
-                                    search,
-                                });
-                            }}
-                        />
+                            />
+                        </Track>
                     </Track>
                 </Track>
             </Card>
@@ -1222,6 +1247,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </Button>
                 </div>)
             }
+            {isClearFiltersVisible && (
+                <Track justify="between" style={{ marginBottom: '16px' }}>
+                    <ClearFiltersButton style={{ marginLeft: 'auto' }} onClick={onClearFilersClick} />
+                </Track>
+            )}
             <div className="card-drawer-container" style={{height: '100%', overflow: 'auto'}}>
                 <div className="card-wrapper">
                     <Card>
@@ -1242,12 +1272,11 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 setPagination(state);
                                 updatePagePreferences.mutate({
                                     page_results: state.pageSize,
-                                    selected_columns: selectedColumns
+                                    selected_columns: getRealSelectedColumns(selectedColumns)
                                 });
                                 getAllEndedChats.mutate({
                                     startDate: formatISO(startOfDay(new Date(startDate))),
                                     endDate: formatISO(endOfDay(new Date(endDate))),
-                                    customerSupportIds: passedCustomerSupportIds,
                                     pagination: state,
                                     sorting,
                                     search,
@@ -1258,7 +1287,6 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                                 getAllEndedChats.mutate({
                                     startDate: formatISO(startOfDay(new Date(startDate))),
                                     endDate: formatISO(endOfDay(new Date(endDate))),
-                                    customerSupportIds: passedCustomerSupportIds,
                                     pagination,
                                     sorting: state,
                                     search,
@@ -1433,6 +1461,7 @@ const ChatHistory: FC<PropsWithChildren<HistoryProps>> = ({
                     </>
                 )}
             </div>
+            </div>
 
             {statusChangeModal && (
                 <Dialog

package/translations/en/common.json

@@ -45,7 +45,8 @@
     "today": "Today",
     "forward": "Forward",
     "chosen": "Chosen",
-    "read": "Read"
+    "read": "Read",
+    "clearFilters": "Clear filters"
   },
   "sorting": {
     "des": "descending",
@@ -175,7 +176,8 @@
       "statusAdder": "Status adder",
       "statusAddedDate": "Status added date",
       "chosenCsa": "Chosen csa(s)",
-      "chosenColumn": "Chosen column(s)"
+      "chosenColumn": "Chosen column(s)",
+      "chooseAll": "Choose all"
     },
     "plainEvents": {
       "answered": "Answered",

package/translations/et/common.json

@@ -45,7 +45,8 @@
     "today": "Täna",
     "forward": "Suuna",
     "chosen": "Valitud",
-    "read": "Loetud"
+    "read": "Loetud",
+    "clearFilters": "Tühjenda filtrid"
   },
   "sorting": {
     "des": "kahanevalt",
@@ -175,7 +176,8 @@
       "statusAdder": "Staatuse lisaja",
       "statusAddedDate": "Staatuse lisamise kuupäev",
       "chosenCsa": "Valitud nõustaja(d)",
-      "chosenColumn": "Valitud tulba(d)"
+      "chosenColumn": "Valitud tulba(d)",
+      "chooseAll": "Vali kõik"
     },
     "plainEvents": {
       "answered": "Vastatud",

package/ui-components/Card/index.tsx

@@ -10,6 +10,7 @@ type CardProps = {
     isHeaderLight?: boolean;
     isBodyDivided?: boolean;
     isScrollable?: boolean;
+    style?: React.CSSProperties;
 };
 
 const Card: FC<PropsWithChildren<CardProps>> = ({
@@ -19,10 +20,11 @@ const Card: FC<PropsWithChildren<CardProps>> = ({
                                                     isHeaderLight,
                                                     isBodyDivided,
                                                     isScrollable = false,
+                                                    style,
                                                     children,
                                                 }) => {
     return (
-        <div className={clsx('card', { 'card--borderless': borderless, 'card--scrollable': isScrollable })}>
+        <div className={clsx('card', { 'card--borderless': borderless, 'card--scrollable': isScrollable })} style={style}>
             {header && (
                 <div className={`card__header ${isHeaderLight ? 'white' : ''}`}>
                     {header}

package/ui-components/ClearFiltersButton/index.tsx

@@ -0,0 +1,24 @@
+import { Button } from "@buerokratt-ria/header/src/components";
+import { ComponentProps, FC } from "react";
+import { useTranslation } from "react-i18next";
+import { MdFilterListOff } from "react-icons/md";
+
+type ClearFiltersButtonProps = {
+  readonly onClick: () => void;
+  readonly style?: Pick<ComponentProps<typeof Button>, 'style'>['style'];
+}
+
+const ClearFiltersButton: FC<ClearFiltersButtonProps> = ({ onClick, style }) => {
+  const { t } = useTranslation();
+
+  return <Button
+    appearance="primary"
+    size="s"
+    style={style}
+    onClick={onClick}>
+    {t('global.clearFilters')}
+    <MdFilterListOff style={{ height: '24px', width: '24px' }} />
+  </Button>
+};
+
+export default ClearFiltersButton;

package/ui-components/FormElements/FormSelect/FormMultiselect.tsx

@@ -16,6 +16,7 @@ type FormMultiselectProps = SelectHTMLAttributes<HTMLSelectElement> & {
     hideLabel?: boolean;
     options: SelectOption[];
     selectedOptions?: SelectOption[];
+    selectedOptionsCount?: number;
     onSelectionChange?: (selection: SelectOption[] | null) => void;
 };
 
@@ -28,6 +29,7 @@ const FormMultiselect: FC<FormMultiselectProps> = (
         placeholder,
         defaultValue,
         selectedOptions,
+        selectedOptionsCount,
         onSelectionChange,
         ...rest
     },
@@ -84,13 +86,14 @@ const FormMultiselect: FC<FormMultiselectProps> = (
     );
 
     const placeholderValue = placeholder || t('global.choose');
+    const displaySelectedCount = selectedOptionsCount ?? selectedItems.length;
 
     return (
         <div className={selectClasses} style={rest.style}>
             {label && !hideLabel && <label htmlFor={id} className='select__label' {...getLabelProps()}>{label}</label>}
             <div className='select__wrapper'>
                 <div className='select__trigger' {...getToggleButtonProps()}>
-                    {selectedItems.length > 0 ? `${placeholder ?? t('global.chosen')} (${selectedItems.length})` : placeholderValue}
+                    {selectedItems.length > 0 ? `${placeholder ?? t('global.chosen')} (${displaySelectedCount})` : placeholderValue}
                     <Icon label='Dropdown icon' size='medium' icon={<MdArrowDropDown color='#5D6071' />} />
                 </div>
 

package/ui-components/index.tsx

@@ -24,6 +24,7 @@ import Drawer from './Drawer';
 import HistoricalChat from './HistoricalChat';
 import Dialog from './Dialog';
 import Label from './Label';
+import ClearFiltersButton from './ClearFiltersButton';
 
 export {
     Button,
@@ -49,5 +50,6 @@ export {
     HistoricalChat,
     Dialog,
     Toast,
-    Label
+    Label,
+    ClearFiltersButton,
 };