@rebasepro/admin 0.1.0 → 0.2.1

package/src/components/RelationSelector.tsx

@@ -1,10 +1,29 @@
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+    ArrowRightToLineIcon,
+    CheckIcon,
+    ChevronDownIcon,
+    Chip,
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled,
+    IconButton,
+    iconSize,
+    PopoverPrimitive,
+    SearchIcon,
+    Separator,
+    Tooltip,
+    useInjectStyles,
+    XIcon
+} from "@rebasepro/ui";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { Chip, CircularProgress, cls, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, IconButton, Separator, Tooltip, useInjectStyles , iconSize } from "@rebasepro/ui";
-import { CheckIcon, XIcon, ChevronDownIcon, ArrowRightToLineIcon, SearchIcon } from "lucide-react";
 import { Entity, EntityRelation, FilterValues, Relation } from "@rebasepro/types";
 import { EntityPreviewData } from "./EntityPreview";
 import { useData, useRelationSelector } from "@rebasepro/core";
@@ -105,7 +124,16 @@ export const RelationSelector = React.forwardRef<
         const scrollContainerRef = useRef<HTMLDivElement>(null);
         const sentinelRef = useRef<HTMLDivElement>(null);
         const observerRef = useRef<IntersectionObserver | null>(null);
-        const triggerRef = (ref as React.RefObject<HTMLButtonElement>) || useRef<HTMLButtonElement>(null);
+        const localTriggerRef = useRef<HTMLButtonElement | null>(null);
+
+        const handleButtonRef = useCallback((node: HTMLButtonElement | null) => {
+            localTriggerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        }, [ref]);
         const contentRef = useRef<HTMLDivElement | null>(null);
         const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -367,7 +395,7 @@ relation } as RelationItem;
 
             function handlePointerDown(ev: MouseEvent) {
                 const target = ev.target as Node;
-                const triggerEl = triggerRef.current;
+                const triggerEl = localTriggerRef.current;
                 const contentEl = contentRef.current;
                 if (triggerEl?.contains(target)) return;
                 if (contentEl?.contains(target)) return;
@@ -411,7 +439,7 @@ relation } as RelationItem;
                 <PopoverPrimitive.Root open={isPopoverOpen} onOpenChange={handleRootOpenChange} modal={false}>
                     <PopoverPrimitive.Trigger asChild>
                         <button
-                            ref={triggerRef as React.Ref<HTMLButtonElement>}
+                            ref={handleButtonRef}
                             type="button"
                             aria-haspopup="listbox"
                             aria-expanded={isPopoverOpen}

package/src/components/SearchIconsView.tsx

@@ -1,7 +1,15 @@
 import React from "react";
 
-import { coolIconKeys, debounce, IconButton, iconKeys, SearchBar, Tooltip, iconSize } from "@rebasepro/ui";
-import { icons as lucideIcons } from "lucide-react";
+import {
+    coolIconKeys,
+    debounce,
+    IconButton,
+    iconKeys,
+    iconSize,
+    lucideIcons,
+    SearchBar,
+    Tooltip
+} from "@rebasepro/ui";
 import { iconsSearch, iconSynonyms } from "@rebasepro/core";
 import { useTranslation } from "@rebasepro/core";
 

package/src/components/SelectableTable/SelectableTable.tsx

