@cccsaurora/howler-ui 3.1.0-dev.1493 → 3.1.0-dev.1602

package/components/routes/hits/search/shared/HitSort.js

@@ -6,7 +6,7 @@ import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/View
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import CustomSort from './CustomSort';
 const CUSTOM = '__custom__';
@@ -29,7 +29,7 @@ const HitSort = ({ size = 'small' }) => {
     const views = useContextSelector(ParameterContext, ctx => ctx.views);
     const savedSort = useContextSelector(ParameterContext, ctx => ctx.sort);
     const setSavedSort = useContextSelector(ParameterContext, ctx => ctx.setSort);
-    const sortEntries = useMemo(() => savedSort.split(',').filter(part => !!part), [savedSort]);
+    const sortEntries = useMemo(() => savedSort?.split(',').filter(part => !!part) ?? [], [savedSort]);
     /**
      * The currently selected field when not using custom sorting
      */
@@ -41,7 +41,7 @@ const HitSort = ({ size = 'small' }) => {
     /**
      * Should the custom sorter be shown? Defaults to true if there's more than one sort field, or we're sorting on a field not supported by the default dropdown
      */
-    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0]?.split(' ')[0])));
+    const [showCustomSort, setShowCustomSort] = useState(sortEntries.length > 1 || (sortEntries.length > 0 && !ACCEPTED_SORTS.includes(sortEntries[0].split(' ')[0])));
     /**
      * This handles changing the sort if the basic sorter is used, OR enables the custom sorting.
      */
@@ -49,7 +49,7 @@ const HitSort = ({ size = 'small' }) => {
         if (value === CUSTOM) {
             setShowCustomSort(true);
         }
-        else {
+        else if (value) {
             setSavedSort(`${value} ${sort}`);
         }
     }, [setSavedSort, sort]);
