@firecms/core 3.1.0-canary.9e89e98 → 3.1.0-canary.a3b8228

package/src/components/EntityCollectionView/EntityCollectionBoardView.tsx

@@ -20,9 +20,6 @@ import {
     DialogActions,
     DialogContent,
     getColorSchemeForSeed,
-    IconButton,
-    RefreshIcon,
-    Tooltip,
     Typography
 } from "@firecms/ui";
 import { getPropertyInPath, resolveCollection, resolveEnumValues } from "../../util";
@@ -34,9 +31,12 @@ import {
     useFireCMSContext,
     useSideEntityController
 } from "../../hooks";
+import { useAnalyticsController } from "../../hooks/useAnalyticsController";
 import { SaveEntityProps } from "../../types/datasource";
 import { setIn } from "@firecms/formex";
 import { useBoardDataController } from "./useBoardDataController";
+import { CollectionDataErrorBanner } from "./CollectionDataErrorBanner";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionBoardViewProps<M extends Record<string, any> = any> = {
     collection: EntityCollection<M>;
@@ -74,7 +74,9 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     const context = useFireCMSContext();
     const dataSource = useDataSource(collection);
     const sideEntityController = useSideEntityController();
+    const analyticsController = useAnalyticsController();
     const plugins = customizationController.plugins ?? [];
+    const { t } = useTranslation();
 
     // State for backfill dialog
     const [showBackfillDialog, setShowBackfillDialog] = useState(false);
@@ -222,6 +224,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     }, [plugins]);
 
     const handleColumnReorder = useCallback((newColumns: string[]) => {
+        analyticsController.onAnalyticsEvent?.("kanban_column_reorder", {
+            path: fullPath,
+            columnProperty
+        });
         setHasUserReordered(true);
         setLocalColumnsOrder(newColumns);
         plugins
@@ -235,7 +241,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                     newColumnsOrder: newColumns
                 });
             });
-    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty]);
+    }, [plugins, fullPath, parentCollectionIds, collection, columnProperty, analyticsController]);
 
     // Collection-level count queries to detect missing order property
     // Just TWO counts: total and ordered (for the entire collection, not per column)
@@ -393,6 +399,13 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         const entity = items.find(item => item.id === moveInfo?.itemId)?.entity;
         if (!entity) return;
 
+        analyticsController.onAnalyticsEvent?.("kanban_card_moved", {
+            path: fullPath,
+            entityId: entity.id,
+            sourceColumn: moveInfo?.sourceColumn,
+            targetColumn: moveInfo?.targetColumn
+        });
+
         const isColumnChange = moveInfo && moveInfo.sourceColumn !== moveInfo.targetColumn;
 
         // If no orderProperty and not a column change, nothing to do
@@ -440,7 +453,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         } catch (e) {
             console.error("Error saving entity:", e);
         }