@@ -213,7 +213,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
     // on ESC key press
     useEffect(() => {
         const escFunction = (event: KeyboardEvent) => {
-            if (event.keyCode === 27) {
+            if (event.key === "Escape") {
                 unselect();
             }
         };
@@ -234,12 +234,12 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
         onValueChange,
         size: size ?? "m",
         selectionStore
-    } as unknown as EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectionStore]);
+    } as EntityCollectionTableController<any>), [setPopupCell, select, onValueChange, size, selectionStore]);
 
     return (
         <SelectableTableContext.Provider
             value={contextValue}>
-            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-800"
+            <div className="h-full w-full flex flex-col bg-white dark:bg-surface-900"
                 ref={ref}>
 
                 <VirtualTable
@@ -264,7 +264,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                     checkFilterCombination={checkFilterCombination}
                     createFilterField={filterable ? createFilterField : undefined}
                     rowClassName={useCallback((entity: Entity<M>) => {
-                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-950" : "";
+                        return highlightedRow?.(entity) ? "bg-surface-accent-50 dark:!bg-surface-accent-900" : "";
                     }, [highlightedRow])}
                     className="grow"
                     emptyComponent={emptyComponent}

package/src/components/SelectableTable/filters/StringNumberFilterField.tsx

@@ -2,8 +2,7 @@
 import React, { useState } from "react";
 import { EnumValuesChip } from "../../../preview";
 import { VirtualTableWhereFilterOp } from "@rebasepro/ui";
-import { XIcon } from "lucide-react";
-import { IconButton, MultiSelect, MultiSelectItem, Select, SelectItem, TextField } from "@rebasepro/ui";
+import { IconButton, MultiSelect, MultiSelectItem, Select, SelectItem, TextField, XIcon } from "@rebasepro/ui";
 import { EnumValueConfig } from "@rebasepro/types";
 import { useTranslation } from "@rebasepro/core";
 

package/src/components/SideDialogs.tsx

@@ -1,10 +1,11 @@
 import type { SideDialogPanelProps } from "../hooks/useSideDialogsController";
 import React, { useCallback, useContext, useEffect, useState, useMemo } from "react";
 import { useSideDialogsController } from "../hooks";
-;
-import { Sheet } from "@rebasepro/ui";
+import { Sheet, Dialog } from "@rebasepro/ui";
 import { useUnsavedChangesDialog, UnsavedChangesDialog } from "@rebasepro/core";
 import { ErrorBoundary } from "@rebasepro/ui";
+import type { EntitySidePanelProps } from "@rebasepro/types";
+
 
 export type SideDialogController = {
     blocked: boolean,
@@ -145,46 +146,70 @@ function SideDialogView({
         setPendingClose
     }), [blocked, setBlockedNavigationMessage, width, onCloseRequest, pendingClose]);
 
+    const additionalProps = panel?.additional as EntitySidePanelProps | undefined;
+    const isDialogMode = additionalProps?.collection?.openEntityMode === "dialog";
+
     return (
         <SideDialogContext.Provider value={contextValue}>
 
-            <Sheet
-                open={Boolean(panel)}
-                includeBackgroundOverlay={true}
-                overlayStyle={{ zIndex: 40 + panelIndex * 10 }}
-                style={{ zIndex: 45 + panelIndex * 10 }}
-                onOpenChange={(open) => {
-                    if (!open) {
-                        // Check if any suggestion menu is visible in DOM
-                        const suggestionMenu = document.querySelector("[data-suggestion-menu=\"true\"]");
-                        if (suggestionMenu && window.getComputedStyle(suggestionMenu).visibility !== "hidden") {
-                            // Don't close the sheet if a suggestion menu is visible
-                            // Let Tiptap handle closing the menu first
-                            return;
+            {isDialogMode ? (
+                <Dialog
+                    open={Boolean(panel)}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            onCloseRequest();
                         }
-                        onCloseRequest();
-                    }
-                }}
-                onPointerDownOutside={!isTopPanel ? preventDismiss : undefined}
-                onInteractOutside={!isTopPanel ? preventDismiss : undefined}
-                title={"Side dialog " + panel?.key}
-            >
-                {panel &&
-                    <div
-                        className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-800 "}
-                        style={{
-                            width: panel.width,
-                            transform: `translateX(-${offsetPosition * 200}px)`
-                        }}
-                    >
-                        <ErrorBoundary>
-                            {panel.component}
-                        </ErrorBoundary>
-                    </div>}
-
-                {!panel && <div style={{ width }}/>}
-
-            </Sheet>
+                    }}
+                    maxWidth="4xl"
+                    scrollable={false}
+                >
+                    {panel && (
+                        <div className="flex flex-col h-[75vh] min-h-[500px] min-w-[55vw] max-w-full overflow-hidden">
+                            <ErrorBoundary>
+                                {panel.component}
+                            </ErrorBoundary>
+                        </div>
+                    )}
+                </Dialog>
+            ) : (
+                <Sheet
+                    open={Boolean(panel)}
+                    includeBackgroundOverlay={true}
+                    overlayStyle={{ zIndex: 40 + panelIndex * 10 }}
+                    style={{ zIndex: 45 + panelIndex * 10 }}
+                    onOpenChange={(open) => {
+                        if (!open) {
+                            // Check if any suggestion menu is visible in DOM
+                            const suggestionMenu = document.querySelector("[data-suggestion-menu=\"true\"]");
+                            if (suggestionMenu && window.getComputedStyle(suggestionMenu).visibility !== "hidden") {
+                                // Don't close the sheet if a suggestion menu is visible
+                                // Let Tiptap handle closing the menu first
+                                return;
+                            }
+                            onCloseRequest();
+                        }
+                    }}
+                    onPointerDownOutside={!isTopPanel ? preventDismiss : undefined}
+                    onInteractOutside={!isTopPanel ? preventDismiss : undefined}
+                    title={"Side dialog " + panel?.key}
+                >
+                    {panel &&
+                        <div
+                            className={"transform max-w-[100vw] lg:max-w-[95vw] flex flex-col h-full transition-all duration-250 ease-in-out bg-white dark:bg-surface-800 "}
+                            style={{
+                                width: panel.width,
+                                transform: `translateX(-${offsetPosition * 200}px)`
+                            }}
+                        >
+                            <ErrorBoundary>
+                                {panel.component}
+                            </ErrorBoundary>
+                        </div>}
+
+                    {!panel && <div style={{ width }}/>}
+
+                </Sheet>
+            )}
 
             <UnsavedChangesDialog
                 {...dialogProps}

