@firecms/core 3.1.0 → 3.2.0-canary.4c3b8f2

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";
@@ -38,6 +35,8 @@ 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>;
@@ -77,6 +76,7 @@ export function EntityCollectionBoardView<M extends Record<string, any> = any>({
     const sideEntityController = useSideEntityController();
     const analyticsController = useAnalyticsController();
     const plugins = customizationController.plugins ?? [];
+    const { t } = useTranslation();
 
     // State for backfill dialog
     const [showBackfillDialog, setShowBackfillDialog] = useState(false);
@@ -579,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
@@ -612,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>
         );
@@ -622,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 */}
@@ -656,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>
             )}
@@ -713,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;
@@ -695,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;
@@ -899,9 +904,11 @@ export const EntityCollectionView = React.memo(
                 />
 
                 {/* View content - only the view-specific content changes */}
-                {tableController.dataLoadingError && pluginErrorView
-                    ? pluginErrorView
-                    : viewMode === "kanban" && enabledViews.includes("kanban") ? (
+                {tableController.dataLoadingError && pluginErrorView}
+                {tableController.dataLoadingError && !pluginErrorView && (
+                    <CollectionDataErrorBanner error={tableController.dataLoadingError} />
+                )}
+                {viewMode === "kanban" && enabledViews.includes("kanban") ? (
                     <EntityCollectionBoardView
                         key={`kanban-view-${fullPath}-${selectedKanbanProperty}`}
                         collection={collection}
@@ -916,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" ? (
@@ -942,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>
                         }
                     />
                 ) : (
@@ -980,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()}
@@ -1160,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}
@@ -1200,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>

package/src/components/EntityCollectionView/ViewModeToggle.tsx

@@ -12,6 +12,7 @@ import {
     ViewColumnIcon,
     ViewKanbanIcon
 } from "@firecms/ui";
+import { useTranslation } from "../../hooks/useTranslation";
 
 export type KanbanPropertyOption = {
     key: string;
@@ -72,6 +73,8 @@ export function ViewModeToggle({
     onKanbanPropertyChange
 }: ViewModeToggleProps) {
 
+    const { t } = useTranslation();
+
     if (!onViewModeChange) {
         return null;
     }
@@ -84,9 +87,9 @@ export function ViewModeToggle({
     };
 
     const getViewModeName = () => {
-        if (viewMode === "kanban") return "Board";
-        if (viewMode === "cards") return "Cards";
-        return "List";
+        if (viewMode === "kanban") return t("board");
+        if (viewMode === "cards") return t("cards");
+        return t("list");
     };
 
     const showSizeSelector = size && onSizeChanged && (viewMode === "table" || viewMode === "cards");
@@ -100,17 +103,17 @@ export function ViewModeToggle({
         const allOptions: ToggleButtonOption<ViewMode>[] = [
             {
                 value: "table",
-                label: "List",
+                label: t("list"),
                 icon: <ListIcon size="small" />
             },
             {
                 value: "cards",
-                label: "Cards",
+                label: t("cards"),
                 icon: <AppsIcon size="small" />
             },
             {
                 value: "kanban",
-                label: "Board",
+                label: t("board"),
                 icon: <ViewKanbanIcon size="small" />
             }
         ];
@@ -150,7 +153,7 @@ export function ViewModeToggle({
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewColumnIcon size="small" />
-                            <span>Size</span>
+                            <span>{t("size_label")}</span>
                         </div>
                         <Select
                             value={size}
@@ -173,7 +176,7 @@ export function ViewModeToggle({
                     <div className="flex flex-row items-center justify-between gap-2">
                         <div className="flex items-center gap-2 text-sm text-surface-600 dark:text-surface-300">
                             <ViewKanbanIcon size="small" />
-                            <span>Group by</span>
+                            <span>{t("group_by")}</span>
                         </div>
                         <Select
                             value={selectedKanbanProperty}

package/src/components/EntityView.tsx

@@ -4,7 +4,7 @@ import { resolveCollection } from "../util";
 import { cls, defaultBorderMixin, IconButton, OpenInNewIcon, Typography } from "@firecms/ui";
 import { CustomizationController } from "../types/customization_controller";
 import { useCustomizationController } from "../hooks/useCustomizationController";
-import { useAuthController } from "../hooks";
+import { useAuthController, useTranslation } from "../hooks";
 import { PropertyCollectionView } from "./PropertyCollectionView";
 
 /**
@@ -26,6 +26,7 @@ export function EntityView<M extends Record<string, any>>(
     }: EntityViewProps<M>) {
 
     const authController = useAuthController();
+    const { t } = useTranslation();
     const customizationController: CustomizationController = useCustomizationController();
     const resolvedCollection: ResolvedEntityCollection<M> = useMemo(() => resolveCollection<M>({
         collection,
@@ -48,7 +49,7 @@ export function EntityView<M extends Record<string, any>>(
                                     color={"secondary"}
                                     component={"span"}
                                     className="break-words">
-                            Id
+                            {t("id")}
                         </Typography>
                     </div>
                     <div className="col-span-8">

package/src/components/ErrorBoundary.tsx

@@ -1,18 +1,20 @@
 import React, { ErrorInfo, PropsWithChildren } from "react";
+import { useTranslation } from "../hooks/useTranslation";
 
 import { ErrorIcon, Typography } from "@firecms/ui";
 
 export class ErrorBoundary extends React.Component<PropsWithChildren<Record<string, unknown>>, {
-    error: Error | null
+    hasError: boolean,
+    error?: Error
 }> {
     constructor(props: any) {
         super(props);
-        this.state = { error: null };
+        this.state = { hasError: false };
     }
 
     // eslint-disable-next-line n/handle-callback-err
     static getDerivedStateFromError(error: Error) {
-        return { error };
+        return { hasError: true, error };
     }
 
     componentDidCatch(error: Error, errorInfo: ErrorInfo) {
@@ -21,20 +23,30 @@ export class ErrorBoundary extends React.Component<PropsWithChildren<Record<stri
     }
 
     render() {
-        if (this.state.error) {
-            return (
-                <div className="flex flex-col m-2">
-                    <div className="flex items-center m-2">
-                        <ErrorIcon color={"error"} size={"small"}/>
-                        <div className="ml-4">Error</div>
-                    </div>
-                    <Typography variant={"caption"}>
-                        {this.state.error?.message ?? "See the error in the console"}
-                    </Typography>
-                </div>
-            );
+        if (this.state.hasError) {
+            // You can render any custom fallback UI
+            return <FallbackView message={this.state.error?.message}/>;
         }
 
         return this.props.children;
     }
 }
+
+function FallbackView({ message }: { message?: string }) {
+    const { t } = useTranslation();
+    return (
+        <div className="h-full w-full bg-slate-100 flex items-center justify-center p-4">
+            <div
+                className="flex flex-col items-center justify-center m-4 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700">
+                <div className="flex items-center mb-4 text-red-500">
+                    <ErrorIcon/>
+                    <div className="ml-4">{t("error")}</div>
+                </div>
+                <div className="flex justify-center text-gray-500 dark:text-gray-400">
+                    {/* Error message is purposely removed since it's hard to access state here, but typical ErrorBoundary fallback doesn't always show the raw message */}
+                    {t("see_console_details")}
+                </div>
+            </div>
+        </div>
+    );
+}