@rebasepro/admin 0.3.0 → 0.5.0

package/src/components/EntityCollectionView/hooks/useCollectionInlineEditor.ts

@@ -42,6 +42,7 @@ export function useCollectionInlineEditor<M extends Record<string, unknown>>({
         setError,
         data: entity
     }) => {
+        if (!entity) return;
 
         const updatedValues = setIn({}, propertyKey, value) as Partial<Record<string, unknown>>;
 

package/src/components/EntityCollectionView/useEntityPreviewSlots.ts

@@ -2,6 +2,7 @@ import { useMemo } from "react";
 import type { EntityCollection, Property, RelationProperty } from "@rebasepro/types";
 import type { Entity, PropertyConfig, EntityRelation } from "@rebasepro/types";
 import { getEntityImagePreviewPropertyKey } from "@rebasepro/common";
+import { getEntityFromCache } from "@rebasepro/core";
 import { getEntityTitlePropertyKey, getEntityPreviewKeys } from "../../util/previews";
 import { getValueInPath } from "@rebasepro/utils";
 import type { AuthController } from "@rebasepro/types";
@@ -428,43 +429,92 @@ function resolveRelationDisplayName(
 ): string | undefined {
     // Support both EntityRelation instances and plain objects
     const data = "data" in relation ? (relation as EntityRelation).data : undefined;
-    if (!data || !data.values) {
-        // No eagerly-loaded data — fall back to ID
-        const id = "id" in relation ? relation.id : undefined;
-        return id !== undefined ? String(id) : undefined;
-    }
-
-    const values = data.values as Record<string, unknown>;
 
-    // Try using the target collection's title property for accuracy
+    // Resolve target collection from either `prop.relation.target()` or `prop.target()` (inline API)
+    let targetCollection: EntityCollection | undefined;
     try {
-        const targetCollection = prop.relation?.target?.();
+        const resolved = prop.relation?.target?.() ?? (typeof prop.target === "function" ? prop.target() : undefined);
+        if (resolved && typeof resolved === "object") {
+            targetCollection = resolved as EntityCollection;
+        }
+    } catch {
+        // Target collection may not be resolvable
+    }
+
+    // Helper: extract display name from entity values using the target collection
+    const extractDisplayName = (values: Record<string, unknown>): string | undefined => {
         if (targetCollection) {
             const targetTitleKey = targetCollection.titleProperty as string | undefined;
             if (targetTitleKey && values[targetTitleKey] !== undefined) {
                 return String(values[targetTitleKey]);
             }
-            // Fallback: find first non-id string property in target
+
+            // Helper to check if a property is hidden/internal
+            const isHiddenProp = (p: Property): boolean => {
+                if (p.ui?.hideFromCollection) return true;
+                if (typeof p.ui?.disabled === "object" && p.ui.disabled.hidden) return true;
+                return false;
+            };
+
+            // Helper to check if a property is a visible, non-id string
+            const isDisplayCandidate = (p: Property): boolean => {
+                return p.type === "string" && !p.multiline && !p.markdown && !p.storage
+                    && !("isId" in p && p.isId) && !isHiddenProp(p);
+            };
+
+            // Prioritize common title-like fields: name, title, label, displayName
+            const priorityKeys = ["name", "title", "label", "displayName"];
+            for (const pk of priorityKeys) {
+                const p = targetCollection.properties[pk] as Property | undefined;
+                if (p && isDisplayCandidate(p) && values[pk] !== undefined && values[pk] !== null) {
+                    return String(values[pk]);
+                }
+            }
+
+            // Fallback: find first visible, non-id string property in target
             for (const [k, p] of Object.entries(targetCollection.properties)) {
                 const tp = p as Property;
-                if (tp.type === "string" && !tp.multiline && !tp.markdown && !tp.storage && !("isId" in tp && tp.isId)) {
+                if (isDisplayCandidate(tp)) {
                     if (values[k] !== undefined && values[k] !== null) {
                         return String(values[k]);
                     }
                 }
             }
         }
-    } catch {
-        // Target collection may not be resolvable — fall through
+        // Generic fallback: walk entity values for any short string.
+        for (const [, v] of Object.entries(values)) {
+            if (typeof v === "string" && v.length > 0 && v.length < 200) {
+                return v;
+            }
+        }
+        return undefined;
+    };
+
+    // 1. Try eagerly-loaded data on the relation object
+    if (data && data.values) {
+        const result = extractDisplayName(data.values as Record<string, unknown>);
+        if (result) return result;
     }
 
-    // Generic fallback: walk entity values for any short string.
-    for (const [, v] of Object.entries(values)) {
-        if (typeof v === "string" && v.length > 0 && v.length < 200) {
-            return v;
+    const id = "id" in relation ? relation.id : undefined;
+
+    // 2. Try the entity cache (sessionStorage) as a fallback
+    if (id !== undefined && targetCollection) {
+        try {
+            const slug = targetCollection.slug ?? ("table" in targetCollection ? targetCollection.table : undefined);
+            if (slug) {
+                const cacheKey = `${slug}/${id}`;
+                const cached = getEntityFromCache(cacheKey) as { values?: Record<string, unknown> } | undefined;
+                if (cached?.values) {
+                    const result = extractDisplayName(cached.values);
+                    if (result) return result;
+                }
+            }
+        } catch {
+            // Cache lookup failed — fall through
         }
     }
 
-    const id = "id" in relation ? relation.id : undefined;
+    // 3. Final fallback: show the ID
     return id !== undefined ? String(id) : undefined;
 }

package/src/components/EntityDetailView.tsx

@@ -1,4 +1,4 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams, EntityDetailViewConfig } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -47,9 +47,7 @@ import { EntityJsonPreview } from "../components/EntityJsonPreview";
 
 const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
 
-export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
-export const JSON_TAB_VALUE = "__json";
-export const HISTORY_TAB_VALUE = "__rebase_history";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
 
 export type BarActionsParams = {
     values: object,
@@ -154,9 +152,19 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
         { status: "existing", entityId }
     ), [collection, entityId]);
 
-    const [selectedTab, setSelectedTab] = useState<string>(selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+    // Track whether the user has explicitly clicked a tab in this component
+    // instance. See EntityEditViewInner for full explanation.
+    const userHasChangedTab = useRef(false);
+
+    const [selectedTab, setSelectedTab] = useState<string>(() => {
+        const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        return val === "edit" ? MAIN_TAB_VALUE : val;
+    });
     useEffect(() => {
-        const target = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        const val = userHasChangedTab.current
+            ? (selectedTabProp ?? MAIN_TAB_VALUE)
+            : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        const target = val === "edit" ? MAIN_TAB_VALUE : val;
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
@@ -223,8 +231,9 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }), [entityId, parentCollectionSlugs, parentEntityIds, path, collection, context, readOnlyFormContext, layout]);
     const pluginActionsTop = useSlot("form.actions.top", formActionTopProps);
 
-    // Detail view config from collection
-    const detailViewConfig = (collection as EntityCollection<M> & { detailView?: EntityDetailViewConfig<M> }).detailView;
+    // Resolve formView.Builder if provided
+    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
 
     // Title resolution
     const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
@@ -334,6 +343,7 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }).filter(Boolean);
 
     const onSideTabClick = useCallback((value: string) => {
+        userHasChangedTab.current = true;
         setSelectedTab(value);
         onTabChange?.({
             path,
@@ -344,43 +354,29 @@ function EntityDetailViewInner<M extends Record<string, unknown>>({
     }, [onTabChange, path, entityId, collection]);
 
     const propertyDetailView = () => {
-        // Allow full override via detailView.Builder
-        if (detailViewConfig?.Builder) {
-            const CustomBuilder = resolveComponentRef(detailViewConfig.Builder);
-            if (CustomBuilder && usedEntity) {
-                return <CustomBuilder
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />;
-            }
+        // formView.Builder replaces the default property display
+        if (FormViewBuilder && usedEntity) {
+            return <ErrorBoundary>
+                <Suspense fallback={<CircularProgressCenter />}>
+                    <FormViewBuilder
+                        collection={collection}
+                        parentCollectionSlugs={parentCollectionSlugs}
+                        parentEntityIds={parentEntityIds}
+                        entity={usedEntity}
+                        modifiedValues={usedEntity?.values}
+                        formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                    />
+                </Suspense>
+            </ErrorBoundary>;
         }
 
-        const HeaderComponent = detailViewConfig?.Header ? resolveComponentRef(detailViewConfig.Header) : null;
-        const FooterComponent = detailViewConfig?.Footer ? resolveComponentRef(detailViewConfig.Footer) : null;
-
         return (
             <>
-                {HeaderComponent && usedEntity && <HeaderComponent
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />}
-
                 {usedEntity && <EntityView
                     entity={usedEntity}
                     collection={collection}
                     path={path}
                 />}
-
-                {FooterComponent && usedEntity && <FooterComponent
-                    collection={collection}
-                    entity={usedEntity}
-                    path={path}
-                    onEditClick={onEditClick ?? (() => {})}
-                />}
             </>
         );
     };

package/src/components/EntityEditView.tsx

@@ -1,4 +1,4 @@
-import type { ComponentRef, EntityCollection, EntityCustomViewParams } from "@rebasepro/types";
+import type { ComponentRef, EntityCollection, EntityCustomViewParams, FormViewConfig } from "@rebasepro/types";
 import type { FormContext } from "../types/fields";
 import type { PluginFormActionProps } from "@rebasepro/types";
 import React, { lazy, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -50,9 +50,8 @@ import { usePermissions } from "@rebasepro/core";
 import { useUrlController } from "../index";
 import { useNavigate } from "react-router-dom";
 
-export const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
-export const JSON_TAB_VALUE = "__json";
-export const HISTORY_TAB_VALUE = "__rebase_history";
+import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/entity_view_constants";
+export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
 
 export type BarActionsParams = {
     values: object,
@@ -225,11 +224,22 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         }
     ), [collection, status, entityId]);
 
-    const [selectedTab, setSelectedTab] = useState<string>(
-        selectedTabProp === "edit" ? MAIN_TAB_VALUE : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE)
-    );
+    // Track whether the user has explicitly clicked a tab in this component
+    // instance. When false, we fall back to defaultSelectedView (which may
+    // resolve asynchronously if the collection loads from the registry after
+    // mount). Once true, selectedTabProp=undefined means the user selected
+    // the form tab, so we must NOT re-apply defaultSelectedView.
+    const userHasChangedTab = useRef(false);
+
+    const [selectedTab, setSelectedTab] = useState<string>(() => {
+        const val = selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE;
+        return val === "edit" ? MAIN_TAB_VALUE : val;
+    });
     useEffect(() => {
-        const target = selectedTabProp === "edit" ? MAIN_TAB_VALUE : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        const val = userHasChangedTab.current
+            ? (selectedTabProp ?? MAIN_TAB_VALUE)
+            : (selectedTabProp ?? defaultSelectedView ?? MAIN_TAB_VALUE);
+        const target = val === "edit" ? MAIN_TAB_VALUE : val;
         if (target !== selectedTab) {
             setSelectedTab(target);
         }
@@ -268,6 +278,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         return {
             entityId,
             disabled: false,
+            readOnly: true,
             openEntityMode: layout,
             status: status,
             values: usedEntity?.values ?? ({} as M),
@@ -402,6 +413,7 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
     }).filter(Boolean);
 
     const onSideTabClick = useCallback((value: string) => {
+        userHasChangedTab.current = true;
         setSelectedTab(value);
         if (status === "existing") {
             onTabChange?.({
@@ -413,6 +425,11 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
         }
     }, [status, onTabChange, path, entityId, collection]);
 
+    // Resolve formView.Builder if provided
+    const formViewConfig = (collection as EntityCollection<M> & { formView?: FormViewConfig<M> }).formView;
+    const FormViewBuilder = formViewConfig?.Builder ? resolveComponentRef<EntityCustomViewParams>(formViewConfig.Builder as ComponentRef<EntityCustomViewParams>) : null;
+    const formViewIncludeActions = formViewConfig?.includeActions !== false;
+
     const entityReadOnlyView = !canEdit && entity ? <div
         className={cls("flex-1 flex flex-row w-full overflow-y-auto justify-center", (canEdit || !mainViewVisible || selectedSecondaryForm) ? "hidden" : "")}>
         <div
@@ -420,52 +437,86 @@ export function EntityEditViewInner<M extends Record<string, unknown>>({
             <Typography className={"mt-16 mb-8 mx-8"} variant={"h4"}>
                 {collection.singularName ?? collection.name}
             </Typography>
-            <EntityView
-                className={"px-8 h-full overflow-auto"}
-                entity={entity}
-                path={path}
-                collection={collection} />
+            {FormViewBuilder && readOnlyFormContext ? (
+                <ErrorBoundary>
+                    <Suspense fallback={<CircularProgressCenter />}>
+                        <FormViewBuilder
+                            collection={collection}
+                            parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                            entity={usedEntity}
+                            modifiedValues={usedEntity?.values}
+                            formContext={readOnlyFormContext as FormContext<Record<string, unknown>>}
+                        />
+                    </Suspense>
+                </ErrorBoundary>
+            ) : (
+                <EntityView
+                    className={"px-8 h-full overflow-auto"}
+                    entity={entity}
+                    path={path}
+                    collection={collection} />
+            )}
             <div className="h-16" />
         </div>
     </div> : null;
 
-    const entityView = <EntityForm<M>
-        collection={collection}
-        path={path}
-        entityId={entityId ?? usedEntity?.id}
-        onValuesModified={onValuesModified}
-        entity={entity}
-        initialDirtyValues={initialDirtyValues}
-        openEntityMode={layout}
-        forceActionsAtTheBottom={actionsAtTheBottom}
-        initialStatus={status}
-        className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
-        EntityFormActionsComponent={EntityEditViewFormActions}
-        disabled={!canEdit}
-        navigateBack={navigateBack}
-        {...formProps}
-        onEntityChange={(entity) => {
-            setUsedEntity(entity);
-            formProps?.onEntityChange?.(entity);
-        }}
-        onStatusChange={(status) => {
-            setStatus(status);
-            formProps?.onStatusChange?.(status);
-        }}
-        onFormContextReady={(formContext) => {
-            setFormContext(formContext);
-            formProps?.onFormContextReady?.(formContext);
-        }}
-        onSaved={(params) => {
-            const res = {
-                ...params,
-                selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
-            };
-            onSaved?.(res);
-            formProps?.onSaved?.(res);
-        }}
-        Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
-    />;
+    const entityView = FormViewBuilder ? (
+        // formView.Builder replaces the default form
+        <div className={cls(
+            "relative flex-1 w-full h-full overflow-auto",
+            (!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : ""
+        )}>
+            <ErrorBoundary>
+                <Suspense fallback={<CircularProgressCenter />}>
+                    {(formContext ?? readOnlyFormContext) && <FormViewBuilder
+                        collection={collection}
+                        parentCollectionSlugs={parentCollectionSlugs} parentEntityIds={parentEntityIds}
+                        entity={usedEntity}
+                        modifiedValues={(formContext ?? readOnlyFormContext)?.formex?.values ?? usedEntity?.values}
+                        formContext={(formContext ?? readOnlyFormContext) as FormContext<Record<string, unknown>>}
+                    />}
+                </Suspense>
+            </ErrorBoundary>
+        </div>
+    ) : (
+        <EntityForm<M>
+            collection={collection}
+            path={path}
+            entityId={entityId ?? usedEntity?.id}
+            onValuesModified={onValuesModified}
+            entity={entity}
+            initialDirtyValues={initialDirtyValues}
+            openEntityMode={layout}
+            forceActionsAtTheBottom={actionsAtTheBottom}
+            initialStatus={status}
+            className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
+            EntityFormActionsComponent={EntityEditViewFormActions}
+            disabled={!canEdit}
+            navigateBack={navigateBack}
+            {...formProps}
+            onEntityChange={(entity) => {
+                setUsedEntity(entity);
+                formProps?.onEntityChange?.(entity);
+            }}
+            onStatusChange={(status) => {
+                setStatus(status);
+                formProps?.onStatusChange?.(status);
+            }}
+            onFormContextReady={(formContext) => {
+                setFormContext(formContext);
+                formProps?.onFormContextReady?.(formContext);
+            }}
+            onSaved={(params) => {
+                const res = {
+                    ...params,
+                    selectedTab: MAIN_TAB_VALUE === selectedTab ? undefined : selectedTab
+                };
+                onSaved?.(res);
+                formProps?.onSaved?.(res);
+            }}
+            Builder={resolveComponentRef(selectedSecondaryForm?.Builder as ComponentRef<EntityCustomViewParams<M>> | undefined) as React.ComponentType<EntityCustomViewParams<M>> | undefined}
+        />
+    );
 
     const subcollectionTabs = subcollections && subcollections.map((subcollection) => {
         const icon = getIcon(subcollection.icon, undefined, undefined, "small");

package/src/components/EntityEditViewFormActions.tsx

@@ -162,7 +162,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
         }
 
         {formActions.length > 0 && <div className="grow flex overflow-auto no-scrollbar">
-            {formActions.map(action => {
+            {formActions.map((action, index) => {
 
                 const props = {
                     view: "form",
@@ -179,7 +179,7 @@ function buildBottomActions<M extends Record<string, unknown>>({
                 const isEnabled = !action.isEnabled || action.isEnabled(props);
                 return (
                     <EntityActionButton
-                        key={action.key}
+                        key={action.key ?? action.name ?? index}
                         action={action}
                         enabled={isEnabled}
                         props={props}
@@ -282,7 +282,7 @@ function buildSideActions<M extends Record<string, unknown>>({
         {pluginActions}
 
         {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
-            {formActions.map(action => {
+            {formActions.map((action, index) => {
                 const props = {
                     view: "form",
                     entity,
@@ -296,7 +296,7 @@ function buildSideActions<M extends Record<string, unknown>>({
                 } satisfies EntityActionClickProps<any>;
                 const isEnabled = !action.isEnabled || action.isEnabled(props);
                 return (
-                    <EntityActionButton key={action.key} action={action} enabled={isEnabled} props={props}/>
+                    <EntityActionButton key={action.key ?? action.name ?? index} action={action} enabled={isEnabled} props={props}/>
                 );
             })}
         </div>}

package/src/components/EntitySidePanel.tsx

@@ -1,6 +1,6 @@
 import type { EntityCollection } from "@rebasepro/types";
 import type { EntitySidePanelProps } from "@rebasepro/types";
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { ErrorBoundary } from "@rebasepro/ui";
@@ -8,11 +8,11 @@ import { IconButton, Maximize2Icon, XIcon } from "@rebasepro/ui";
 import { EntityEditView } from "./EntityEditView";
 import { EntityDetailView } from "./EntityDetailView";
 import { useSideDialogContext } from "./SideDialogs";
-import { useLocation, useNavigate } from "react-router-dom";
-import { removeInitialAndTrailingSlashes } from "@rebasepro/common";
+import { useNavigate } from "react-router-dom";
 import { saveEntityToMemoryCache } from "@rebasepro/core";
 import { useCollectionRegistryController, useSideEntityController } from "../index";
 import { useUrlController } from "../index";
+import { resolveDefaultSelectedView } from "@rebasepro/common";
 
 /**
  * This is the component in charge of rendering the side dialog used
@@ -40,7 +40,6 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
     } = useSideDialogContext();
 
     const navigate = useNavigate();
-    const location = useLocation();
 
     const sideEntityController = useSideEntityController();
     const collectionRegistryController = useCollectionRegistryController();
@@ -96,6 +95,37 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
         setShowEditInPanel(selectedTab === "edit");
     }, [entityId, selectedTab]);
 
+    // One-time correction: when the side panel opens without the correct
+    // selectedTab but the resolved collection (from the registry) has a
+    // defaultSelectedView, update the panel width and URL to match.
+    // This handles cases where defaultSelectedView is set via the collection
+    // editor / Studio and is not available on the collection object the
+    // caller passed to sideEntityController.open().
+    const hasCorrectedDefaultView = useRef(false);
+    useEffect(() => {
+        hasCorrectedDefaultView.current = false;
+    }, [entityId]);
+    useEffect(() => {
+        if (hasCorrectedDefaultView.current) return;
+        if (selectedTab) return; // Already has a tab — no correction needed
+        if (!entityId || !collection?.defaultSelectedView) return;
+
+        const effectiveDefault = resolveDefaultSelectedView(
+            collection.defaultSelectedView,
+            { status: "existing", entityId }
+        );
+        if (effectiveDefault && effectiveDefault !== "edit") {
+            hasCorrectedDefaultView.current = true;
+            sideEntityController.replace({
+                path,
+                entityId,
+                selectedTab: effectiveDefault,
+                updateUrl: collection.openEntityMode !== "dialog",
+                collection
+            });
+        }
+    }, [selectedTab, entityId, collection, path, sideEntityController]);
+
     // Note: beforeunload is handled by useUnsavedChangesDialog in SideDialogView,
     // which listens to the same `blocked` state via SideDialogContext.
 
@@ -153,10 +183,13 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 return;
                             }
                             if (tabEntityId) {
-                                const collectionPath = removeInitialAndTrailingSlashes(path);
-                                const tabSuffix = selectedTab ? "/" + selectedTab : "";
-                                const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${tabEntityId}${tabSuffix}#side`);
-                                navigate(fullUrl, { replace: true, state: location.state });
+                                sideEntityController.replace({
+                                    path,
+                                    entityId: tabEntityId,
+                                    selectedTab,
+                                    updateUrl: true,
+                                    collection: paramCollection ?? collection
+                                });
                             }
                         }}
                     />
@@ -198,18 +231,21 @@ export function EntitySidePanel(props: EntitySidePanelProps) {
                                 </IconButton>}
                             </div>}
                         onTabChange={({
-                            entityId,
+                            entityId: tabEntityId,
                             selectedTab,
                             collection: paramCollection
                         }) => {
                             if (collection?.openEntityMode === "dialog" || paramCollection?.openEntityMode === "dialog") {
                                 return;
                             }
-                            if (entityId) {
-                                const collectionPath = removeInitialAndTrailingSlashes(path);
-                                const tabSuffix = selectedTab ? "/" + selectedTab : "";
-                                const fullUrl = urlController.buildUrlCollectionPath(`${collectionPath}/${entityId}${tabSuffix}#side`);
-                                navigate(fullUrl, { replace: true, state: location.state });
+                            if (tabEntityId) {
+                                sideEntityController.replace({
+                                    path,
+                                    entityId: tabEntityId,
+                                    selectedTab,
+                                    updateUrl: true,
+                                    collection: paramCollection ?? collection
+                                });
                             }
                         }}
                         formProps={formProps}

package/src/components/PropertyCollectionView.tsx

@@ -258,6 +258,7 @@ export const PropertyCollectionView = ({
                 <div className={baseKey ? `pl-4 mt-1 border-l ${defaultBorderMixin}` : ""}>
                     {Object.entries(data).map(([key, value]) => {
                         if (value === null || value === undefined) return null;
+                        if (baseKey === "" && !properties[key]) return null;
                         const currentKey = baseKey ? `${baseKey}.${key}` : key;
                         return (
                             <PropertyCollectionView

package/src/components/RebaseRouteDefs.tsx

@@ -5,13 +5,12 @@ import {
     RebaseRoutes,
     UserSettingsView,
     UIReferenceView,
-    NotFoundPage,
-    useInternalUserManagementController
+    NotFoundPage
 } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
 import { ContentHomePage } from "./HomePage/ContentHomePage";
-import { RolesView } from "./admin/RolesView";
+
 import { RebaseRoute } from "../routes/RebaseRoute";
 import { CustomViewRoute } from "../routes/CustomViewRoute";
 import { useNavigationStateController } from "../hooks/navigation/contexts/NavigationStateContext";
@@ -48,7 +47,7 @@ export interface RebaseRouteDefsProps {
  * Route definitions for the CMS.
  *
  * Defines all standard routes: home, studio home, collection view,
- * settings, users, roles, debug, custom views, and a catch-all 404.
+ * settings, debug, custom views, and a catch-all 404.
  *
  * **Independently usable**: Use this when you want Rebase routes
  * inside your own layout/navigation setup.
@@ -64,7 +63,6 @@ export interface RebaseRouteDefsProps {
  */
 export function RebaseRouteDefs({ children, layout }: RebaseRouteDefsProps) {
     const registry = useRebaseRegistry();
-    const userManagement = useInternalUserManagementController();
     const navigationStateController = useNavigationStateController();
 
     const cmsHomePage = registry.cmsConfig?.homePage ?? <Suspense fallback={<CircularProgressCenter/>}><ContentHomePage/></Suspense>;
@@ -85,7 +83,7 @@ export function RebaseRouteDefs({ children, layout }: RebaseRouteDefsProps) {
 
             <Route path={"/c/*"} element={<RebaseRoute/>}/>
             <Route path={"/settings"} element={<SettingsView/>}/>
-            {userManagement && <Route path={"/roles"} element={<RolesView userManagement={userManagement}/>}/>}
+
 
             {/* Hidden debug route */}
             <Route path={"/debug/ui"} element={<UIReferenceView/>}/>