@rebasepro/admin 0.0.1-canary.eae7889 → 0.0.1-canary.eb08332

package/src/components/field_configs.tsx

@@ -1,6 +1,6 @@
 
 import type { DefaultFieldConfig } from "../types/fields";
-import type { ArrayProperty, NumberProperty, Property, PropertyConfig, StringProperty } from "@rebasepro/types";
+import type { ArrayProperty, NumberProperty, Property, PropertyConfig, StringProperty, VectorProperty } from "@rebasepro/types";
 import { ArrayCustomShapedFieldBinding } from "../form/field_bindings/ArrayCustomShapedFieldBinding";
 import { ArrayOfReferencesFieldBinding } from "../form/field_bindings/ArrayOfReferencesFieldBinding";
 import { BlockFieldBinding } from "../form/field_bindings/BlockFieldBinding";
@@ -9,16 +9,35 @@ import { KeyValueFieldBinding } from "../form/field_bindings/KeyValueFieldBindin
 import { MapFieldBinding } from "../form/field_bindings/MapFieldBinding";
 import { MarkdownEditorFieldBinding } from "../form/field_bindings/MarkdownEditorFieldBinding";
 import { MultiSelectFieldBinding } from "../form/field_bindings/MultiSelectFieldBinding";
-import { ReferenceAsStringFieldBinding } from "../form/field_bindings/ReferenceAsStringFieldBinding";
 import { ReferenceFieldBinding } from "../form/field_bindings/ReferenceFieldBinding";
 import { RepeatFieldBinding } from "../form/field_bindings/RepeatFieldBinding";
 import { SelectFieldBinding } from "../form/field_bindings/SelectFieldBinding";
 import { StorageUploadFieldBinding } from "../form/field_bindings/StorageUploadFieldBinding";
 import { SwitchFieldBinding } from "../form/field_bindings/SwitchFieldBinding";
 import { TextFieldBinding } from "../form/field_bindings/TextFieldBinding";
+import { VectorFieldBinding } from "../form/field_bindings/VectorFieldBinding";
 import { isPropertyBuilder } from "@rebasepro/common";
 
-import { FolderUpIcon, FlagIcon, GlobeIcon, ListIcon, TextIcon, UserCheckIcon, Rows3Icon, LinkIcon, VoteIcon, ListOrderedIcon, QuoteIcon, MailIcon, HashIcon, UserIcon, RepeatIcon, CalendarIcon, AlignLeftIcon, UploadIcon } from "lucide-react";
+import {
+    AlignLeftIcon,
+    CalendarIcon,
+    FlagIcon,
+    FolderUpIcon,
+    GlobeIcon,
+    HashIcon,
+    LinkIcon,
+    ListIcon,
+    ListOrderedIcon,
+    MailIcon,
+    QuoteIcon,
+    RepeatIcon,
+    Rows3Icon,
+    TextIcon,
+    UploadIcon,
+    UserCheckIcon,
+    UserIcon,
+    VoteIcon
+} from "@rebasepro/ui";
 import { RelationFieldBinding } from "../form/field_bindings/RelationFieldBinding";
 import { UserSelectFieldBinding } from "../form/field_bindings/UserSelectFieldBinding";
 import { mergeDeep } from "@rebasepro/utils";
@@ -32,7 +51,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     multiline: {
@@ -43,8 +62,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            multiline: true,
-            Field: TextFieldBinding
+            ui: { multiline: true,
+Field: TextFieldBinding }
         }
     },
     markdown: {
@@ -55,8 +74,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            markdown: true,
-            Field: MarkdownEditorFieldBinding
+            ui: { markdown: true,
+Field: MarkdownEditorFieldBinding }
         }
     },
     url: {
@@ -67,8 +86,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#154fb3",
         property: {
             type: "string",
-            url: true,
-            Field: TextFieldBinding
+            ui: { url: true,
+Field: TextFieldBinding }
         }
     },
     email: {
@@ -80,7 +99,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "string",
             email: true,
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     switch: {
@@ -91,7 +110,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#20d9d2",
         property: {
             type: "boolean",
-            Field: SwitchFieldBinding
+            ui: { Field: SwitchFieldBinding }
         }
     },
     select: {
@@ -103,7 +122,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "string",
             enum: [],
-            Field: SelectFieldBinding
+            ui: { Field: SelectFieldBinding }
         }
     },
     multi_select: {
@@ -118,7 +137,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                 type: "string",
                 enum: []
             },