@@ -65,11 +65,13 @@ const HitSort = ({ size = 'small' }) => {
         })();
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [getCurrentViews, views]);
-    return (_jsx(ChipPopper, { icon: _jsx(Sort, { fontSize: "small" }), label: savedSort, slotProps: { chip: { size: 'small' } }, children: !showCustomSort ? (_jsxs(Stack, { spacing: 1, onClick: e => {
+    return (_jsx(ChipPopper, { icon: _jsx(Sort, { fontSize: "small" }), label: savedSort ?? '', slotProps: { chip: { size: 'small' } }, children: !showCustomSort ? (_jsxs(Stack, { spacing: 1, onClick: e => {
                 e.stopPropagation();
                 e.preventDefault();
             }, children: [_jsx(Autocomplete, { fullWidth: true, sx: { minWidth: '275px' }, size: size, value: field, options: ACCEPTED_SORTS, getOptionLabel: option => (option === CUSTOM ? t('hit.search.custom') : option), isOptionEqualToValue: (option, value) => option === value || (!value && option === ACCEPTED_SORTS[0]), renderInput: _params => _jsx(TextField, { ..._params, label: t('hit.search.sort.fields') }), onChange: (_, value) => handleChange(value) }), _jsx(Autocomplete, { fullWidth: true, size: size, sx: { minWidth: '150px' }, value: sort, onChange: (_e, value) => {
-                        setSavedSort(`${field} ${value}`);
+                        if (field && value) {
+                            setSavedSort(`${field} ${value}`);
+                        }
                     }, options: ['asc', 'desc'], getOptionLabel: option => t(option), renderInput: _params => _jsx(TextField, { ..._params }) })] })) : (_jsx(CustomSort, {})) }));
 };
 export default memo(HitSort);

package/components/routes/hits/search/shared/IndexPicker.js

@@ -15,7 +15,7 @@ const IndexPicker = ({ additionalOptions = [] }) => {
     const indexes = useContextSelector(ParameterContext, ctx => ctx.indexes);
     const setIndexes = useContextSelector(ParameterContext, ctx => ctx.setIndexes);
     const allOptions = [...FILTER_OPTIONS, ...additionalOptions];
-    const selectedOptions = allOptions.filter(opt => indexes.includes(opt.value));
+    const selectedOptions = allOptions.filter(opt => indexes?.includes(opt.value));
     return (_jsx(ChipPopper, { icon: _jsx(FilterList, { fontSize: "small" }), label: selectedOptions.map(opt => t(opt.label)).join(', '), minWidth: "225px", slotProps: { chip: { size: 'small' } }, children: _jsx(Autocomplete, { size: "small", multiple: true, options: allOptions, value: selectedOptions, onChange: (_ev, values) => values.length > 0 && setIndexes(values.map(val => val.value)), isOptionEqualToValue: (opt, val) => opt.value === val.value, getOptionLabel: opt => t(opt.label), renderInput: params => _jsx(TextField, { ...params }) }) }));
 };
 export default memo(IndexPicker);

package/components/routes/hits/search/shared/LayoutSettings.js

@@ -4,7 +4,7 @@ import { Checkbox, Divider, FormLabel, Stack, TextField, ToggleButton, ToggleBut
 import { RecordSearchContext } from '@cccsaurora/howler-ui/components/app/providers/RecordSearchProvider';
 import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPopper';
 import { HitLayout } from '@cccsaurora/howler-ui/components/elements/hit/HitLayout';
-import LayoutToggle from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
+import LayoutToggle, {} from '@cccsaurora/howler-ui/components/elements/view/LayoutToggle';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import { useTranslation } from 'react-i18next';
 import { useContextSelector } from 'use-context-selector';

package/components/routes/hits/search/shared/SearchActionMenu.d.ts

@@ -1,4 +1,4 @@
 declare const SearchActionMenu: ({ query }: {
     query: string;
-}) => import("react/jsx-runtime").JSX.Element;
+}) => import("react").JSX.Element;
 export default SearchActionMenu;

package/components/routes/hits/search/shared/SearchActionMenu.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SavedSearch, Terminal } from '@mui/icons-material';
 import { IconButton, Stack, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import LayoutSettings from './LayoutSettings';
 const SearchActionMenu = ({ query }) => {
     const { t } = useTranslation();

package/components/routes/hits/search/shared/SearchSpan.js

@@ -7,7 +7,7 @@ import ChipPopper from '@cccsaurora/howler-ui/components/elements/display/ChipPo
 import dayjs from 'dayjs';
 import { memo, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation } from 'react-router-dom';
+import { useLocation } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { convertLuceneToDate } from '@cccsaurora/howler-ui/utils/utils';
 import CustomSpan from './CustomSpan';

package/components/routes/hits/view/HitViewer.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from '@iconify/react';
 import { Code, Comment, DataObject, History, LinkSharp, QueryStats, ViewAgenda } from '@mui/icons-material';
 import { Badge, Box, CardContent, Collapse, IconButton, Skeleton, Stack, Tab, Tabs, Tooltip, useMediaQuery, useTheme } from '@mui/material';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
+import { PageCenter } from '@tui/core';
 import useMatchers from '@cccsaurora/howler-ui/components/app/hooks/useMatchers';
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { SocketContext } from '@cccsaurora/howler-ui/components/app/providers/SocketProvider';
@@ -25,7 +25,7 @@ import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/us
 import useMyUserList from '@cccsaurora/howler-ui/components/hooks/useMyUserList';
 import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate, useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import { getUserList } from '@cccsaurora/howler-ui/utils/recordFunctions';
@@ -37,6 +37,13 @@ export var Orientation;
     Orientation["VERTICAL"] = "vertical";
     Orientation["HORIZONTAL"] = "horizontal";
 })(Orientation || (Orientation = {}));
+const hasApiStatus = (error, status) => {
+    if (typeof error !== 'object' || error === null || !('cause' in error)) {
+        return false;
+    }
+    const { cause } = error;
+    return typeof cause === 'object' && cause !== null && 'api_status_code' in cause && cause.api_status_code === status;
+};
 const HitViewer = () => {
     const { t, i18n } = useTranslation();
     const params = useParams();
@@ -61,10 +68,10 @@ const HitViewer = () => {
                 return;
             }
             setUserIds(getUserList(hit));
-            setAnalytic(await getMatchingAnalytic(hit));
+            setAnalytic((await getMatchingAnalytic(hit)) ?? undefined);
         }
-        catch (err) {
-            if (err.cause?.api_status_code === 404) {
+        catch (error) {
+            if (hasApiStatus(error, 404)) {
                 void navigate('/404');
             }
         }
@@ -96,7 +103,9 @@ const HitViewer = () => {
     }, [emit, params.id, open]);
     const onOrientationChange = useCallback(() => setOrientation(orientation === Orientation.VERTICAL ? Orientation.HORIZONTAL : Orientation.VERTICAL), [orientation, setOrientation]);
     useEffect(() => {
-        void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+        if (hit) {
+            void getMatchingOverview(hit).then(_overview => setHasOverview(!!_overview));
+        }
     }, [getMatchingOverview, hit]);
     useEffect(() => {
         if (hasOverview && tab === 'details') {
@@ -111,12 +120,12 @@ const HitViewer = () => {
         if (!tab || !hit) {
             return;
         }
-        return {
+        const tabSections = {
             overview: () => _jsx(HitOverview, { hit: hit }),
             details: () => _jsx(ObjectDetails, { obj: hit }),
             hit_comments: () => _jsx(RecordComments, { record: hit, users: users }),
             hit_raw: () => _jsx(JSONViewer, { data: hit }),
-            hit_data: () => _jsx(JSONViewer, { data: hit?.howler?.data?.map(entry => tryParse(entry)), collapse: false }),
+            hit_data: () => (_jsx(JSONViewer, { data: (hit?.howler?.data?.map(entry => tryParse(entry)) ?? []), collapse: false })),
             hit_worklog: () => _jsx(RecordWorklog, { record: hit, users: users }),
             hit_related: () => _jsx(RecordRelated, { record: hit }),
             ...Object.fromEntries(hit?.howler.dossier?.map((lead, index) => ['lead:' + index, () => _jsx(LeadRenderer, { lead: lead, hit: hit })]) ?? []),
@@ -124,7 +133,8 @@ const HitViewer = () => {
                 `external-lead:${dossierIndex}:${leadIndex}`,
                 () => _jsx(LeadRenderer, { lead: _lead, hit: hit })
             ])))
-        }[tab]?.();
+        };
+        return tabSections[tab]?.();
     }, [dossiers, hit, tab, users]);
     useEffect(() => {
         if (!hit) {
@@ -153,9 +163,9 @@ const HitViewer = () => {
                                     right: theme.spacing(-6)
                                 }, children: [_jsx(Tooltip, { title: t('hit.panel.view.layout'), children: _jsx(IconButton, { onClick: onOrientationChange, children: _jsx(ViewAgenda, { sx: { transition: 'rotate 250ms', rotate: orientation === 'vertical' ? '90deg' : '0deg' } }) }) }), _jsx(SocketBadge, { size: "medium" }), analytic && (_jsx(Tooltip, { title: t('analytic.open'), children: _jsx(IconButton, { onClick: () => navigate(`/analytics/${analytic.analytic_id}`), children: _jsx(QueryStats, {}) }) }))] }))] }), _jsx(HowlerCard, { sx: [orientation === 'horizontal' && { height: '0px' }], children: _jsx(CardContent, { sx: { padding: 1, position: 'relative' }, children: _jsx(HitActions, { hit: hit, orientation: "vertical" }) }) }), _jsx(Box, { sx: { gridColumn: '1 / span 2', mb: 1 }, children: _jsxs(Tabs, { value: tab === 'overview' && !hasOverview ? 'details' : tab, sx: { display: 'flex', flexDirection: 'row', pr: 2, alignItems: 'center' }, children: [hasOverview && (_jsx(Tab, { label: t('hit.viewer.overview'), value: "overview", onClick: () => setTab('overview') })), _jsx(Tab, { label: t('hit.viewer.details'), value: "details", onClick: () => setTab('details') }), hit?.howler.dossier?.map((lead, index) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key
-                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label.en : lead.label.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [lead.icon && _jsx(Icon, { icon: lead.icon }), _jsx("span", { children: i18n.language === 'en' ? lead.label?.en : lead.label?.fr })] }), value: 'lead:' + index, onClick: () => setTab('lead:' + index) }, 'lead:' + index))), dossiers.flatMap((_dossier, dossierIndex) => (_dossier.leads ?? []).map((_lead, leadIndex) => (_jsx(Tab
                                 // eslint-disable-next-line react/no-array-index-key
-                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label.en : _lead.label.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
+                                , { label: _jsxs(Stack, { direction: "row", spacing: 0.5, children: [_lead.icon && _jsx(Icon, { icon: _lead.icon }), _jsx("span", { children: i18n.language === 'en' ? _lead.label?.en : _lead.label?.fr })] }), value: `external-lead:${dossierIndex}:${leadIndex}`, onClick: () => setTab(`external-lead:${dossierIndex}:${leadIndex}`) }, `external-lead:${dossierIndex}:${leadIndex}`)))), _jsx(FlexOne, {}), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.data'), children: _jsx(DataObject, {}) }), value: "hit_data", onClick: () => setTab('hit_data'), disabled: !hit?.howler?.data }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.json'), children: _jsx(Code, {}) }), value: "hit_raw", onClick: () => setTab('hit_raw') }), _jsx(Tab, { sx: { px: 2, minWidth: 0 }, label: _jsx(Tooltip, { title: t('hit.viewer.comments'), children: _jsx(Badge, { sx: {
                                                 '& > .MuiBadge-badge': {
                                                     backgroundColor: theme.palette.divider,
                                                     zIndex: 1,

package/components/routes/hits/view/HitViewer.test.js

@@ -38,8 +38,8 @@ vi.mock('react-i18next', () => ({
         i18n: { language: 'en' }
     })
 }));
-vi.mock('react-router-dom', async () => {
-    const actual = await vi.importActual('react-router-dom');
+vi.mock('react-router', async () => {
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         useNavigate: () => mockNavigate,

package/components/routes/home/AddNewCard.d.ts

@@ -1,7 +1,8 @@
 import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
 import type { FC } from 'react';
+type DashboardCard = NonNullable<HowlerUser['dashboard']>[number];
 declare const AddNewCard: FC<{
     dashboard: HowlerUser['dashboard'];
-    addCard: (newCard: any) => void;
+    addCard: (newCard: DashboardCard) => void;
 }>;
 export default AddNewCard;

package/components/routes/home/AddNewCard.js

@@ -53,6 +53,9 @@ const AddNewCard = ({ dashboard, addCard }) => {
                 rows: batchSize,
                 offset
             });
+            if (!response) {
+                break;
+            }
             allAnalytics = [...allAnalytics, ...(response.items ?? [])];
             total = response.total ?? 0;
             offset += batchSize;
@@ -64,7 +67,7 @@ const AddNewCard = ({ dashboard, addCard }) => {
         void fetchAllAnalytics();
     }, []);
     const filteredAnalyticVisualizations = useMemo(() => {
-        const existingAnalyticCards = dashboard.filter(_card => _card.type === 'analytic');
+        const existingAnalyticCards = (dashboard ?? []).filter(_card => _card.type === 'analytic');
         return VISUALIZATIONS.filter(viz => {
             return !existingAnalyticCards.some(_card => {
                 const parsedConfig = JSON.parse(_card.config);
@@ -92,12 +95,12 @@ const AddNewCard = ({ dashboard, addCard }) => {
             setViewLoading(false);
         }
     }, [fetchViews]);
-    return (_jsx(Grid, { item: true, xs: 12, md: 6, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
+    return (_jsx(Grid, { size: { xs: 12, md: 6 }, children: _jsxs(Card, { variant: "outlined", sx: { height: '100%' }, children: [_jsx(CardHeader, { title: t('route.home.add'), subheader: _jsx(Typography, { variant: "body2", color: "text.secondary", children: t('route.home.add.description') }) }), _jsx(CardContent, { children: _jsxs(Stack, { spacing: 1, children: [_jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.type') }), _jsx(Select, { value: selectedType, onChange: event => setSelectedType(event.target.value), label: t('route.home.add.type'), children: Object.keys(TYPES).map(type => (_jsx(MenuItem, { value: type, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.type.${type}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.type.${type}.description`) })] }) }, type))) })] }), selectedType && _jsx(Divider, { flexItem: true }), selectedType === 'analytic' && (_jsxs(_Fragment, { children: [_jsx(Typography, { variant: "body1", children: t('route.home.add.analytic.title') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.analytic.description') }), _jsx(Autocomplete, { sx: { pt: 1 }, onChange: (__, opt) => setConfig('analyticId', opt.analytic_id), loading: analyticsLoading, options: analytics, filterOptions: (options, state) => options.filter(opt => opt.name.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                             opt.description?.split('\n')[0]?.toLowerCase().includes(state.inputValue.toLowerCase())), renderOption: (props, option) => (_createElement("li", { ...props, key: option.analytic_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name, renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: option.name }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.description?.split('\n')[0] })] }))), getOptionLabel: option => option.name ?? '', renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.analytic') }) }), _jsxs(FormControl, { sx: theme => ({ mt: `${theme.spacing(2)} !important` }), children: [_jsx(InputLabel, { children: t('route.home.add.visualization') }), _jsx(Select, { value: config.type ?? '', onChange: event => setConfig('type', event.target.value), label: t('route.home.add.visualization'), children: filteredAnalyticVisualizations.length > 0 ? (filteredAnalyticVisualizations.map(viz => (_jsx(MenuItem, { value: viz, children: _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(`route.home.add.visualization.${viz}`) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(`route.home.add.visualization.${viz}.description`) })] }) }, viz)))) : (_jsx(MenuItem, { disabled: true, children: _jsx(Typography, { variant: "body1", color: "text.secondary", children: t('route.home.add.visualization.unavailable') }) })) })] })] })), selectedType === 'view' && (_jsxs(_Fragment, { children: [_jsx(Autocomplete, { sx: { pt: 1 }, value: views[config.viewId] || null, onChange: (__, opt) => setConfig('viewId', opt.view_id), onOpen: onViewOpen, onClose: () => setViewOpen(false), open: viewOpen, loading: viewLoading, options: Object.values(views), filterOptions: (options, state) => options.filter(opt => !!opt &&
                                             !dashboard?.find(entry => entry.type === 'view' && JSON.parse(entry.config).viewId === opt.view_id) &&
                                             (opt.title.toLowerCase().includes(state.inputValue.toLowerCase()) ||
                                                 opt.query.toLowerCase().includes(state.inputValue.toLowerCase()))), renderOption: (props, option) => (_createElement("li", { ...props, key: option.view_id },
-                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
+                                            _jsxs(Stack, { children: [_jsx(Typography, { variant: "body1", children: t(option.title) }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: option.query })] }))), getOptionLabel: option => t(option.title), renderInput: params => _jsx(TextField, { ...params, label: t('route.home.add.view') }) }), _jsx(Typography, { variant: "body1", sx: { pt: 1 }, children: t('route.home.add.limit') }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: t('route.home.add.limit.description') }), _jsx(Box, { sx: { px: 0.5 }, children: _jsx(Slider, { value: config.limit ?? 3, valueLabelDisplay: "auto", onChange: (_, value) => setConfig('limit', Array.isArray(value) ? value[0] : value), min: 1, max: 10, step: 1, marks: true }) })] })), _jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(CustomButton, { variant: "outlined", size: "small", color: "primary", startIcon: _jsx(Check, {}), disabled: !selectedType || TYPES[selectedType]?.filter(field => !config[field])?.length > 0, onClick: _addCard, children: t('create') }) })] }) })] }) }));
 };
 export default AddNewCard;

