@trackunit/filters-asset-filter-definitions 1.11.116 → 1.12.4

package/index.cjs.js

@@ -12,9 +12,9 @@ var reactFilterComponents = require('@trackunit/react-filter-components');
 var reactFormComponents = require('@trackunit/react-form-components');
 var utilizationIndicator = require('@trackunit/utilization-indicator');
 var geoJsonUtils = require('@trackunit/geo-json-utils');
+var zod = require('zod');
 var reactComponents = require('@trackunit/react-components');
 var stringTs = require('string-ts');
-var zod = require('zod');
 var sharedUtils = require('@trackunit/shared-utils');
 var translationsMachineType = require('@trackunit/translations-machine-type');
 var criticalityIndicator = require('@trackunit/criticality-indicator');
@@ -65,6 +65,20 @@ var defaultTranslations = {
 	"assetFilters.criticality.CRITICAL": "Critical",
 	"assetFilters.criticality.LOW": "Low",
 	"assetFilters.criticality.NONE": "Good",
+	"assetFilters.deviceHealthIssueCategories": "Issue Categories",
+	"assetFilters.deviceHealthIssueCategory.coverageIssues": "Coverage",
+	"assetFilters.deviceHealthIssueCategory.deviceBatteryIssues": "Device battery",
+	"assetFilters.deviceHealthIssueCategory.installAndConfigurationHealth": "Install and configuration",
+	"assetFilters.deviceHealthIssueCategory.nonReportingUnit": "Non reporting devices",
+	"assetFilters.deviceHealthIssueType.dataNotReceived": "Data not received",
+	"assetFilters.deviceHealthIssueType.installationValidationMissing": "Installation validation missing",
+	"assetFilters.deviceHealthIssueType.lowCellularCoverage": "Low cellular coverage",
+	"assetFilters.deviceHealthIssueType.lowDeviceBatteryVoltage": "Low device battery voltage",
+	"assetFilters.deviceHealthIssueType.lowDeviceInputVoltage": "Low device input voltage",
+	"assetFilters.deviceHealthIssueType.lowGpsCoverage": "Low GPS coverage",
+	"assetFilters.deviceHealthIssueType.noCanDataConfiguration": "No CAN data",
+	"assetFilters.deviceHealthIssueType.operatingHours": "Unusual operating hours",
+	"assetFilters.deviceHealthIssueTypes": "Issue Types",
 	"assetFilters.followedFilter.label": "Followed",
 	"assetFilters.hourIntervalFilter.label": "Hour interval",
 	"assetFilters.lastSeenFilter.anytime": "Any time",
@@ -448,6 +462,22 @@ const assetCriticalityState = {
     LOW: "LOW",
     NONE: "NONE",
 };
+const fleetDataHealthIssueCategory = {
+    COVERAGE_ISSUES: "COVERAGE_ISSUES",
+    DEVICE_BATTERY_ISSUES: "DEVICE_BATTERY_ISSUES",
+    INSTALL_AND_CONFIGURATION_HEALTH: "INSTALL_AND_CONFIGURATION_HEALTH",
+    NON_REPORTING_UNIT: "NON_REPORTING_UNIT",
+};
+const fleetDataHealthIssueType = {
+    DATA_NOT_RECEIVED: "DATA_NOT_RECEIVED",
+    INSTALLATION_VALIDATION_MISSING: "INSTALLATION_VALIDATION_MISSING",
+    LOW_CELLULAR_COVERAGE: "LOW_CELLULAR_COVERAGE",
+    LOW_DEVICE_BATTERY_VOLTAGE: "LOW_DEVICE_BATTERY_VOLTAGE",
+    LOW_DEVICE_INPUT_VOLTAGE: "LOW_DEVICE_INPUT_VOLTAGE",
+    LOW_GPS_COVERAGE: "LOW_GPS_COVERAGE",
+    NO_CAN_DATA_CONFIGURATION: "NO_CAN_DATA_CONFIGURATION",
+    OPERATING_HOURS: "OPERATING_HOURS",
+};
 const servicePlanStatus = {
     COMPLETE: "COMPLETE",
     DRAFT: "DRAFT",
@@ -461,6 +491,124 @@ const servicePlanStatus = {
     UNKNOWN: "UNKNOWN",
     UPCOMING: "UPCOMING",
 };
+const DeviceHealthIssueCategorySummariesDocument = {
+    kind: "Document",
+    definitions: [
+        {
+            kind: "OperationDefinition",
+            operation: "query",
+            name: { kind: "Name", value: "DeviceHealthIssueCategorySummaries" },
+            variableDefinitions: [
+                {
+                    kind: "VariableDefinition",
+                    variable: { kind: "Variable", name: { kind: "Name", value: "filters" } },
+                    type: { kind: "NamedType", name: { kind: "Name", value: "AssetFiltersInput" } },
+                },
+            ],
+            selectionSet: {
+                kind: "SelectionSet",
+                selections: [
+                    {
+                        kind: "Field",
+                        name: { kind: "Name", value: "assetSummary" },
+                        arguments: [
+                            {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "filters" },
+                                value: { kind: "Variable", name: { kind: "Name", value: "filters" } },
+                            },
+                        ],
+                        selectionSet: {
+                            kind: "SelectionSet",
+                            selections: [
+                                {
+                                    kind: "Field",
+                                    name: { kind: "Name", value: "fleetHealthCategoriesSummary" },
+                                    selectionSet: {
+                                        kind: "SelectionSet",
+                                        selections: [
+                                            {
+                                                kind: "Field",
+                                                name: { kind: "Name", value: "summary" },
+                                                selectionSet: {
+                                                    kind: "SelectionSet",
+                                                    selections: [
+                                                        { kind: "Field", name: { kind: "Name", value: "count" } },
+                                                        { kind: "Field", name: { kind: "Name", value: "key" } },
+                                                    ],
+                                                },
+                                            },
+                                            { kind: "Field", name: { kind: "Name", value: "total" } },
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
+const DeviceHealthIssueTypeSummariesDocument = {
+    kind: "Document",
+    definitions: [
+        {
+            kind: "OperationDefinition",
+            operation: "query",
+            name: { kind: "Name", value: "DeviceHealthIssueTypeSummaries" },
+            variableDefinitions: [
+                {
+                    kind: "VariableDefinition",
+                    variable: { kind: "Variable", name: { kind: "Name", value: "filters" } },
+                    type: { kind: "NamedType", name: { kind: "Name", value: "AssetFiltersInput" } },
+                },
+            ],
+            selectionSet: {
+                kind: "SelectionSet",
+                selections: [
+                    {
+                        kind: "Field",
+                        name: { kind: "Name", value: "assetSummary" },
+                        arguments: [
+                            {
+                                kind: "Argument",
+                                name: { kind: "Name", value: "filters" },
+                                value: { kind: "Variable", name: { kind: "Name", value: "filters" } },
+                            },
+                        ],
+                        selectionSet: {
+                            kind: "SelectionSet",
+                            selections: [
+                                {
+                                    kind: "Field",
+                                    name: { kind: "Name", value: "fleetHealthTypesSummary" },
+                                    selectionSet: {
+                                        kind: "SelectionSet",
+                                        selections: [
+                                            {
+                                                kind: "Field",
+                                                name: { kind: "Name", value: "summary" },
+                                                selectionSet: {
+                                                    kind: "SelectionSet",
+                                                    selections: [
+                                                        { kind: "Field", name: { kind: "Name", value: "key" } },
+                                                        { kind: "Field", name: { kind: "Name", value: "count" } },
+                                                    ],
+                                                },
+                                            },
+                                            { kind: "Field", name: { kind: "Name", value: "total" } },
+                                        ],
+                                    },
+                                },
+                            ],
+                        },
+                    },
+                ],
+            },
+        },
+    ],
+};
 const GetFleetAssetTypesSummaryDocument = {
     kind: "Document",
     definitions: [
@@ -2328,28 +2476,35 @@ const useActivityFilter = () => {
 };
 
 /**
- * A button to clear recent searches.
+ * Renders the AreaView component, which manages the UI and logic for an area filter.
  *
- * @param {ClearItemButtonProps} props - The props for the ClearItemButton component
- * @returns {ReactElement} ClearItemButton component
+ * @param {FilterViewProps<AreaFilterGeoJsonGeometry>} props - The props for the component.
+ * @returns {ReactElement} The rendered AreaView component.
  */
-const ClearItemButton = ({ onClick }) => {
+const AreaView = (props) => {
     const [t] = useTranslation();
-    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("filters.shared.clear"), children: jsxRuntime.jsx(reactComponents.IconButton, { className: "rounded-full", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), onClick: onClick, size: "small", variant: "ghost-neutral" }) }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions, filterHasChanges: props.filterBarActions.appliedFilterKeys().includes(props.filterDefinition.filterKey) }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: jsxRuntime.jsx("p", { className: "p-2", children: `${t("assetFilters.boundingBoxFilter.value")}` }) })] }));
 };
-
 /**
- * A footer component that displays a count of recent searches and a clear all button.
+ * Area filter definition
  *
- * @param {RecentSearchesFooterProps} props - The props for the ClearAllFooter component
- * @returns {ReactElement} RecentSearchesFooter component
+ * @returns {AreaFilterDefinition}  Area filter definition
  */
-const RecentSearchesFooter = ({ count, onClearAll }) => {
+const useAreaFilter = () => {
     const [t] = useTranslation();
-    if (count === 0) {
-        return null;
-    }
-    return (jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-x-2 border-t-2 border-neutral-300 px-2 py-0.5", children: [jsxRuntime.jsx(reactComponents.Text, { className: "py-0.5", size: "small", subtle: true, children: t("filters.shared.recentSearches") }), count > 1 ? (jsxRuntime.jsx(reactComponents.Button, { onClick: onClearAll, size: "small", variant: "ghost", children: t("filters.shared.clearAll") })) : null] }));
+    const result = react.useMemo(() => {
+        return {
+            filterKey: "area",
+            type: "area",
+            group: "CURRENT_LOCATION",
+            title: t("assetFilters.area.label"),
+            valueAsText: value => {
+                return t("assetFilters.boundingBoxFilter.value");
+            },
+            component: props => jsxRuntime.jsx(AreaView, { ...props }),
+        };
+    }, [t]);
+    return result;
 };
 
 const areaFilterInternalGeoJsonGeometrySchema = zod.z.union([
@@ -2531,145 +2686,6 @@ const usePlacesSearch = ({ localStorageKey = SHARED_LOCATIONS_LOCAL_STORAGE_KEY,
     ]);
 };
 
-/**
- * Renders the AreaView component, which manages the UI and logic for an area filter
- * with optional search functionality.
- *
- * @param {FilterViewProps<AreaFilterGeoJsonGeometry> & { showWithSearch: boolean }} props - The props for the component.
- * @returns {ReactElement} The rendered AreaView component.
- */
-const AreaView = (props) => {
-    const [t] = useTranslation();
-    const { logEvent } = reactCoreHooks.useAnalytics(filtersFilterBar.FilterEvents);
-    const { places, recentPlaces, setRecentPlaces, selectedPlaceData, setSelectedPrediction, searchString, setSearchString, debouncedSearchString, loading, hint, } = usePlacesSearch({
-        localStorageKey: "shared-recent-locations",
-    });
-    const placeholderOption = react.useMemo(() => {
-        // If no selected option, use this placeholder option
-        // Aka if applied from outside the filter UI
-        if (!props.value) {
-            return null;
-        }
-        const placeholderBbox = geoJsonUtils.getBboxFromGeoJsonPolygon(props.value);
-        return placeholderBbox
-            ? {
-                bBox: placeholderBbox,
-                geometry: props.value,
-                properties: { formattedAddress: t("assetFilters.area.origin.mapArea") },
-                dateIsoString: undefined,
-                placeId: "applied-map-area",
-                description: t("assetFilters.area.origin.mapArea"),
-            }
-            : null;
-    }, [props.value, t]);
-    const selectedOption = react.useMemo(() => getSelectedOption(props.value, recentPlaces), [props.value, recentPlaces]);
-    const setFilter = react.useCallback((place) => {
-        const { properties, bBox, geometry, dateIsoString } = place;
-        if (geometry.type === "Polygon") {
-            // Polygons are stored directly
-            props.filterBarActions.setArea(geometry);
-        }
-        else {
-            // All other geometries are stored by the filter as a
-            // polygon derived from the features bbox
-            props.filterBarActions.setArea(geoJsonUtils.getPolygonFromBbox(bBox));
-        }
-        logEvent("Filters Applied - V2", {
-            type: "AreaFilter",
-            value: properties.formattedAddress,
-            additionalProperties: {
-                geometryType: geometry.type,
-                wasPreviousSearch: Boolean(dateIsoString),
-            },
-        });
-    }, [props.filterBarActions, logEvent]);
-    react.useEffect(() => {
-        if (!selectedPlaceData) {
-            return;
-        }
-        if (selectedPlaceData.placeId === selectedOption?.placeId) {
-            return;
-        }
-        setFilter(selectedPlaceData);
-    }, [selectedPlaceData, setFilter, selectedOption]);
-    if (!props.showWithSearch) {
-        // Temporary while we are testing the new area filter bar behind feature flag
-        // This emulated the old look of the boundingbox filter
-        // TODO [BUSS] Remove this once the new area filter is ready for prime time
-        return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions, filterHasChanges: props.filterBarActions.appliedFilterKeys().includes(props.filterDefinition.filterKey) }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: jsxRuntime.jsx("p", { className: "p-2", children: `${t("assetFilters.boundingBoxFilter.value")}` }) })] }));
-    }
-    return (jsxRuntime.jsxs("div", { children: [jsxRuntime.jsx(filtersFilterBar.FilterHeader, { ...props.filterDefinition, ...props.filterBarActions, filterHasChanges: props.filterBarActions.appliedFilterKeys().includes(props.filterDefinition.filterKey), loading: loading, searchEnabled: true, searchProps: {
-                    onChange: setSearchString,
-                    onClear: () => setSearchString(""),
-                    value: searchString,
-                    count: places.length,
-                    placeholder: t("assetFilters.area.searchPlaceholder"),
-                } }), jsxRuntime.jsx(reactFilterComponents.FilterBody, { limitSize: true, children: places.length > 0 || placeholderOption ? (jsxRuntime.jsx(filtersFilterBar.FilterResults, { loading: false, results: [
-                        // Show placeholder option first if selected option is not in filterResult
-                        // Aka if applied from outside the filter UI
-                        ...(placeholderOption && !selectedOption && !debouncedSearchString ? [placeholderOption] : []),
-                        ...places,
-                    ], children: filterResult => (jsxRuntime.jsx(reactFormComponents.RadioGroup, { className: "m-1", id: "areaFilter", onChange: e => {
-                            const findOption = filterResult.find(result => result.description === e.currentTarget.value);
-                            findOption &&
-                                setSelectedPrediction({
-                                    placeId: findOption.placeId,
-                                    description: findOption.description,
-                                });
-                            setSearchString(""); // Clear search input after selection
-                        }, value: selectedOption?.description ??
-                            placeholderOption?.description ?? // placeholder if no selected option
-                            "", children: filterResult.map(({ ...rest }, index) => {
-                            const selected = selectedOption?.description === rest.description;
-                            return (jsxRuntime.jsx(reactFilterComponents.RadioFilterItem, { label: rest.description, selected: selected, suffix: 
-                                // Only show clear button if not currently selected and previously searched
-                                !selected && "dateIsoString" in rest ? (jsxRuntime.jsx(ClearItemButton, { onClick: () => setRecentPlaces(prev => prev.filter(r => r.description !== rest.description)) })) : null, value: rest.description }, index));
-                        }) })) })) : (jsxRuntime.jsx("p", { className: "py-2 text-center text-sm text-neutral-400", children: hint })) }), debouncedSearchString.length === 0 ? (jsxRuntime.jsx(RecentSearchesFooter, { count: recentPlaces.length, onClearAll: () => setRecentPlaces([]) })) : null] }));
-};
-/**
- * Area filter definition
- *
- * @returns {AreaFilterDefinition}  Area filter definition
- */
-const useAreaFilter = ({ showWithSearch } = {
-    showWithSearch: () => true,
-}) => {
-    const [t] = useTranslation();
-    const { recentPlaces } = usePlacesSearch({
-        localStorageKey: "shared-recent-locations",
-    });
-    const result = react.useMemo(() => {
-        return {
-            filterKey: "area",
-            type: "area",
-            group: "CURRENT_LOCATION",
-            title: t("assetFilters.area.label"),
-            showInFilterBar: () => showWithSearch(),
-            valueAsText: value => {
-                // Match the applied area filter to the places option if it exists in the recent places
-                const nameOfSelectedArea = getSelectedOption(value, recentPlaces);
-                return showWithSearch()
-                    ? (nameOfSelectedArea?.description ?? t("assetFilters.area.active"))
-                    : t("assetFilters.boundingBoxFilter.value");
-            },
-            component: props => jsxRuntime.jsx(AreaView, { ...props, showWithSearch: showWithSearch() }),
-        };
-    }, [t, showWithSearch, recentPlaces]);
-    return result;
-};
-const getSelectedOption = (value, options) => {
-    return options.find(option => {
-        // Polygons are compared by their coordinates directly
-        if (option.geometry.type === "Polygon" || option.geometry.type === "MultiPolygon") {
-            return JSON.stringify(option.geometry.coordinates) === JSON.stringify(value?.coordinates);
-        }
-        // All other geometries are stored by the filter as a
-        // polygon derived from the features bbox
-        // therefore we need to compare by that here to reverse the conversion
-        return JSON.stringify(geoJsonUtils.getPolygonFromBbox(option.bBox).coordinates) === JSON.stringify(value?.coordinates);
-    });
-};
-
 /**
  * Renders a filter view component with a header and optional additional elements for Asset IDs.
  *
@@ -3074,6 +3090,205 @@ const useCustomerIdsFilter = ({ showInFilterBar, defaultValue, hasCount, persist
     return result;
 };
 
+/**
+ * Get the Fleet Data Health Issue Category enum value with fallback
+ *
+ * @param key - The key to get the enum value for
+ * @returns {FleetDataHealthIssueCategory | null} The Fleet Data Health Issue Category enum value or null if not found
+ */
+const getHealthCategoryEnumWithFallback = (key) => {
+    try {
+        return sharedUtils.enumFromValue(key, fleetDataHealthIssueCategory);
+    }
+    catch {
+        return null;
+    }
+};
+
+/**
+ * Get a record of device health category display names
+ *
+ * @returns {Record<FleetDataHealthIssueCategory, string>} A record of device health category display names
+ */
+const useDeviceHealthIssueCategoryDisplayNames = () => {
+    const [t] = useTranslation();
+    return react.useMemo(() => ({
+        [fleetDataHealthIssueCategory.COVERAGE_ISSUES]: t("assetFilters.deviceHealthIssueCategory.coverageIssues"),
+        [fleetDataHealthIssueCategory.DEVICE_BATTERY_ISSUES]: t("assetFilters.deviceHealthIssueCategory.deviceBatteryIssues"),
+        [fleetDataHealthIssueCategory.INSTALL_AND_CONFIGURATION_HEALTH]: t("assetFilters.deviceHealthIssueCategory.installAndConfigurationHealth"),
+        [fleetDataHealthIssueCategory.NON_REPORTING_UNIT]: t("assetFilters.deviceHealthIssueCategory.nonReportingUnit"),
+    }), [t]);
+};
+
+/**
+ * Device Health Issue Category Filter component
+ *
+ * @param {FilterViewProps<Array<ValueName>>} props - Filter view props
+ * @returns {ReactElement} React element
+ */
+const DeviceHealthIssueCategoryFilter = (props) => {
+    const categoryDisplayNames = useDeviceHealthIssueCategoryDisplayNames();
+    const filters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
+    const { data, loading } = reactGraphqlHooks.useQuery(DeviceHealthIssueCategorySummariesDocument, {
+        variables: {
+            filters: {
+                ...filters,
+                activeFilter: true,
+                fleetHealthCategories: undefined,
+                fleetHealthStates: ["OPEN"],
+            },
+        },
+    });
+    const categories = react.useMemo(() => data?.assetSummary?.fleetHealthCategoriesSummary.summary.reduce((acc, category) => {
+        const existingCategory = acc.find(c => c.key === category.key);
+        if (existingCategory) {
+            existingCategory.count += category.count;
+        }
+        else {
+            acc.push(category);
+        }
+        return acc;
+    }, []), [data?.assetSummary?.fleetHealthCategoriesSummary.summary]);
+    const options = react.useMemo(() => {
+        return (categories
+            ?.map(issueCategory => {
+            const categoryKey = issueCategory.key;
+            const categoryEnum = getHealthCategoryEnumWithFallback(categoryKey);
+            if (!categoryEnum) {
+                return null;
+            }
+            return {
+                key: categoryKey,
+                label: categoryDisplayNames[categoryEnum],
+                count: issueCategory.count,
+            };
+        })
+            .filter(sharedUtils.nonNullable) ?? []);
+    }, [categories, categoryDisplayNames]);
+    return jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, loading: loading, options: options });
+};
+
+/**
+ * Get the Device Health Issue Category filter definition
+ *
+ * @returns {ValueNameArrayFilterDefinition} The Device Health Issue Category filter definition
+ */
+const useDeviceHealthIssueCategoryFilter = () => {
+    const [t] = useTranslation();
+    return react.useMemo(() => {
+        return {
+            filterKey: "fleetHealthCategories",
+            type: "valueNameArray",
+            group: "DEVICE_HEALTH",
+            title: t("assetFilters.deviceHealthIssueCategories"),
+            component: props => jsxRuntime.jsx(DeviceHealthIssueCategoryFilter, { ...props }),
+        };
+    }, [t]);
+};
+
+/**
+ * Get the Fleet Data Health Issue Type enum value with fallback
+ *
+ * @param {string} key - The key to get the enum value for
+ * @returns {FleetDataHealthIssueType | null} The Fleet Data Health Issue Type enum value or null if not found
+ */
+const getHealthTypeEnumWithFallback = (key) => {
+    try {
+        return sharedUtils.enumFromValue(key, fleetDataHealthIssueType);
+    }
+    catch {
+        return null;
+    }
+};
+
+/**
+ * Get a record of device health issue type display names
+ *
+ * @returns {Record<FleetDataHealthIssueType, string>} A record of device health issue type display names
+ */
+const useDeviceHealthIssueTypeDisplayNames = () => {
+    const [t] = useTranslation();
+    return react.useMemo(() => ({
+        [fleetDataHealthIssueType.DATA_NOT_RECEIVED]: t("assetFilters.deviceHealthIssueType.dataNotReceived"),
+        [fleetDataHealthIssueType.INSTALLATION_VALIDATION_MISSING]: t("assetFilters.deviceHealthIssueType.installationValidationMissing"),
+        [fleetDataHealthIssueType.LOW_CELLULAR_COVERAGE]: t("assetFilters.deviceHealthIssueType.lowCellularCoverage"),
+        [fleetDataHealthIssueType.LOW_DEVICE_BATTERY_VOLTAGE]: t("assetFilters.deviceHealthIssueType.lowDeviceBatteryVoltage"),
+        [fleetDataHealthIssueType.LOW_DEVICE_INPUT_VOLTAGE]: t("assetFilters.deviceHealthIssueType.lowDeviceInputVoltage"),
+        [fleetDataHealthIssueType.LOW_GPS_COVERAGE]: t("assetFilters.deviceHealthIssueType.lowGpsCoverage"),
+        [fleetDataHealthIssueType.NO_CAN_DATA_CONFIGURATION]: t("assetFilters.deviceHealthIssueType.noCanDataConfiguration"),
+        [fleetDataHealthIssueType.OPERATING_HOURS]: t("assetFilters.deviceHealthIssueType.operatingHours"),
+    }), [t]);
+};
+
+/**
+ * Device Health Issue Type Filter component
+ *
+ * @param {FilterViewProps<Array<ValueName>>} props - Filter view props
+ * @returns {ReactElement} React element
+ */
+const DeviceHealthIssueTypeFilter = (props) => {
+    const issueTypeDisplayNames = useDeviceHealthIssueTypeDisplayNames();
+    const filters = filtersGraphqlHook.useActiveAssetFilters(props.filterState.values);
+    const [searchQuery, setSearchQuery] = react.useState("");
+    const debouncedSearchQuery = reactComponents.useDebounce(searchQuery.trim().toLocaleLowerCase(), { delay: 300 });
+    const { data, loading } = reactGraphqlHooks.useQuery(DeviceHealthIssueTypeSummariesDocument, {
+        variables: {
+            filters: {
+                ...filters,
+                activeFilter: true,
+                fleetHealthTypes: undefined,
+                fleetHealthStates: ["OPEN"],
+            },
+        },
+    });
+    const types = react.useMemo(() => data?.assetSummary?.fleetHealthTypesSummary.summary.reduce((acc, type) => {
+        const existingType = acc.find(c => c.key === type.key);
+        if (existingType) {
+            existingType.count += type.count;
+        }
+        else {
+            acc.push(type);
+        }
+        return acc;
+    }, []), [data?.assetSummary?.fleetHealthTypesSummary.summary]);
+    const options = react.useMemo(() => {
+        return (types
+            ?.map(issuetype => {
+            const typeKey = issuetype.key;
+            const typeEnum = getHealthTypeEnumWithFallback(typeKey);
+            if (!typeEnum) {
+                return null;
+            }
+            return {
+                key: typeKey,
+                label: issueTypeDisplayNames[typeEnum],
+                count: issuetype.count,
+            };
+        })
+            .filter(sharedUtils.nonNullable)
+            .filter(option => option.label.toLowerCase().includes(debouncedSearchQuery)) ?? []);
+    }, [debouncedSearchQuery, issueTypeDisplayNames, types]);
+    return (jsxRuntime.jsx(filtersFilterBar.DefaultCheckboxFilter, { ...props, customSearch: { value: searchQuery, onChange: setSearchQuery }, loading: loading, options: options }));
+};
+
+/**
+ * Get the Device Health Issue Type filter definition
+ *
+ * @returns {ValueNameArrayFilterDefinition} The Device Health Issue Type filter definition
+ */
+const useDeviceHealthIssueTypeFilter = () => {
+    const [t] = useTranslation();
+    return react.useMemo(() => {
+        return {
+            filterKey: "fleetHealthTypes",
+            type: "valueNameArray",
+            group: "DEVICE_HEALTH",
+            title: t("assetFilters.deviceHealthIssueTypes"),
+            component: props => jsxRuntime.jsx(DeviceHealthIssueTypeFilter, { ...props }),
+        };
+    }, [t]);
+};
+
 /**
  * The `FollowedFiltersView` component displays filter settings for "Followed" and allows the user to select between different values.
  *
@@ -3692,6 +3907,31 @@ const useRentalContractOrderNumberFilter = ({ showInFilterBar } = {
     return result;
 };
 
+/**
+ * A button to clear recent searches.
+ *
+ * @param {ClearItemButtonProps} props - The props for the ClearItemButton component
+ * @returns {ReactElement} ClearItemButton component
+ */
+const ClearItemButton = ({ onClick }) => {
+    const [t] = useTranslation();
+    return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("filters.shared.clear"), children: jsxRuntime.jsx(reactComponents.IconButton, { className: "rounded-full", icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Trash", size: "small" }), onClick: onClick, size: "small", variant: "ghost-neutral" }) }));
+};
+
+/**
+ * A footer component that displays a count of recent searches and a clear all button.
+ *
+ * @param {RecentSearchesFooterProps} props - The props for the ClearAllFooter component
+ * @returns {ReactElement} RecentSearchesFooter component
+ */
+const RecentSearchesFooter = ({ count, onClearAll }) => {
+    const [t] = useTranslation();
+    if (count === 0) {
+        return null;
+    }
+    return (jsxRuntime.jsxs("div", { className: "flex items-baseline justify-between gap-x-2 border-t-2 border-neutral-300 px-2 py-0.5", children: [jsxRuntime.jsx(reactComponents.Text, { className: "py-0.5", size: "small", subtle: true, children: t("filters.shared.recentSearches") }), count > 1 ? (jsxRuntime.jsx(reactComponents.Button, { onClick: onClearAll, size: "small", variant: "ghost", children: t("filters.shared.clearAll") })) : null] }));
+};
+
 const MAX_RECENT_SEARCHES$1 = 20;
 /**
  * Rental contract reference code description filter view component.
@@ -4458,6 +4698,44 @@ const useTypesFilter = () => {
     return result;
 };
 
+const mockForDeviceHealthIssueCategorySummariesQuery = (variables, data) => {
+    return reactCoreContextsTest.queryFor(DeviceHealthIssueCategorySummariesDocument, variables, utilities.mergeDeep({
+        __typename: "Query",
+        assetSummary: {
+            __typename: "AssetSummary",
+            fleetHealthCategoriesSummary: {
+                __typename: "MetadataSummary",
+                total: 6273236744536064,
+                summary: [
+                    {
+                        __typename: "Summary",
+                        count: 6273236744536064,
+                        key: "subito",
+                    },
+                ],
+            },
+        },
+    }, data || {}));
+};
+const mockForDeviceHealthIssueTypeSummariesQuery = (variables, data) => {
+    return reactCoreContextsTest.queryFor(DeviceHealthIssueTypeSummariesDocument, variables, utilities.mergeDeep({
+        __typename: "Query",
+        assetSummary: {
+            __typename: "AssetSummary",
+            fleetHealthTypesSummary: {
+                __typename: "MetadataSummary",
+                total: 6273236744536064,
+                summary: [
+                    {
+                        __typename: "Summary",
+                        key: "subito",
+                        count: 6273236744536064,
+                    },
+                ],
+            },
+        },
+    }, data || {}));
+};
 const mockForGetFleetAssetTypesSummaryQuery = (variables, data) => {
     return reactCoreContextsTest.queryFor(GetFleetAssetTypesSummaryDocument, variables, utilities.mergeDeep({
         __typename: "Query",
@@ -4951,7 +5229,7 @@ const mockForGetAccessManagementModeDesiredSummaryQuery = (variables, data) => {
  *
  * @returns {FilterBarDefinition}  Default asset filter bar definition
  */
-const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled, serviceManagementEnabled, areaShowWithSearch, ownerFilterDefaultValue, showHiddenAssetsEnabled, }) => {
+const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled, serviceManagementEnabled, ownerFilterDefaultValue, showHiddenAssetsEnabled, }) => {
     const assetType = useAssetTypeFilter();
     const metadataCompleteness = useMetadataCompletenessFilter();
     const groups = useGroupIdsFilter();
@@ -4983,12 +5261,7 @@ const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled,
     const ownerAccountIds = useOwnerAccountIdsFilter(ownerFilterDefaultValue);
     const searchProps = react.useMemo(() => ({ localStorageKey: "assetSearch" }), []);
     const search = useSearchFilter(searchProps);
-    const areaEnabledProps = react.useMemo(() => {
-        return {
-            showWithSearch: () => areaShowWithSearch ?? false,
-        };
-    }, [areaShowWithSearch]);
-    const area = useAreaFilter(areaEnabledProps);
+    const area = useAreaFilter();
     const productionYears = useProductionYearFilter();
     const partner = usePartnerFilter();
     const serviceManagementEnabledProps = react.useMemo(() => {
@@ -5005,6 +5278,8 @@ const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled,
     }, [showHiddenAssetsEnabled]);
     const activeFilter = useActiveFilterFilter(activeFilterEnabledProps);
     const accessManagementMode = useAccessManagementModeFilter();
+    const fleetHealthTypes = useDeviceHealthIssueTypeFilter();
+    const fleetHealthCategories = useDeviceHealthIssueCategoryFilter();
     return react.useMemo(() => {
         return {
             assetType,
@@ -5029,6 +5304,8 @@ const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled,
             partner,
             search,
             accessManagementMode,
+            fleetHealthTypes,
+            fleetHealthCategories,
         };
     }, [
         siteIds,
@@ -5053,6 +5330,8 @@ const useDefaultAssetFilterBarDefinition = ({ sitesEnabled, owningDepotEnabled,
         activeFilter,
         siteDepotOwnershipIds,
         accessManagementMode,
+        fleetHealthTypes,
+        fleetHealthCategories,
     ]);
 };
 
@@ -5105,6 +5384,8 @@ exports.mapActivityToLabelId = mapActivityToLabelId;
 exports.mapMetadataCompletenessToLabelId = mapMetadataCompletenessToLabelId;
 exports.metadataCompleteness = metadataCompleteness;
 exports.metadataCompletenessOptions = metadataCompletenessOptions;
+exports.mockForDeviceHealthIssueCategorySummariesQuery = mockForDeviceHealthIssueCategorySummariesQuery;
+exports.mockForDeviceHealthIssueTypeSummariesQuery = mockForDeviceHealthIssueTypeSummariesQuery;
 exports.mockForGetAccessManagementModeDesiredSummaryQuery = mockForGetAccessManagementModeDesiredSummaryQuery;
 exports.mockForGetAssetTelematicsDeviceConnectionSummaryQuery = mockForGetAssetTelematicsDeviceConnectionSummaryQuery;
 exports.mockForGetCustomFieldSummaryQuery = mockForGetCustomFieldSummaryQuery;
@@ -5143,6 +5424,8 @@ exports.useBrandFilter = useBrandFilter;
 exports.useCriticalityFilter = useCriticalityFilter;
 exports.useCustomerIdsFilter = useCustomerIdsFilter;
 exports.useDefaultAssetFilterBarDefinition = useDefaultAssetFilterBarDefinition;
+exports.useDeviceHealthIssueCategoryFilter = useDeviceHealthIssueCategoryFilter;
+exports.useDeviceHealthIssueTypeFilter = useDeviceHealthIssueTypeFilter;
 exports.useFollowedFilter = useFollowedFilter;
 exports.useGroupIdsFilter = useGroupIdsFilter;
 exports.useHourIntervalFilter = useHourIntervalFilter;