package/src/components/UserSelector.tsx

@@ -1,10 +1,25 @@
 
-import * as PopoverPrimitive from "@radix-ui/react-popover";
+import {
+    ChevronDownIcon,
+    CircularProgress,
+    cls,
+    defaultBorderMixin,
+    fieldBackgroundDisabledMixin,
+    fieldBackgroundHoverMixin,
+    fieldBackgroundInvisibleMixin,
+    fieldBackgroundMixin,
+    focusedDisabled,
+    IconButton,
+    iconSize,
+    PopoverPrimitive,
+    SearchIcon,
+    Separator,
+    useInjectStyles,
+    XIcon
+} from "@rebasepro/ui";
 import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
-import { CircularProgress, cls, defaultBorderMixin, fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedDisabled, IconButton, Separator, useInjectStyles , iconSize } from "@rebasepro/ui";
-import { XIcon, ChevronDownIcon, SearchIcon } from "lucide-react";
 import { User } from "@rebasepro/types";
 import { useUserSelector, UserSelectorItem } from "@rebasepro/core";
 import { UserDisplay } from "@rebasepro/core";
@@ -64,7 +79,16 @@ export const UserSelector = React.forwardRef<
         const scrollContainerRef = useRef<HTMLDivElement>(null);
         const sentinelRef = useRef<HTMLDivElement>(null);
         const observerRef = useRef<IntersectionObserver | null>(null);
-        const triggerRef = (ref as React.RefObject<HTMLButtonElement>) || useRef<HTMLButtonElement>(null);
+        const localTriggerRef = useRef<HTMLButtonElement | null>(null);
+
+        const handleButtonRef = useCallback((node: HTMLButtonElement | null) => {
+            localTriggerRef.current = node;
+            if (typeof ref === "function") {
+                ref(node);
+            } else if (ref) {
+                ref.current = node;
+            }
+        }, [ref]);
         const contentRef = useRef<HTMLDivElement | null>(null);
         const searchInputRef = useRef<HTMLInputElement | null>(null);
 