-    }, [collection, columnProperty, orderProperty, context, dataSource, calculateNewOrder, boardDataController]);
+    }, [collection, columnProperty, orderProperty, context, dataSource, calculateNewOrder, boardDataController, analyticsController, fullPath]);
 
     // Backfill order values for all entities
     const handleBackfill = useCallback(async () => {
@@ -449,6 +462,9 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
             console.log("No orderProperty, returning");
             return;
         }
+        analyticsController.onAnalyticsEvent?.("kanban_backfill_order", {
+            path: fullPath
+        });
         setBackfillLoading(true);
 
         try {
@@ -514,7 +530,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         } finally {
             setBackfillLoading(false);
         }
-    }, [orderProperty, fullPath, collection, dataSource, context, boardDataController]);
+    }, [orderProperty, fullPath, collection, dataSource, context, boardDataController, analyticsController]);
 
     const handleEntityClick = useCallback((entity: Entity<M>) => {
         onEntityClick?.(entity);
@@ -563,19 +579,16 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
 
     // Check for loading error
     const hasError = Boolean(dataLoadingError);
-    const errorMessage = dataLoadingError?.message || "";
-    const indexUrl = errorMessage.match(/https:\/\/console\.firebase\.google\.com[^\s]+/)?.[0];
 
     // Error: no enum properties available for Kanban columns
     if (!columnProperty || enumColumns.length === 0) {
         return (
             <div className="flex-1 flex flex-col items-center justify-center p-8 gap-4">
                 <Typography variant="h6">
-                    Kanban view is not available
+                    {t("kanban_view_not_available")}
                 </Typography>
                 <Typography variant="body2" color="secondary" className="text-center max-w-md">
-                    Kanban view requires a string property with enum values to group entities into columns.
-                    Please add an enum property to your collection schema to use this view.
+                    {t("kanban_view_requires_enum")}
                 </Typography>
                 {KanbanSetupComponent && (
                     <KanbanSetupComponent
@@ -596,7 +609,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         return (
             <div className="flex-1 flex items-center justify-center p-8">
                 <Typography variant="label" color="secondary">
-                    No enum values configured for property "{columnProperty}"
+                    {t("no_enum_values_configured", { property: columnProperty })}
                 </Typography>
             </div>
         );
@@ -606,33 +619,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
         <div className="flex-1 flex flex-col overflow-hidden">
             {/* Error banner - only show when no data loaded */}
             {hasError && allEntities.length === 0 && (
-                <div
-                    className="flex items-center gap-4 px-4 py-3 bg-red-50 dark:bg-red-900/20 border-b border-red-200 dark:border-red-800">
-                    <Typography variant="body2" className="text-red-700 dark:text-red-300 flex-1">
-                        <strong>Error:</strong>{" "}
-                        {indexUrl
-                            ? "A Firestore index is required for this query."
-                            : errorMessage}
-                    </Typography>
-                    <Tooltip title="Refresh data">
-                        <IconButton
-                            size="small"
-                            onClick={() => boardDataController.refreshAll()}
-                        >
-                            <RefreshIcon size="small" />
-                        </IconButton>
-                    </Tooltip>
-                    {indexUrl && (
-                        <Button
-                            size="small"
-                            variant="outlined"
-                            color="error"
-                            onClick={() => window.open(indexUrl, "_blank")}
-                        >
-                            Create Index
-                        </Button>
-                    )}
-                </div>
+                <CollectionDataErrorBanner
+                    error={dataLoadingError}
+                    onRetry={() => boardDataController.refreshAll()}
+                />
             )}
 
             {/* Backfill info bar - non-blocking */}
@@ -640,14 +630,14 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                 <div
                     className="flex items-center justify-between gap-4 px-4 py-2 bg-amber-50 dark:bg-amber-900/20 border-b border-amber-200 dark:border-amber-800">
                     <Typography variant="body2" color="secondary">
-                        Some items don't have order values. Initialize to enable drag-and-drop reordering.
+                        {t("items_need_backfill")}
                     </Typography>
                     <Button
                         size="small"
                         variant="text"
                         onClick={() => setShowBackfillDialog(true)}
                     >
-                        Initialize Order
+                        {t("initialize")}
                     </Button>
                 </div>
             )}
@@ -667,6 +657,10 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
                     columnLoadingState={columnLoadingState}
                     onLoadMoreColumn={(column) => boardDataController.loadMoreColumn(column)}
                     onAddItemToColumn={(column) => {
+                        analyticsController.onAnalyticsEvent?.("kanban_new_entity_in_column", {
+                            path: fullPath,
+                            column
+                        });
                         sideEntityController.open({
                             path: fullPath,
                             collection,
@@ -693,18 +687,17 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
             {/* Backfill dialog */}
             <Dialog open={showBackfillDialog} onOpenChange={setShowBackfillDialog}>
                 <DialogContent>
-                    <Typography variant="h6" className="mb-4">Initialize Kanban Order</Typography>
+                    <Typography variant="h6" className="mb-4">{t("initialize_kanban_order")}</Typography>
                     <Typography variant="body2">
-                        This will assign sequential order values to all items that don't have one.
-                        Items will maintain their current order within each column.
+                        {t("initialize_kanban_order_desc")}
                     </Typography>
                 </DialogContent>
                 <DialogActions>
                     <Button variant="text" onClick={() => setShowBackfillDialog(false)} disabled={backfillLoading}>
-                        Cancel
+                        {t("cancel")}
                     </Button>
                     <Button onClick={handleBackfill} disabled={backfillLoading}>
-                        {backfillLoading ? <CircularProgress size="smallest" /> : "Initialize"}
+                        {backfillLoading ? <CircularProgress size="smallest" /> : t("initialize")}
                     </Button>
                 </DialogActions>
             </Dialog>

package/src/components/EntityCollectionView/EntityCollectionCardView.tsx

@@ -2,7 +2,7 @@ import React, { useCallback, useEffect, useRef } from "react";
 import { CollectionSize, Entity, EntityCollection, EntityTableController, SelectionController } from "../../types";
 import { EntityCard } from "./EntityCard";
 import { CircularProgress, cls, Typography } from "@firecms/ui";
-import { useAuthController, useCustomizationController } from "../../hooks";
+import { useAuthController, useCustomizationController, useTranslation } from "../../hooks";
 
 export type EntityCollectionCardViewProps<M extends Record<string, any> = any> = {
     collection: EntityCollection<M>;
@@ -61,17 +61,18 @@ function getGridColumnsClass(size: CollectionSize): string {
  * Alternative to the EntityCollectionTable for visual browsing.
  */
 export function EntityCollectionCardView<M extends Record<string, any> = any>({
-                                                                                  collection,
-                                                                                  tableController,
-                                                                                  onEntityClick,
-                                                                                  selectionController,
-                                                                                  selectionEnabled = true,
-                                                                                  highlightedEntities,
-                                                                                  emptyComponent,
-                                                                                  onScroll,
-                                                                                  initialScroll,
-                                                                                  size = "m"
-                                                                              }: EntityCollectionCardViewProps<M>) {
+    collection,
+    tableController,
+    onEntityClick,
+    selectionController,
+    selectionEnabled = true,
+    highlightedEntities,
+    emptyComponent,
+    onScroll,
+    initialScroll,
+    size = "m"
+}: EntityCollectionCardViewProps<M>) {
+    const { t } = useTranslation();
     const authController = useAuthController();
     const customizationController = useCustomizationController();
 
@@ -178,23 +179,14 @@ export function EntityCollectionCardView<M extends Record<string, any> = any>({
             <div className="flex-1 flex items-center justify-center p-8">
                 {emptyComponent ?? (
                     <Typography variant="label" color="secondary">
-                        No entries found
+                        {t("no_entries_found")}
                     </Typography>
                 )}
             </div>
         );
     }
 
-    // Show error state
-    if (dataLoadingError) {
-        return (
-            <div className="flex-1 flex items-center justify-center p-8">
-                <Typography className="text-red-500">
-                    Error loading data: {dataLoadingError.message}
-                </Typography>
-            </div>
-        );
-    }
+
 
     const gridColumnsClass = getGridColumnsClass(size);
 
@@ -230,11 +222,11 @@ export function EntityCollectionCardView<M extends Record<string, any> = any>({
                     className="flex items-center justify-center py-8"
                 >
                     {dataLoading && (
-                        <CircularProgress size="small"/>
+                        <CircularProgress size="small" />
                     )}
                     {!dataLoading && noMoreToLoad && data.length > 0 && (
                         <Typography variant="caption" color="secondary">
-                            All {data.length} entries loaded
+                            {t("all_entries_loaded", { count: data.length.toString() })}
                         </Typography>
                     )}
                 </div>

package/src/components/EntityCollectionView/EntityCollectionView.tsx

@@ -45,13 +45,15 @@ import {
     useFireCMSContext,
     useLargeLayout,
     useNavigationController,
-    useSideEntityController
+    useSideEntityController,
+    useTranslation
 } from "../../hooks";
 import { useBreadcrumbsController } from "../../hooks/useBreadcrumbsController";
 import { useUserConfigurationPersistence } from "../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { EntityCollectionCardView } from "./EntityCollectionCardView";
 import { EntityCollectionBoardView } from "./EntityCollectionBoardView";
+import { CollectionDataErrorBanner } from "./CollectionDataErrorBanner";
 import { ViewModeToggle, KanbanPropertyOption } from "./ViewModeToggle";
 import {
     AddIcon,
@@ -159,6 +161,7 @@ export const EntityCollectionView = React.memo(
     ) {
 
         const context = useFireCMSContext();
+        const { t } = useTranslation();
         const navigation = useNavigationController();
         const breadcrumbs = useBreadcrumbsController();
         const fullPath = fullPathProp ?? collectionProp.path;
@@ -433,12 +436,17 @@ export const EntityCollectionView = React.memo(
 
         // View mode change: update URL + save to local persistence
         const onViewModeChange = useCallback((mode: ViewMode) => {
+            analyticsController.onAnalyticsEvent?.("view_mode_changed", {
+                path: fullPath,
+                from: viewMode,
+                to: mode
+            });
             setViewMode(mode);
             // Save to local persistence for next visit
             if (userConfigPersistence) {
                 onCollectionModifiedForUser(fullPath, { defaultViewMode: mode } as PartialEntityCollection<M>);
             }
-        }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, fullPath]);
+        }, [setViewMode, userConfigPersistence, onCollectionModifiedForUser, fullPath, analyticsController, viewMode]);
 
         const createEnabled = canCreateEntity(collection, authController, fullPath, null);
 
@@ -568,12 +576,16 @@ export const EntityCollectionView = React.memo(
 
         // Handle kanban property change
         const onKanbanPropertyChange = useCallback((property: string) => {
+            analyticsController.onAnalyticsEvent?.("kanban_property_changed", {
+                path: fullPath,
+                property
+            });
             setSelectedKanbanProperty(property);
             // Save to local persistence
             if (userConfigPersistence) {
                 onCollectionModifiedForUser(fullPath, { kanbanColumnProperty: property } as any);
             }
-        }, [userConfigPersistence, onCollectionModifiedForUser, fullPath]);
+        }, [userConfigPersistence, onCollectionModifiedForUser, fullPath, analyticsController]);
 
         const getPropertyFor = useCallback(({
             propertyKey,
@@ -686,11 +698,13 @@ export const EntityCollectionView = React.memo(
             customEntityActions?: EntityAction[]
         }): EntityAction[] => {
             const deleteEnabled = entity ? canDeleteEntity(collection, authController, fullPath, entity) : true;
-            const actions: EntityAction[] = [editEntityAction];
+            const actions: EntityAction[] = [
+                { ...editEntityAction, name: t("edit") }
+            ];
             if (createEnabled)
-                actions.push(copyEntityAction);
+                actions.push({ ...copyEntityAction, name: t("copy") });
             if (deleteEnabled)
-                actions.push(deleteEntityAction);
+                actions.push({ ...deleteEntityAction, name: t("delete") });
             if (customEntityActions)
                 return mergeEntityActions(actions, customEntityActions);
             return actions;
@@ -836,6 +850,24 @@ export const EntityCollectionView = React.memo(
             />
         );
 
+        // Compute plugin-provided error view for collection loading errors
+        const pluginErrorView = useMemo(() => {
+            const error = tableController.dataLoadingError;
+            if (!error || !customizationController.plugins) return null;
+            for (const plugin of customizationController.plugins) {
+                if (plugin.collectionView?.CollectionError) {
+                    const CollectionError = plugin.collectionView.CollectionError;
+                    return <CollectionError
+                        path={fullPath}
+                        collection={collection}
+                        parentCollectionIds={parentCollectionIds}
+                        error={error}
+                    />;
+                }
+            }
+            return null;
+        }, [tableController.dataLoadingError, customizationController.plugins, fullPath, collection, parentCollectionIds]);
+
         return (
             <div className={cls("overflow-hidden h-full w-full rounded-md flex flex-col", className)}
                 ref={containerRef}>
@@ -872,6 +904,10 @@ export const EntityCollectionView = React.memo(
                 />
 
                 {/* View content - only the view-specific content changes */}
+                {tableController.dataLoadingError && pluginErrorView}
+                {tableController.dataLoadingError && !pluginErrorView && (
+                    <CollectionDataErrorBanner error={tableController.dataLoadingError} />
+                )}
                 {viewMode === "kanban" && enabledViews.includes("kanban") ? (
                     <EntityCollectionBoardView
                         key={`kanban-view-${fullPath}-${selectedKanbanProperty}`}
@@ -887,16 +923,16 @@ export const EntityCollectionView = React.memo(
                         deletedEntities={deletedEntities}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                     />
                 ) : viewMode === "cards" ? (
@@ -913,16 +949,16 @@ export const EntityCollectionView = React.memo(
                         size={cardSize}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                     />
                 ) : (
@@ -951,16 +987,16 @@ export const EntityCollectionView = React.memo(
                         textSearchEnabled={textSearchEnabled}
                         emptyComponent={canCreateEntities && tableController.filterValues === undefined && tableController.sortBy === undefined
                             ? <div className="flex flex-col items-center justify-center">
-                                <Typography variant={"subtitle2"}>So empty...</Typography>
+                                <Typography variant={"subtitle2"}>{t("so_empty")}</Typography>
                                 <Button
                                     onClick={onNewClick}
                                     className="mt-4"
                                 >
                                     <AddIcon />
-                                    Create your first entry
+                                    {t("create_your_first_entry")}
                                 </Button>
                             </div>
-                            : <Typography variant={"label"}>No results with the applied filter/sort</Typography>
+                            : <Typography variant={"label"}>{t("no_results_filter_sort")}</Typography>
                         }
                         hoverRow={hoverRow}
                         inlineEditing={checkInlineEditing()}
@@ -1131,11 +1167,12 @@ function EntityIdHeaderWidget({
     const [searchString, setSearchString] = React.useState("");
     const [recentIds, setRecentIds] = React.useState<string[]>(getRecentIds(collection.id));
     const sideEntityController = useSideEntityController();
+    const { t } = useTranslation();
 
     const openEntityMode = collection?.openEntityMode ?? DEFAULT_ENTITY_OPEN_MODE;
 
     return (
-        <Tooltip title={!openPopup ? "Find by ID" : undefined} asChild={false}>
+        <Tooltip title={!openPopup ? t("find_by_id") : undefined} asChild={false}>
             <Popover
                 open={openPopup}
                 onOpenChange={setOpenPopup}
@@ -1171,7 +1208,7 @@ function EntityIdHeaderWidget({
                         <div className="flex p-2 w-full gap-2">
                             <input
                                 autoFocus={openPopup}
-                                placeholder={"Find entity by ID"}
+                                placeholder={t("find_entity_by_id")}
                                 // size={"small"}
                                 onChange={(e) => {
                                     setSearchString(e.target.value);

package/src/components/EntityCollectionView/EntityCollectionViewActions.tsx

@@ -17,6 +17,7 @@ import {
 } from "@firecms/ui";
 import { toArray } from "../../util/arrays";
 import { ErrorBoundary } from "../ErrorBoundary";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionViewActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
@@ -45,9 +46,9 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
 }: EntityCollectionViewActionsProps<M>) {
 
     const context = useFireCMSContext();
-
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins ?? [];
+    const { t } = useTranslation();
 
     const authController = useAuthController();
 
@@ -63,7 +64,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
                 startIcon={<AddIcon size={"small"} />}
                 variant="filled"
                 color="primary">
-                Add {collection.singularName ?? collection.name}
+                {t("add")} {collection.singularName ?? collection.name}
             </Button>
             : <Button
                 id={`add_entity_${path}`}
@@ -98,7 +99,7 @@ export function EntityCollectionViewActions<M extends Record<string, any>>({
             </IconButton>;
         multipleDeleteButton =
             <Tooltip
-                title={multipleDeleteEnabled ? "Delete" : "You have selected at least one entity you cannot delete"}>
+                title={multipleDeleteEnabled ? t("delete_selected") : t("cannot_delete_selected")}>
                 {button}
             </Tooltip>
     }

package/src/components/EntityCollectionView/EntityCollectionViewStartActions.tsx

@@ -12,6 +12,7 @@ import { ErrorBoundary } from "../ErrorBoundary";
 import { ClearFilterSortButton } from "../ClearFilterSortButton";
 import { FiltersDialog } from "./FiltersDialog";
 import { Badge, Button, cls, FilterListIcon, IconButton, Tooltip } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type EntityCollectionViewStartActionsProps<M extends Record<string, any>> = {
     collection: EntityCollection<M>;
@@ -42,6 +43,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
     const customizationController = useCustomizationController();
     const plugins = customizationController.plugins ?? [];
     const largeLayout = useLargeLayout();
+    const { t } = useTranslation();
 
     // Filters dialog state
     const [filtersDialogOpen, setFiltersDialogOpen] = useState(false);
@@ -66,7 +68,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
 
     // Filters button
     const filtersButton = resolvedProperties && tableController.setFilterValues && (
-        <Tooltip title="Filters"
+        <Tooltip title={t("filters")}
             key={"filters_tooltip"}>
             <Badge
                 color="primary"
@@ -80,7 +82,7 @@ export function EntityCollectionViewStartActions<M extends Record<string, any>>(
                         startIcon={<FilterListIcon size="small" />}
                         className={cls(activeFilterCount > 0 && "text-primary")}
                     >
-                        Filters{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
+                        {t("filters")}{activeFilterCount > 0 ? ` (${activeFilterCount})` : ""}
                     </Button>
                 ) : (
                     <IconButton

package/src/components/EntityCollectionView/FiltersDialog.tsx

@@ -15,6 +15,7 @@ import {
     FilterListIcon,
     Typography
 } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 import { StringNumberFilterField } from "../SelectableTable/filters/StringNumberFilterField";
 import { BooleanFilterField } from "../SelectableTable/filters/BooleanFilterField";
 import { DateTimeFilterField } from "../SelectableTable/filters/DateTimeFilterField";
@@ -43,6 +44,8 @@ export function FiltersDialog({
     setFilterValues,
     forceFilter
 }: FiltersDialogProps) {
+    const { t } = useTranslation();
+    
     // Local state for filters being edited
     const [localFilters, setLocalFilters] = useState<FilterValues<any>>(filterValues ?? {});
 
@@ -173,7 +176,7 @@ export function FiltersDialog({
             containerClassName={isAnyFieldHidden ? "hidden" : undefined}
         >
             <DialogTitle className="flex items-center gap-2">
-                <Typography variant="h6">Filters</Typography>
+                <Typography variant="h6">{t("filters")}</Typography>
                 {activeFilterCount > 0 && (
                     <span className="ml-2 px-2 py-0.5 text-xs rounded-full bg-primary text-white">
                         {activeFilterCount}
@@ -184,7 +187,7 @@ export function FiltersDialog({
             <DialogContent >
                 {filterableProperties.length === 0 ? (
                     <Typography color="secondary" className="py-8 text-center">
-                        No filterable properties available
+                        {t("no_filterable_properties")}
                     </Typography>
                 ) : (
                     <table className="w-full border-collapse">
@@ -228,20 +231,20 @@ export function FiltersDialog({
                     onClick={handleClearAll}
                     disabled={activeFilterCount === 0}
                 >
-                    Clear all
+                    {t("clear")}
                 </Button>
                 <div className="flex-grow" />
                 <Button
                     variant="text"
                     onClick={() => onOpenChange(false)}
                 >
-                    Cancel
+                    {t("cancel")}
                 </Button>
                 <Button
                     variant="filled"
                     onClick={handleApply}
                 >
-                    Apply filters
+                    {t("apply_filters")}
                 </Button>
             </DialogActions>
         </Dialog>