package/components/routes/home/AnalyticCard.js

@@ -5,7 +5,7 @@ import { AnalyticContext } from '@cccsaurora/howler-ui/components/app/providers/
 import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
 import { memo, useContext, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Assessment from '../analytics/widgets/Assessment';
 import Created from '../analytics/widgets/Created';
 import Detection from '../analytics/widgets/Detection';
@@ -13,9 +13,9 @@ import Escalation from '../analytics/widgets/Escalation';
 import Status from '../analytics/widgets/Status';
 const AnalyticCard = ({ analyticId, type }) => {
     const { t } = useTranslation();
-    const [analytic, setAnalytic] = useState(null);
+    const [analytic, setAnalytic] = useState();
     const { getAnalyticFromId } = useContext(AnalyticContext);
-    const chartRef = useRef();
+    const chartRef = useRef(undefined);
     useEffect(() => {
         void getAnalyticFromId(analyticId).then(setAnalytic);
     }, [analyticId, getAnalyticFromId]);

package/components/routes/home/EntryWrapper.js

@@ -5,7 +5,7 @@ import { Delete } from '@mui/icons-material';
 import { Box, Grid, IconButton } from '@mui/material';
 const EntryWrapper = ({ editing, id, children, onDelete }) => {
     const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id, disabled: !editing });
-    return (_jsxs(Grid, { item: true, ref: setNodeRef, xs: 12, md: 6, sx: { position: 'relative' }, style: { transform: CSS.Translate.toString(transform), transition }, children: [editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "error", sx: theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 }), onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }), _jsx(Box, { ...attributes, ...listeners, sx: {
+    return (_jsxs(Grid, { ref: setNodeRef, size: { xs: 12, md: 6 }, sx: { position: 'relative' }, style: { transform: CSS.Translate.toString(transform), transition }, children: [editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { color: "error", sx: theme => ({ position: 'absolute', top: theme.spacing(2), right: theme.spacing(1), zIndex: 10 }), onClick: onDelete, children: _jsx(Delete, { fontSize: "small" }) }), _jsx(Box, { ...attributes, ...listeners, sx: {
                             zIndex: 9,
                             position: 'absolute',
                             backgroundColor: 'background.paper',

package/components/routes/home/ViewCard.js

@@ -1,8 +1,8 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { OpenInNew } from '@mui/icons-material';
 import { Card, CardContent, IconButton, Skeleton, Stack, Typography } from '@mui/material';
+import { AppListEmpty } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
-import AppListEmpty from '@cccsaurora/howler-ui/commons/components/display/AppListEmpty';
 import { useRecordContextSelector } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 import EventCard from '@cccsaurora/howler-ui/components/elements/event/EventCard';
@@ -12,7 +12,7 @@ import RecordContextMenu from '@cccsaurora/howler-ui/components/elements/record/
 import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link, useNavigate } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router';
 import { useContextSelector } from 'use-context-selector';
 import { isEvent } from '@cccsaurora/howler-ui/utils/typeUtils';
 import { convertDateToLucene } from '@cccsaurora/howler-ui/utils/utils';
@@ -24,7 +24,7 @@ const useSelectRecordsByIds = (recordIds) => {
     const prevRecordIdsRef = useRef([]);
     // Keep ref up to date with latest recordIds
     recordIdsRef.current = recordIds;
-    const selector = useCallback(ctx => {
+    const selector = useCallback((ctx) => {
         const currentRecordIds = recordIdsRef.current;
         // Fast path: if recordIds array didn't change, check if record objects changed
         if (prevRecordIdsRef.current.length === currentRecordIds.length &&
@@ -56,8 +56,9 @@ const createRecordSignature = (record) => {
     return `${record.howler?.id}:${normalize(record.howler?.status)}:${normalize(record.howler?.assignment)}:${normalize(record.howler?.assessment)}`;
 };
 const createSignatureFromRecords = (records) => {
-    if (records.length === 0)
+    if (records.length === 0) {
         return '';
+    }
     return records.map(createRecordSignature).join('|');
 };
 const DEBOUNCE_TIME = 1000; // 1 second debounce for signature changes
@@ -81,7 +82,7 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
     const refreshView = useCallback(async () => {
         if (!view?.query || isRefreshing.current) {
             onRefreshComplete?.();
-            return;
+            return '';
         }
         isRefreshing.current = true;
         try {
@@ -92,6 +93,9 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
                 filters: view.span ? [`event.created:${convertDateToLucene(view.span)}`] : [],
                 metadata: ['analytic']
             }));
+            if (!res) {
+                return;
+            }
             const fetchedRecords = res.items ?? [];
             loadRecords(fetchedRecords);
             setRecordIds(fetchedRecords.map(r => r.howler.id));
@@ -156,10 +160,10 @@ const ViewCard = ({ viewId, limit, refreshTick, onRefreshComplete }) => {
         const target = event.target;
         const selectedElement = target.closest('[id]');
         if (!selectedElement) {
-            return;
+            return '';
         }
         return selectedElement.id;
     }, []);
-    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title) || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(EventCard, { event: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
+    return (_jsx(Card, { variant: "outlined", sx: { height: '100%' }, children: _jsxs(Stack, { spacing: 1, sx: { p: 1, minHeight: 100 }, children: [_jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsx(Typography, { variant: "h6", children: t(view?.title ?? '') || _jsx(Skeleton, { variant: "text", height: "2em", width: "100px" }) }), _jsx(IconButton, { size: "small", component: Link, disabled: !view, to: view ? buildViewUrl(view) : '', onClick: () => onClick(view.query), children: _jsx(OpenInNew, { fontSize: "small" }) })] }), loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { height: 150, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 160, width: "100%", variant: "rounded" }), _jsx(Skeleton, { height: 140, width: "100%", variant: "rounded" })] })) : records.length > 0 ? (_jsx(RecordContextMenu, { getSelectedId: getSelectedId, children: records.map((r) => (_jsx(Card, { id: r.howler.id, variant: "outlined", sx: { cursor: 'pointer' }, onClick: () => navigate(`/hits/${r.howler.id}`), children: _jsx(CardContent, { children: r.__index == 'hit' ? (_jsx(HitBanner, { layout: HitLayout.DENSE, hit: r })) : (_jsx(EventCard, { event: r })) }) }, r.howler.id))) })) : (_jsx(AppListEmpty, {}))] }) }));
 };
 export default ViewCard;

package/components/routes/home/ViewCard.test.js

@@ -24,9 +24,9 @@ const mockSearchPost = vi.hoisted(() => vi.fn());
 vi.mock('components/hooks/useMyApi', () => ({
     default: () => ({ dispatchApi: mockDispatchApi })
 }));
-vi.mock('react-router-dom', async () => {
+vi.mock('react-router', async () => {
     // oxlint-disable-next-line consistent-type-imports
-    const actual = await vi.importActual('react-router-dom');
+    const actual = await vi.importActual('react-router');
     return {
         ...actual,
         Link: ({ children, to, ...props }) => (_jsx("a", { href: to, ...props, children: children })),
@@ -66,9 +66,6 @@ vi.mock('components/elements/event/EventCard', () => ({
 vi.mock('components/elements/record/RecordContextMenu', () => ({
     default: ({ children }) => _jsx("div", { children: children })
 }));
-vi.mock('commons/components/display/AppListEmpty', () => ({
-    default: () => _jsx("div", { children: "No records" })
-}));
 import { RecordContext } from '@cccsaurora/howler-ui/components/app/providers/RecordProvider';
 import { ViewContext } from '@cccsaurora/howler-ui/components/app/providers/ViewProvider';
 const hit = {
@@ -121,7 +118,7 @@ describe('ViewCard', () => {
     it('renders the empty state when the search has no records', async () => {
         mockDispatchApi.mockResolvedValue({ items: [] });
         render(_jsx(ViewCard, { viewId: "view-1", limit: 3 }), { wrapper: Wrapper });
-        expect(await screen.findByText('No records')).toBeInTheDocument();
+        expect(await screen.findByText('No Results')).toBeInTheDocument();
     });
     it('renders hits and events returned by the search', async () => {
         mockDispatchApi.mockResolvedValue({ items: [hit, event] });

package/components/routes/home/index.js

@@ -3,19 +3,19 @@ import { DndContext, KeyboardSensor, PointerSensor, closestCenter, useSensor, us
 import { SortableContext, arrayMove, sortableKeyboardCoordinates } from '@dnd-kit/sortable';
 import { Cancel, Check, Close, OpenInNew } from '@mui/icons-material';
 import { Alert, AlertTitle, CircularProgress, Grid, IconButton, Stack, Typography } from '@mui/material';
+import { PageCenter, useAppUser } from '@tui/core';
 import api from '@cccsaurora/howler-ui/api';
 import { AppBrand } from '@cccsaurora/howler-ui/branding/AppBrand';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import PageCenter from '@cccsaurora/howler-ui/commons/components/pages/PageCenter';
 import { AppBarContext } from '@cccsaurora/howler-ui/components/app/providers/AppBarProvider';
 import CustomButton from '@cccsaurora/howler-ui/components/elements/addons/buttons/CustomButton';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
 import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
 import useMyUserFunctions from '@cccsaurora/howler-ui/components/hooks/useMyUserFunctions';
 import dayjs from 'dayjs';
 import isEqual from 'lodash-es/isEqual';
 import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
 import ErrorBoundary from '../ErrorBoundary';
 import AddNewCard from './AddNewCard';
@@ -27,6 +27,7 @@ import ViewRefresh, {} from './ViewRefresh';
 const LUCENE_DATE_FMT = 'YYYY-MM-DD[T]HH:mm:ss';
 const Home = () => {
     const { t } = useTranslation();
+    const { dispatchApi } = useMyApi();
     const { user, setUser } = useAppUser();
     const { addToAppBar, removeFromAppBar } = useContext(AppBarContext);
     const { setDashboard, setRefreshRate: setRefreshRateBackend } = useMyUserFunctions();
@@ -37,7 +38,7 @@ const Home = () => {
     const [updatedHitTotal, setUpdatedHitTotal] = useState(0);
     const [dashboard, setStateDashboard] = useState(user.dashboard ?? []);
     const [refreshRate, setRefreshRate] = useState(user.refresh_rate ?? 15);
-    const [refreshTick, setRefreshTick] = useState(null);
+    const [refreshTick, setRefreshTick] = useState();
     const viewRefreshRef = useRef(null);
     const debounceTimerRef = useRef(null);
     const updateQuery = useMemo(() => `(howler.log.user:${user.username} OR howler.assignment:${user.username}) AND howler.log.timestamp:{${lastViewed} TO now} AND -howler.status:resolved`, [lastViewed, user.username]);
@@ -54,17 +55,17 @@ const Home = () => {
         }
     }, []);
     const setLocalDashboard = useCallback((_dashboard) => {
-        setStateDashboard(_dashboard);
+        setStateDashboard(_dashboard ?? []);
     }, []);
     const handleRefreshComplete = useCallback(() => {
         viewRefreshRef.current?.handleRefreshComplete();
     }, []);
     const handleRefreshRateChange = useCallback((newRate) => {
         setRefreshRate(newRate);
-        setUser(prev => ({
-            ...prev,
+        setUser({
+            ...user,
             refresh_rate: newRate
-        }));
+        });
         // Debounce the backend API call
         if (debounceTimerRef.current) {
             clearTimeout(debounceTimerRef.current);
@@ -72,7 +73,7 @@ const Home = () => {
         debounceTimerRef.current = setTimeout(() => {
             void setRefreshRateBackend(newRate);
         }, 500);
-    }, [setRefreshRateBackend, setUser]);
+    }, [setRefreshRateBackend, setUser, user]);
     const handleRefresh = useCallback(() => {
         setRefreshTick(Symbol());
     }, []);
@@ -91,25 +92,27 @@ const Home = () => {
         }
     }, [dashboard, setDashboard, setUser, user]);
     const discardChanges = useCallback(() => {
-        setStateDashboard(user.dashboard);
+        setStateDashboard(user.dashboard ?? []);
         setIsEditing(false);
     }, [user.dashboard]);
     const handleDragEnd = useCallback((event) => {
         const { active, over } = event;
-        if (active.id !== over.id) {
+        if (over && active.id !== over.id) {
             const oldIndex = (dashboard ?? []).findIndex(entry => getIdFromEntry(entry) === active.id);
             const newIndex = (dashboard ?? []).findIndex(entry => getIdFromEntry(entry) === over.id);
             setLocalDashboard(arrayMove(dashboard, oldIndex, newIndex));
         }
     }, [dashboard, getIdFromEntry, setLocalDashboard]);
     useEffect(() => {
-        void api.search.hit
-            .post({
+        void dispatchApi(api.search.hit.post({
             query: updateQuery,
             rows: 0
-        })
-            .then(result => setUpdatedHitTotal(result.total));
-    }, [updateQuery]);
+        }), { throwError: false }).then(result => {
+            if (result) {
+                setUpdatedHitTotal(result.total);
+            }
+        });
+    }, [updateQuery, dispatchApi]);
     useEffect(() => {
         return () => {
             if (debounceTimerRef.current)
@@ -150,7 +153,7 @@ const Home = () => {
                                         else {
                                             return null;
                                         }
-                                    }), isEditing && (_jsx(AddNewCard, { dashboard: dashboard, addCard: newCard => setStateDashboard(_dashboard => [...(_dashboard ?? []), newCard]) })), !dashboard?.length && !isEditing && (_jsx(Grid, { item: true, xs: 12, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: theme => ({
+                                    }), isEditing && (_jsx(AddNewCard, { dashboard: dashboard, addCard: newCard => setStateDashboard(_dashboard => [...(_dashboard ?? []), newCard]) })), !dashboard?.length && !isEditing && (_jsx(Grid, { size: 12, children: _jsxs(Stack, { direction: "column", spacing: 2, sx: theme => ({
                                                 height: '60vh',
                                                 borderStyle: 'dashed',
                                                 borderColor: theme.palette.text.secondary,

package/components/routes/overviews/OverviewCard.js

@@ -17,11 +17,15 @@ const OverviewCard = ({ overview, error, className, onRemove }) => {
             await onRemove?.(id);
         });
     }, [onRemove, withConfirmDeleteModal]);
-    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(overview.analytic), " - ", t(overview.detection ?? 'all')] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: _jsx("pre", { children: overview.content
+    return (_jsx(Card, { variant: "outlined", sx: { p: 1, mb: 1 }, className: className, children: _jsxs(Stack, { direction: "row", alignItems: "center", spacing: 1, children: [_jsxs(Stack, { children: [_jsxs(Typography, { variant: "body1", children: [t(overview.analytic), " - ", t(overview.detection ?? 'all')] }), _jsx(Typography, { variant: "caption", color: "text.secondary", children: _jsx("code", { children: _jsx("pre", { children: (overview.content ?? '')
                                         .split('\n')
                                         .filter(line => !!line)
                                         .slice(0, 3)
                                         .map(content => content.replace(/(.{,64}).+/, '$1'))
-                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onRemove && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete?.(e, overview.overview_id), children: _jsx(Delete, {}) }) })), error && (_jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => onRemove?.(overview.overview_id), title: t('route.overviews.manager.error.modal.title'), description: t('route.overviews.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, overview.overview_id));
+                                        .join('\n') }) }) })] }), _jsx(FlexOne, {}), _jsx(HowlerAvatar, { sx: { height: '24px', width: '24px' }, userId: overview.owner }), onRemove && (_jsx(Tooltip, { title: t('route.overviews.manager.delete'), children: _jsx(IconButton, { onClick: e => onDelete?.(e, overview.overview_id), children: _jsx(Delete, {}) }) })), error && (_jsx(Stack, { direction: "row", justifyContent: "end", children: _jsx(Stack, { children: _jsx(Tooltip, { title: t('error.invalid_detection.action'), children: _jsx(Button, { startIcon: _jsx(ReportProblem, {}), color: "warning", onClick: () => showModal(_jsx(ConfirmDeleteModal, { onConfirm: () => {
+                                        if (overview.overview_id) {
+                                            void onRemove?.(overview.overview_id);
+                                        }
+                                    }, title: t('route.overviews.manager.error.modal.title'), description: t('route.overviews.manager.error.modal.description'), preferDelete: true })), children: t('error.invalid_detection.message') }) }) }) }))] }) }, overview.overview_id));
 };
 export default OverviewCard;

package/components/routes/overviews/OverviewViewer.d.ts

@@ -1,2 +1,2 @@
-declare const OverviewViewer: () => import("react/jsx-runtime").JSX.Element;
+declare const OverviewViewer: () => import("react").JSX.Element;
 export default OverviewViewer;