@@ -155,7 +179,7 @@ export const UserSelector = React.forwardRef<
 
             function handlePointerDown(ev: MouseEvent) {
                 const target = ev.target as Node;
-                const triggerEl = triggerRef.current;
+                const triggerEl = localTriggerRef.current;
                 const contentEl = contentRef.current;
                 if (triggerEl?.contains(target)) return;
                 if (contentEl?.contains(target)) return;
@@ -184,7 +208,7 @@ export const UserSelector = React.forwardRef<
                 <PopoverPrimitive.Root open={isPopoverOpen} onOpenChange={handleRootOpenChange} modal={false}>
                     <PopoverPrimitive.Trigger asChild>
                         <button
-                            ref={triggerRef as React.Ref<HTMLButtonElement>}
+                            ref={handleButtonRef}
                             type="button"
                             aria-haspopup="listbox"
                             aria-expanded={isPopoverOpen}

package/src/components/admin/CreationResultDialog.tsx

@@ -0,0 +1,135 @@
+import React, { useState } from "react";
+import {
+    Alert,
+    Button,
+    CheckCircleIcon,
+    CopyIcon,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    MailIcon,
+    Tooltip,
+    Typography
+} from "@rebasepro/ui";
+import { useSnackbarController, useTranslation } from "@rebasepro/core";
+import { UserCreationResult } from "@rebasepro/types";
+
+export function CreationResultDialog({
+    result,
+    onClose
+}: {
+    result: UserCreationResult;
+    onClose: () => void;
+}) {
+    const { t } = useTranslation();
+    const snackbarController = useSnackbarController();
+    const [copied, setCopied] = useState(false);
+
+    const handleCopyPassword = async () => {
+        if (!result.temporaryPassword) return;
+        try {
+            await navigator.clipboard.writeText(result.temporaryPassword);
+            setCopied(true);
+            snackbarController.open({
+                type: "success",
+                message: t("password_copied") ?? "Password copied to clipboard"
+            });
+            setTimeout(() => setCopied(false), 3000);
+        } catch {
+            // Fallback for older browsers
+            const textArea = document.createElement("textarea");
+            textArea.value = result.temporaryPassword;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand("copy");
+            document.body.removeChild(textArea);
+            setCopied(true);
+            setTimeout(() => setCopied(false), 3000);
+        }
+    };
+
+    if (result.invitationSent) {
+        // Invitation sent via email
+        return (
+            <Dialog open={true} onOpenChange={(open) => !open ? onClose() : undefined} maxWidth="xl">
+                <DialogTitle variant="h5" gutterBottom={false}>
+                    <div className="flex items-center gap-3">
+                        <MailIcon/>
+                        {t("invitation_sent_title") ?? "Invitation Sent"}
+                    </div>
+                </DialogTitle>
+                <DialogContent>
+                    <div className="flex flex-col gap-4 py-2">
+                        <Alert color="success">
+                            <Typography>
+                                {(t("invitation_sent") ?? "An invitation email has been sent to {{email}}. They can use the link to set their password.")
+                                    .replace("{{email}}", result.user.email ?? "")}
+                            </Typography>
+                        </Alert>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button variant="filled" onClick={onClose}>
+                        {t("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+
+    if (result.temporaryPassword) {
+        // No email — show temporary password
+        return (
+            <Dialog open={true} onOpenChange={(open) => !open ? onClose() : undefined} maxWidth="xl">
+                <DialogTitle variant="h5" gutterBottom={false}>
+                    {t("temporary_password") ?? "Temporary Password"}
+                </DialogTitle>
+                <DialogContent>
+                    <div className="flex flex-col gap-4 py-2">
+                        <Alert color="warning">
+                            <Typography variant="body2">
+                                {t("temporary_password_description") ??
+                                    "Email is not configured. Share this temporary password with the user securely. It will not be shown again."}
+                            </Typography>
+                        </Alert>
+
+                        <div>
+                            <Typography variant="caption" color="secondary" className="mb-1">
+                                {t("email")}
+                            </Typography>
+                            <Typography>
+                                {result.user.email}
+                            </Typography>
+                        </div>
+
+                        <div>
+                            <Typography variant="caption" color="secondary" className="mb-1">
+                                {t("temporary_password") ?? "Temporary Password"}
+                            </Typography>
+                            <div className="flex items-center gap-2 mt-1">
+                                <code className="flex-grow bg-surface-100 dark:bg-surface-900 border border-surface-300 dark:border-surface-600 rounded px-3 py-2 font-mono text-base select-all">
+                                    {result.temporaryPassword}
+                                </code>
+                                <Tooltip title={t("copy_password") ?? "Copy password"} asChild>
+                                    <IconButton onClick={handleCopyPassword}>
+                                        {copied ? <CheckCircleIcon className="text-green-600"/> : <CopyIcon/>}
+                                    </IconButton>
+                                </Tooltip>
+                            </div>
+                        </div>
+                    </div>
+                </DialogContent>
+                <DialogActions>
+                    <Button variant="filled" onClick={onClose}>
+                        {t("ok")}
+                    </Button>
+                </DialogActions>
+            </Dialog>
+        );
+    }
+
+    // Shouldn't happen, but fallback
+    return null;
+}

package/src/components/admin/RolesFilterSelect.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { CollectionActionsProps } from "@rebasepro/types";
+import { Select, SelectItem } from "@rebasepro/ui";
+import { useTranslation, useInternalUserManagementController } from "@rebasepro/core";
+
+export function RolesFilterSelect({
+    tableController
+}: CollectionActionsProps<any>) {
+    const { t } = useTranslation();
+    const userManagement = useInternalUserManagementController();
+    const roles = userManagement?.roles || [];
+
+    const currentFilterValue = (tableController.filterValues?.roles?.[1] as string) || "";
+
+    const handleRoleChange = (newRole: string) => {
+        const filterVal = newRole === "" ? undefined : newRole;
+        if (filterVal) {
+            tableController.setFilterValues?.({
+                ...tableController.filterValues,
+                roles: ["array-contains", filterVal]
+            });
+        } else {
+            const nextFilters = { ...tableController.filterValues };
+            delete nextFilters.roles;
+            tableController.setFilterValues?.(nextFilters);
+        }
+    };
+
+    if (!roles || roles.length === 0) return null;
+
+    return (
+        <Select
+            value={currentFilterValue || "__all__"}
+            onValueChange={(v) => handleRoleChange(v === "__all__" ? "" : v)}
+            placeholder={t("all_roles") || "All Roles"}
+            size="small"
+            className="w-48"
+        >
+            <SelectItem value="__all__">{t("all_roles") || "All Roles"}</SelectItem>
+            {roles.map(role => (
+                <SelectItem key={role.id} value={role.id}>{role.name}</SelectItem>
+            ))}
+        </Select>
+    );
+}

package/src/components/admin/RolesView.tsx

@@ -4,8 +4,34 @@ import { useCollectionRegistryController } from "../../index";
 import { useSnackbarController, useTranslation } from "@rebasepro/core";
 import { getDataSourceCapabilities, Role, SecurityRule, UserManagementDelegate } from "@rebasepro/types";
 import { useBreadcrumbsController } from "../../index";
-import { Button, Chip, Container, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Paper, Table, TableBody, TableCell, TableHeader, TableRow, TextField, Typography, CircularProgress, CenteredView, Tooltip, Checkbox, LoadingButton, defaultBorderMixin , iconSize } from "@rebasepro/ui";
-import { PlusIcon, Trash2Icon } from "lucide-react";
+import {
+    Button,
+    CenteredView,
+    Checkbox,
+    Chip,
+    CircularProgress,
+    Container,
+    defaultBorderMixin,
+    Dialog,
+    DialogActions,
+    DialogContent,
+    DialogTitle,
+    IconButton,
+    iconSize,
+    Label,
+    LoadingButton,
+    Paper,
+    PlusIcon,
+    Table,
+    TableBody,
+    TableCell,
+    TableHeader,
+    TableRow,
+    TextField,
+    Tooltip,
+    Trash2Icon,
+    Typography
+} from "@rebasepro/ui";
 import { RoleChip } from "./RoleChip";
 import { ConfirmationDialog } from "@rebasepro/core";
 
@@ -64,20 +90,33 @@ message: error instanceof Error ? error.message : t("error_deleting_role") });
         }
     };
 
-    const createDefaultRoles = () => {
+    const createDefaultRoles = async () => {
         if (!saveRole) return;
         const defaultRoles: Role[] = [
             { id: "admin",
-name: "Admin",
-isAdmin: true },
+              name: "Admin",
+              isAdmin: true },
             { id: "editor",
-name: "Editor",
-isAdmin: false },
+              name: "Editor",
+              isAdmin: false },
             { id: "viewer",
-name: "Viewer",
-isAdmin: false }
+              name: "Viewer",
+              isAdmin: false }
         ];