-            Field: MultiSelectFieldBinding
+            ui: { Field: MultiSelectFieldBinding }
         }
     },
     user_select: {
@@ -128,7 +147,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         Icon: UserIcon,
         property: {
             type: "string",
-            Field: UserSelectFieldBinding
+            ui: { Field: UserSelectFieldBinding }
         }
     },
     number_input: {
@@ -139,7 +158,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#bec920",
         property: {
             type: "number",
-            Field: TextFieldBinding
+            ui: { Field: TextFieldBinding }
         }
     },
     number_select: {
@@ -151,7 +170,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "number",
             enum: [],
-            Field: SelectFieldBinding
+            ui: { Field: SelectFieldBinding }
         }
     },
     multi_number_select: {
@@ -166,7 +185,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                 type: "number",
                 enum: []
             },
-            Field: MultiSelectFieldBinding
+            ui: { Field: MultiSelectFieldBinding }
         }
     },
     file_upload: {
@@ -180,7 +199,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             storage: {
                 storagePath: "{path}"
             },
-            Field: StorageUploadFieldBinding
+            ui: { Field: StorageUploadFieldBinding }
         }
     },
     multi_file_upload: {
@@ -197,18 +216,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
                     storagePath: "{path}"
                 }
             },
-            Field: StorageUploadFieldBinding
-        }
-    },
-    reference_as_string: {
-        key: "reference_as_string",
-        name: "Reference (as string)",
-        description: "The value refers to a different collection (it is saved as a string)",
-        Icon: LinkIcon,
-        color: "#154fb3",
-        property: {
-            type: "string",
-            Field: ReferenceAsStringFieldBinding
+            ui: { Field: StorageUploadFieldBinding }
         }
     },
     reference: {
@@ -219,7 +227,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#ff0042",
         property: {
             type: "reference",
-            Field: ReferenceFieldBinding
+            ui: { Field: ReferenceFieldBinding }
         }
     },
     multi_references: {
@@ -233,7 +241,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             of: {
                 type: "reference"
             },
-            Field: ArrayOfReferencesFieldBinding
+            ui: { Field: ArrayOfReferencesFieldBinding }
         }
     },
     relation: {
@@ -245,7 +253,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             relationName: "",
             type: "relation",
-            Field: RelationFieldBinding
+            ui: { Field: RelationFieldBinding }
         }
     },
     date_time: {
@@ -256,7 +264,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#8b46ff",
         property: {
             type: "date",
-            Field: DateTimeFieldBinding
+            ui: { Field: DateTimeFieldBinding }
         }
     },
     group: {
@@ -268,7 +276,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "map",
             properties: {},
-            Field: MapFieldBinding
+            ui: { Field: MapFieldBinding }
         }
     },
     key_value: {
@@ -280,7 +288,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         property: {
             type: "map",
             keyValue: true,
-            Field: KeyValueFieldBinding
+            ui: { Field: KeyValueFieldBinding }
         }
     },
     repeat: {
@@ -294,7 +302,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             of: {
                 type: "string"
             },
-            Field: RepeatFieldBinding
+            ui: { Field: RepeatFieldBinding }
         }
     },
     custom_array: {
@@ -305,7 +313,7 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#ff9408",
         property: {
             type: "array",
-            Field: ArrayCustomShapedFieldBinding
+            ui: { Field: ArrayCustomShapedFieldBinding }
         }
     },
     block: {
@@ -319,7 +327,19 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
             oneOf: {
                 properties: {}
             },
-            Field: BlockFieldBinding
+            ui: { Field: BlockFieldBinding }
+        }
+    },
+    vector_input: {
+        key: "vector_input",
+        name: "Vector input",
+        description: "Vector array for embeddings",
+        Icon: HashIcon,
+        color: "#bec920",
+        property: {
+            type: "vector",
+            dimensions: 1536,
+            ui: { Field: VectorFieldBinding }
         }
     }
 };