-        defaultRoles.forEach(role => saveRole(role));
+        try {
+            for (const role of defaultRoles) {
+                await saveRole(role);
+            }
+            snackbarController.open({
+                type: "success",
+                message: t("saved_correctly")
+            });
+        } catch (error: unknown) {
+            snackbarController.open({
+                type: "error",
+                message: error instanceof Error ? error.message : t("error_saving_role")
+            });
+        }
     };
 
     if (loading) {
@@ -285,13 +324,13 @@ height: "100%" }}>
                         </div>
 
                         <div className="col-span-12 sm:col-span-4 flex items-start pt-2">
-                            <label className="flex items-center gap-2 cursor-pointer mt-3">
+                            <Label className="flex items-center gap-2 cursor-pointer mt-3">
                                 <Checkbox
                                     checked={isAdmin}
                                     onCheckedChange={(checked) => setIsAdmin(Boolean(checked))}
                                 />
-                                <span className="font-medium">{t("is_admin")}</span>
-                            </label>
+                                <Typography variant="body2" className="font-medium">{t("is_admin")}</Typography>
+                            </Label>
                         </div>
 
                         <div className="col-span-12">
@@ -307,7 +346,7 @@ height: "100%" }}>
                     <LoadingButton
                         variant="filled"
                         type="submit"
-                        disabled={!isNewRole && !isAdmin}
+                        disabled={isSubmitting}
                         loading={isSubmitting}
                     >
                         {isNewRole ? t("create_role") : t("update")}

package/src/components/admin/UserRolesSelectField.tsx

@@ -0,0 +1,50 @@
+import React from "react";
+import { FieldProps } from "../../types/fields";
+import { MultiSelect, MultiSelectItem } from "@rebasepro/ui";
+import { useTranslation, useInternalUserManagementController } from "@rebasepro/core";
+import { RoleChip } from "./RoleChip";
+
+export function UserRolesSelectField({
+    propertyKey,
+    value,
+    setValue,
+    disabled
+}: FieldProps) {
+    const { t } = useTranslation();
+    const userManagement = useInternalUserManagementController();
+    const roles = userManagement?.roles || [];
+
+    const selectedRoleIds = (value || []).map((r: any) => {
+        if (typeof r === "object" && r !== null) {
+            return r.id;
+        }
+        return r;
+    });
+
+    const handleValueChange = (val: string[]) => {
+        const references = val.map(id => ({
+            id,
+            path: "roles",
+            __type: "relation"
+        }));
+        setValue(references);
+    };
+
+    return (
+        <div className="col-span-12">
+            <MultiSelect
+                className="w-full"
+                label={t("roles") || "Roles"}
+                value={selectedRoleIds}
+                onValueChange={handleValueChange}
+                disabled={disabled}
+            >
+                {roles.map(role => (
+                    <MultiSelectItem key={role.id} value={role.id}>
+                        <RoleChip role={role}/>
+                    </MultiSelectItem>
+                ))}
+            </MultiSelect>
+        </div>
+    );
+}