@@ -347,13 +367,13 @@ export function getFieldConfig(property: Property, propertyConfigs: Record<strin
 
 export function getDefaultFieldId(property: Property) {
     if (property.type === "string") {
-        if (property.multiline) {
-            return "multiline";
-        } else if (property.markdown) {
+        if (property.ui?.markdown) {
             return "markdown";
+        } else if (property.ui?.multiline) {
+            return "multiline";
         } else if (property.storage) {
             return "file_upload";
-        } else if (property.url) {
+        } else if (property.ui?.url) {
             return "url";
         } else if (property.email) {
             return "email";
@@ -361,8 +381,6 @@ export function getDefaultFieldId(property: Property) {
             return "select";
         } else if (property.userSelect) {
             return "user_select";
-        } else if (property.reference) {
-            return "reference_as_string";
         } else {
             return "text_field";
         }
@@ -410,6 +428,10 @@ export function getDefaultFieldId(property: Property) {
         return "relation";
     } else if (property.type === "reference") {
         return "reference";
+    } else if (property.type === "vector") {
+        return "vector_input";
+    } else if (property.type === "binary") {
+        return "text_field";
     }
 
     console.error("Unsupported field config mapping", property);

package/src/components/history/EntityHistoryEntry.tsx

@@ -1,14 +1,13 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import type { Property } from "@rebasepro/types";
 import * as React from "react";
 
-import { Chip, cls, defaultBorderMixin, Tooltip, Typography , iconSize } from "@rebasepro/ui";
-import { ArrowLeftIcon } from "lucide-react";
+import { ArrowLeftIcon, Chip, cls, defaultBorderMixin, iconSize, Tooltip, Typography } from "@rebasepro/ui";
 import { PreviewSize } from "../../types/components/PropertyPreviewProps";
 import { getPropertyInPath } from "../../util/property_utils";
 import { PropertyPreview } from "../../preview/PropertyPreview";
 import { SkeletonPropertyComponent } from "../../preview/property_previews/SkeletonPropertyComponent";
-import { useAuthController } from "@rebasepro/core";
+import { useAuthController } from "@rebasepro/app";
 import { UserChip } from "./UserChip";
 import { HistoryEntryData } from "../../hooks";
 import { getValueInPath } from "@rebasepro/utils";
@@ -40,7 +39,7 @@ function deepEqual(a: unknown, b: unknown): boolean {
 export type EntityHistoryEntryProps = {
     size: PreviewSize;
     actions?: React.ReactNode;
-    collection?: EntityCollection;
+    collection?: CollectionConfig;
     hover?: boolean;
     entry: HistoryEntryData;
     onClick?: (e: React.SyntheticEvent) => void;

package/src/components/history/EntityHistoryView.tsx

@@ -2,13 +2,12 @@
 import type { EntityCustomViewParams } from "@rebasepro/types";
 import { useRef, useEffect } from "react";
 import { cls, IconButton, Label, Tooltip, Typography } from "@rebasepro/ui";
-import { HistoryIcon } from "lucide-react";
+import { ErrorBoundary, HistoryIcon } from "@rebasepro/ui";
 import { EntityHistoryEntry } from "./EntityHistoryEntry";
-import { useSnackbarController, useAuthController } from "@rebasepro/core";
-import { ConfirmationDialog } from "@rebasepro/core";
-import { ErrorBoundary } from "@rebasepro/ui";
+import { useSnackbarController, useAuthController } from "@rebasepro/app";
+import { ConfirmationDialog } from "@rebasepro/app";
 import { useState } from "react";
-import { useEntityHistory } from "../../index";
+import { useHistory } from "../../index";
 
 /**
  * Entity history tab view. Shows a paginated list of entity revisions
@@ -33,7 +32,7 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
         hasMore,
         loadMore,
         revert
-    } = useEntityHistory({
+    } = useHistory({
         slug,
         entityId,
         enabled: !!entityId,
@@ -80,8 +79,19 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
     async function doRevert(historyId: string) {
         setIsReverting(true);
         try {
-            await revert(historyId);
+            const revertedValues = await revert(historyId);
             setRevertHistoryId(undefined);
+
+            // Reset the form with the reverted values so the UI updates
+            // immediately without requiring a page refresh.
+            if (formContext?.formex?.resetForm && revertedValues) {
+                formContext.formex.resetForm({
+                    values: revertedValues as M,
+                    submitCount: 0,
+                    touched: {}
+                });
+            }
+
             snackbarController.open({
                 message: "Reverted to selected version",
                 type: "info"
@@ -126,7 +136,7 @@ export function EntityHistoryView<M extends Record<string, unknown>>({
                     No history available
                 </Label>
                 <Typography variant={"caption"} className={"ml-4"}>
-                    When you save an entity, a new version is created and stored in the history.
+                    When you save a entity, a new version is created and stored in the history.
                 </Typography>
             </>}
 

package/src/components/history/LastEditedByIndicator.tsx

@@ -1,8 +1,8 @@
-import type { EntityCollection } from "@rebasepro/types";
+import type { CollectionConfig } from "@rebasepro/types";
 import React, { useEffect, useState, useCallback } from "react";
 ;
-import { useApiConfig } from "@rebasepro/core";
-import { useAuthController } from "@rebasepro/core";
+import { useApiConfig } from "@rebasepro/app";
+import { useAuthController } from "@rebasepro/app";
 import { HistoryEntryData } from "../../hooks";
 
 function getRelativeTimeString(date: Date): string {
@@ -31,7 +31,7 @@ export function LastEditedByIndicator({
 }: {
     path: string;
     entityId: string;
-    collection: EntityCollection;
+    collection: CollectionConfig;
 }) {
     const apiConfig = useApiConfig();
     const authController = useAuthController();

package/src/components/index.ts

@@ -1,38 +1,39 @@
-export type { EntityViewProps } from "./EntityView";
-export { EntityView } from "./EntityView";
+export type { EntityViewBindingProps } from "./EntityViewBinding";
+export { EntityViewBinding } from "./EntityViewBinding";
 
-export type { EntitySelectionProps } from "./ReferenceTable/EntitySelectionTable";
-export { EntitySelectionTable } from "./ReferenceTable/EntitySelectionTable";
+export * from "./DetailViewBinding";
+
+export type { SelectionProps } from "./ReferenceTable/SelectionTableBinding";
+export { SelectionTableBinding } from "./ReferenceTable/SelectionTableBinding";
 
 export * from "./SelectableTable/SelectableTable";
 export * from "./SelectableTable/SelectableTableContext";
-export * from "./EntityCollectionView/EntityCollectionView";
-export * from "./EntityCollectionView/EntityCollectionViewActions";
-export * from "./EntityCollectionView/EntityCollectionCardView";
-export * from "./EntityCollectionView/EntityCard";
-export * from "./EntityCollectionView/useSelectionController";
+export * from "./SelectableTable/filters/FilterFieldBinding";
+export * from "./CollectionViewBinding/CollectionViewBinding";
+export * from "./CollectionViewBinding/CollectionViewActions";
+export * from "./CollectionViewBinding/CollectionCardViewBinding";
+export * from "./CollectionViewBinding/EntityCardBinding";
+export * from "./CollectionViewBinding/useSelectionController";
 
 export * from "./PropertyConfigBadge";
 export * from "./PropertyIdCopyTooltip";
 
-export * from "./EntityCollectionTable";
+export * from "./CollectionTableBinding";
 // VirtualTable is exported from @rebasepro/ui
 export * from "./ArrayContainer";
 export * from "./ReferenceWidget";
 export * from "./SearchIconsView";
 export * from "./FieldCaption";
-export * from "./EntityPreview";
+export * from "./EntityPreviewBinding";
 
-// history is lazy-loaded by EntityEditView and resolutions.ts
+// history is lazy-loaded by EditViewBinding and resolutions.ts
 // export * from "./history";
 export * from "./common";
 export * from "./field_configs";
 
-export * from "./SideEntityProvider";
+export * from "./SidePanelProvider";
 export * from "./AdminModeSyncer";
-// Admin views are lazy-loaded by RebaseRouteDefs and useResolvedViews
-// export * from "./admin/RolesView";
-// export * from "./admin/UsersView";
+// Admin views: only CreationResultDialog remains (used by resetPasswordAction)
 export * from "./app/AppBar";
 export * from "./app/Drawer";
 export * from "./app/Scaffold";
@@ -45,7 +46,7 @@ export * from "./DrawerNavigationGroup";
 export * from "./SideDialogs";
 
 export * from "./app/useApp";
-export * from "./RebaseCMS";
+export * from "./RebaseAdmin";
 export * from "./RebaseShell";
 
 // Composable shell layers — each independently usable
@@ -53,3 +54,5 @@ export * from "./RebaseAuthGate";
 export * from "./RebaseNavigation";
 export * from "./RebaseLayout";
 export * from "./RebaseRouteDefs";
+
+export * from "./CollectionPanel";

package/src/contexts/BreacrumbsContext.tsx

@@ -22,14 +22,23 @@ export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ childr
     const set = useCallback((props: {
         breadcrumbs: BreadcrumbEntry[];
     }) => {
-        setBreadcrumbs(prev => props.breadcrumbs.map(newEntry => {
-            const prevEntry = newEntry.id ? prev.find(p => p.id === newEntry.id) : undefined;
-            if (prevEntry && newEntry.count === null && typeof prevEntry.count === "number") {
-                return { ...newEntry,
+        setBreadcrumbs(prev => {
+            const next = props.breadcrumbs.map(newEntry => {
+                const prevEntry = newEntry.id ? prev.find(p => p.id === newEntry.id) : undefined;
+                if (prevEntry && newEntry.count === null && typeof prevEntry.count === "number") {
+                    return { ...newEntry,
 count: prevEntry.count };
+                }
+                return newEntry;
+            });
+            // Bail out if nothing changed — return same reference to skip re-render
+            if (prev.length === next.length && prev.every((p, i) =>
+                p.title === next[i].title && p.url === next[i].url && p.id === next[i].id && p.count === next[i].count
+            )) {
+                return prev;
             }
-            return newEntry;
-        }));
+            return next;
+        });
     }, []);
 
     const updateCount = useCallback((id: string, count: number | null | undefined) => {

package/src/contexts/SidePanelControllerContext.tsx

@@ -0,0 +1,5 @@
+import type { SidePanelController } from "@rebasepro/types";
+import React from "react";
+;
+
+export const SidePanelControllerContext = React.createContext<SidePanelController>({} as SidePanelController);

package/src/data_export/export/BasicExportAction.tsx

@@ -1,9 +1,23 @@
 
 import React, { useCallback } from "react";
 
+import { useTranslation } from "@rebasepro/app";
 import { Entity, Properties } from "@rebasepro/types";
-import { BooleanSwitchWithLabel, Button, cls, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from "@rebasepro/ui";
-import { DownloadIcon } from "lucide-react";
+import {
+    BooleanSwitchWithLabel,
+    Button,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    DownloadIcon,
+    IconButton,
+    Label,
+    RadioGroup,
+    RadioGroupItem,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
 import { downloadEntitiesExport } from "./export";
 
 export type BasicExportActionProps = {
@@ -18,6 +32,7 @@ export function BasicExportAction({
     propertiesOrder
 }: BasicExportActionProps) {
 
+    const { t } = useTranslation();
     const dateRef = React.useRef<Date>(new Date());
     const [flattenArrays, setFlattenArrays] = React.useState<boolean>(true);
     const [exportType, setExportType] = React.useState<"csv" | "json">("csv");
@@ -65,53 +80,37 @@ export function BasicExportAction({
             onOpenChange={setOpen}
             maxWidth={"xl"}>
 
-            <DialogTitle variant={"h6"}>Export data</DialogTitle>
+            <DialogTitle variant={"h6"}>{t("export_data")}</DialogTitle>
 
             <DialogContent className={"flex flex-col gap-4 my-4"}>
 
-                <div>DownloadIcon the the content of this table as a CSV</div>
+                <div>{t("download_table_csv")}</div>
 
                 <div className={"flex flex-row gap-4"}>
                     <div className={"p-4 flex flex-col"}>
-                        <div className="flex items-center">
-                            <input id="radio-csv" type="radio" value="csv" name="exportType"
-                                checked={exportType === "csv"}
-                                onChange={() => setExportType("csv")}
-                                className={cls("w-4 bg-surface-100 border-surface-300 dark:bg-surface-700 dark:border-surface-600")}/>
-                            <label htmlFor="radio-csv"
-                                className="p-2 text-sm font-medium text-surface-900 dark:text-surface-accent-300">CSV</label>
-                        </div>
-                        <div className="flex items-center">
-                            <input id="radio-json" type="radio" value="json" name="exportType"
-                                checked={exportType === "json"}
-                                onChange={() => setExportType("json")}
-                                className={cls("w-4 bg-surface-100 border-surface-300 dark:bg-surface-700 dark:border-surface-600")}/>
-                            <label htmlFor="radio-json"
-                                className="p-2 text-sm font-medium text-surface-900 dark:text-surface-accent-300">JSON</label>
-                        </div>
+                        <RadioGroup value={exportType} onValueChange={(v) => setExportType(v as "csv" | "json")}>
+                            <div className="flex items-center gap-2">
+                                <RadioGroupItem value="csv" id="radio-csv"/>
+                                <Label htmlFor="radio-csv">{t("csv")}</Label>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <RadioGroupItem value="json" id="radio-json"/>
+                                <Label htmlFor="radio-json">{t("json")}</Label>
+                            </div>
+                        </RadioGroup>
                     </div>
 
                     <div className={"p-4 flex flex-col"}>
-                        <div className="flex items-center">
-                            <input id="radio-timestamp" type="radio" value="timestamp" name="dateExportType"
-                                checked={dateExportType === "timestamp"}
-                                onChange={() => setDateExportType("timestamp")}
-                                className={cls("w-4 bg-surface-100 border-surface-300 dark:bg-surface-700 dark:border-surface-600")}/>
-                            <label htmlFor="radio-timestamp"
-                                className="p-2 text-sm font-medium text-surface-900 dark:text-surface-accent-300">Dates
-                                as
-                                timestamps ({dateRef.current.getTime()})</label>
-                        </div>
-                        <div className="flex items-center">
-                            <input id="radio-string" type="radio" value="string" name="dateExportType"
-                                checked={dateExportType === "string"}
-                                onChange={() => setDateExportType("string")}
-                                className={cls("w-4 bg-surface-100 border-surface-300 dark:bg-surface-700 dark:border-surface-600")}/>
-                            <label htmlFor="radio-string"
-                                className="p-2 text-sm font-medium text-surface-900 dark:text-surface-accent-300">Dates
-                                as
-                                strings ({dateRef.current.toISOString()})</label>
-                        </div>
+                        <RadioGroup value={dateExportType} onValueChange={(v) => setDateExportType(v as "timestamp" | "string")}>
+                            <div className="flex items-center gap-2">
+                                <RadioGroupItem value="timestamp" id="radio-timestamp"/>
+                                <Label htmlFor="radio-timestamp">{t("dates_as_timestamps")} ({dateRef.current.getTime()})</Label>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <RadioGroupItem value="string" id="radio-string"/>
+                                <Label htmlFor="radio-string">{t("dates_as_strings")} ({dateRef.current.toISOString()})</Label>
+                            </div>
+                        </RadioGroup>
                     </div>
                 </div>
 
@@ -120,7 +119,7 @@ export function BasicExportAction({
                     disabled={exportType !== "csv"}
                     value={flattenArrays}
                     onValueChange={setFlattenArrays}
-                    label={"Flatten arrays"}/>
+                    label={t("flatten_arrays")}/>
 
             </DialogContent>
 
@@ -128,11 +127,11 @@ export function BasicExportAction({
 
                 <Button onClick={handleClose}
                     variant={"text"}>
-                    Cancel
+                    {t("cancel")}
                 </Button>
 
                 <Button onClick={onOkClicked}>
-                    DownloadIcon
+                    {t("download")}
                 </Button>
 
             </DialogActions>