@rebasepro/admin 0.0.1-canary.4f204c2

package/src/components/history/EntityHistoryView.tsx

@@ -0,0 +1,191 @@
+
+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 { EntityHistoryEntry } from "./EntityHistoryEntry";
+import { useSnackbarController, useAuthController } from "@rebasepro/core";
+import { ConfirmationDialog } from "@rebasepro/core";
+import { ErrorBoundary } from "@rebasepro/ui";
+import { useState } from "react";
+import { useEntityHistory } from "../../index";
+
+/**
+ * Entity history tab view. Shows a paginated list of entity revisions
+ * fetched from the backend API. Supports infinite scroll and revert.
+ */
+export function EntityHistoryView<M extends Record<string, unknown>>({
+    entity,
+    collection,
+    formContext
+}: EntityCustomViewParams<M>) {
+
+    const snackbarController = useSnackbarController();
+    const authController = useAuthController();
+    const dirty = formContext?.formex.dirty;
+
+    const slug = collection.slug;
+    const entityId = entity?.id;
+
+    const {
+        entries,
+        isLoading,
+        hasMore,
+        loadMore,
+        revert
+    } = useEntityHistory({
+        slug,
+        entityId,
+        enabled: !!entityId,
+        pageSize: 10
+    });
+
+    const [revertHistoryId, setRevertHistoryId] = useState<string | undefined>();
+    const [isReverting, setIsReverting] = useState(false);
+
+    const containerRef = useRef<HTMLDivElement>(null);
+    const loadMoreRef = useRef<HTMLDivElement>(null);
+
+    // Intersection observer for infinite scroll
+    useEffect(() => {
+        const currentContainer = containerRef.current;
+        const currentLoadMore = loadMoreRef.current;
+
+        if (!currentContainer || !currentLoadMore || !hasMore || isLoading) return;
+
+        const observer = new IntersectionObserver(
+            (observerEntries) => {
+                if (observerEntries[0].isIntersecting && hasMore && !isLoading) {
+                    loadMore();
+                }
+            },
+            {
+                root: currentContainer,
+                rootMargin: "0px 0px 200px 0px",
+                threshold: 0.01
+            }
+        );
+
+        observer.observe(currentLoadMore);
+
+        return () => observer.disconnect();
+    }, [hasMore, isLoading, entries.length, loadMore]);
+
+    if (!entity) {
+        return <div className="flex items-center justify-center h-full">
+            <Label>HistoryIcon is only available for existing entities</Label>
+        </div>;
+    }
+
+    async function doRevert(historyId: string) {
+        setIsReverting(true);
+        try {
+            await revert(historyId);
+            setRevertHistoryId(undefined);
+            snackbarController.open({
+                message: "Reverted to selected version",
+                type: "info"
+            });
+        } catch (error) {
+            console.error("Error reverting entity:", error);
+            snackbarController.open({
+                message: "Error reverting entity",
+                type: "error"
+            });
+        } finally {
+            setIsReverting(false);
+        }
+    }
+
+    const revertEntry = revertHistoryId
+        ? entries.find(e => e.id === revertHistoryId)
+        : undefined;
+
+    return <div
+        ref={containerRef}
+        className={cls("relative flex-1 h-full overflow-auto w-full flex flex-col gap-4 p-8")}>
+        <div className="flex flex-col gap-2 max-w-6xl mx-auto w-full">
+
+            <Typography variant={"h5"} className={"mt-24 ml-4"}>
+                HistoryIcon
+            </Typography>
+
+            {isLoading && entries.length === 0 && (
+                <div className="flex flex-col gap-4 mt-8 ml-4">
+                    {[1, 2, 3].map(i => (
+                        <div key={i} className="flex flex-col gap-2 animate-pulse">
+                            <div className="h-4 w-48 bg-surface-200 dark:bg-surface-700 rounded"/>
+                            <div className="h-12 w-full bg-surface-100 dark:bg-surface-900 rounded-lg border border-surface-200 dark:border-surface-700"/>
+                        </div>
+                    ))}
+                </div>
+            )}
+
+            {!isLoading && entries.length === 0 && <>
+                <Label className={"ml-4 mt-8"}>
+                    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.
+                </Typography>
+            </>}
+
+            {entries.map((entry) => (
+                <div key={entry.id} className="flex flex-cols gap-2 w-full">
+                    <EntityHistoryEntry
+                        entry={entry}
+                        collection={collection}
+                        size={"medium"}
+                        actions={
+                            <Tooltip title={"Revert to this version"}
+                                className={"m-2 grow-0 self-start"}>
+                                <IconButton
+                                    onClick={() => {
+                                        if (dirty) {
+                                            snackbarController.open({
+                                                message: "Please save or discard your changes before reverting",
+                                                type: "warning"
+                                            });
+                                        } else {
+                                            setRevertHistoryId(entry.id);
+                                        }
+                                    }}>
+                                    <HistoryIcon/>
+                                </IconButton>
+                            </Tooltip>
+                        }
+                    />
+                </div>
+            ))}
+
+            {/* Load more sentinel */}
+            {entries.length > 0 && (
+                <div ref={loadMoreRef} className="py-4 text-center">
+                    {isLoading && <Label>Loading more...</Label>}
+                    {!hasMore && entries.length > 10 && <Label>No more history available</Label>}
+                </div>
+            )}
+        </div>
+
+        <ErrorBoundary>
+            <ConfirmationDialog
+                open={Boolean(revertHistoryId)}
+                onAccept={() => {
+                    if (revertHistoryId) doRevert(revertHistoryId);
+                }}
+                onCancel={() => setRevertHistoryId(undefined)}
+                title={<Typography variant={"subtitle2"}>Revert data to this version?</Typography>}
+                body={revertEntry
+                    ? <div className="p-4">
+                        <Typography variant={"caption"} color={"secondary"}>
+                            This will save the entity with the values from{" "}
+                            {new Date(revertEntry.updated_at).toLocaleString()}.
+                            A new history entry will be created for the revert.
+                        </Typography>
+                    </div>
+                    : null
+                }
+            />
+        </ErrorBoundary>
+    </div>;
+}

package/src/components/history/LastEditedByFormAction.tsx

@@ -0,0 +1,24 @@
+import type { PluginFormActionProps } from "@rebasepro/types";
+import React from "react";
+;
+import { LastEditedByIndicator } from "./LastEditedByIndicator";
+
+/**
+ * Renders the "last edited by" indicator in the entity form top bar.
+ * Used as a plugin `form.ActionsTop` component.
+ */
+export function LastEditedByFormAction({
+    entityId,
+    path,
+    status,
+    collection
+}: PluginFormActionProps) {
+    if (status === "new" || status === "copy" || !entityId) return null;
+    if (!collection.history) return null;
+
+    return <LastEditedByIndicator
+        path={path}
+        entityId={entityId.toString()}
+        collection={collection}
+    />;
+}

package/src/components/history/LastEditedByIndicator.tsx

@@ -0,0 +1,98 @@
+import type { EntityCollection } from "@rebasepro/types";
+import React, { useEffect, useState, useCallback } from "react";
+;
+import { useApiConfig } from "@rebasepro/core";
+import { useAuthController } from "@rebasepro/core";
+import { HistoryEntryData } from "../../hooks";
+
+function getRelativeTimeString(date: Date): string {
+    const now = new Date();
+    const diffMs = now.getTime() - date.getTime();
+    const diffSeconds = Math.floor(diffMs / 1000);
+    const diffMinutes = Math.floor(diffSeconds / 60);
+    const diffHours = Math.floor(diffMinutes / 60);
+    const diffDays = Math.floor(diffHours / 24);
+
+    if (diffSeconds < 60) return "just now";
+    if (diffMinutes < 60) return `${diffMinutes}m ago`;
+    if (diffHours < 24) return `${diffHours}h ago`;
+    if (diffDays < 30) return `${diffDays}d ago`;
+    return date.toLocaleDateString();
+}
+
+/**
+ * Fetches the latest history entry from the backend API and displays
+ * who last edited the entity and when.
+ */
+export function LastEditedByIndicator({
+    path,
+    entityId,
+    collection
+}: {
+    path: string;
+    entityId: string;
+    collection: EntityCollection;
+}) {
+    const apiConfig = useApiConfig();
+    const authController = useAuthController();
+    const [latestEntry, setLatestEntry] = useState<HistoryEntryData | undefined>();
+
+    const fetchLatest = useCallback(async () => {
+        if (!apiConfig?.apiUrl || !entityId || !collection.slug) return;
+
+        try {
+            const token = await apiConfig.getAuthToken?.();
+            const headers: Record<string, string> = {};
+            if (token) headers["Authorization"] = `Bearer ${token}`;
+
+            const url = `${apiConfig.apiUrl}/api/data/${collection.slug}/${entityId}/history?limit=1&offset=0`;
+            const response = await fetch(url, { headers });
+
+            if (response.ok) {
+                const result = await response.json();
+                if (result.data && result.data.length > 0) {
+                    setLatestEntry(result.data[0]);
+                }
+            }
+        } catch (error) {
+            // Silently fail — this is a non-critical UI indicator
+            console.debug("Failed to fetch latest history entry:", error);
+        }
+    }, [apiConfig, entityId, collection.slug]);
+
+    useEffect(() => {
+        fetchLatest();
+    }, [fetchLatest]);
+
+    if (!latestEntry) return null;
+
+    const uid = latestEntry.updated_by;
+    const date = new Date(latestEntry.updated_at);
+    const timeString = getRelativeTimeString(date);
+
+    // Try to match the current user
+    const currentUser = authController.user;
+    const displayName = uid === currentUser?.uid
+        ? currentUser?.displayName ?? currentUser?.email ?? uid
+        : uid;
+    const photoURL = uid === currentUser?.uid ? currentUser?.photoURL : undefined;
+
+    return (
+        <div className="flex items-center gap-2 text-xs text-text-secondary dark:text-text-secondary-dark">
+            {photoURL ? (
+                <img
+                    src={photoURL}
+                    alt={displayName ?? "User"}
+                    className="rounded-full object-cover w-6 h-6"
+                />
+            ) : (
+                <div className="rounded-full bg-primary/10 dark:bg-primary-dark/20 flex items-center justify-center text-primary dark:text-primary-dark font-medium w-6 h-6 text-xs">
+                    {(displayName ?? "?").charAt(0).toUpperCase()}
+                </div>
+            )}
+            <span>
+                {displayName}{timeString ? ` · ${timeString}` : ""}
+            </span>
+        </div>
+    );
+}

package/src/components/history/UserChip.tsx

@@ -0,0 +1,15 @@
+import { User } from "@rebasepro/types";
+import { Chip, Tooltip } from "@rebasepro/ui";
+
+export function UserChip({ user }: { user: User }) {
+    return (
+        <Tooltip title={user.email ?? user.uid}>
+            <Chip size={"small"} className={"flex items-center"}>
+                {user.photoURL && <img
+                    className={"rounded-full w-6 h-6 mr-2"}
+                    src={user.photoURL} alt={user.displayName ?? "User picture"}/>}
+                <span>{user.displayName ?? user.email ?? user.uid}</span>
+            </Chip>
+        </Tooltip>
+    );
+}

package/src/components/history/index.tsx

@@ -0,0 +1,5 @@
+export { EntityHistoryView } from "./EntityHistoryView";
+export { EntityHistoryEntry } from "./EntityHistoryEntry";
+export { LastEditedByIndicator } from "./LastEditedByIndicator";
+export { LastEditedByFormAction } from "./LastEditedByFormAction";
+export { UserChip } from "./UserChip";

package/src/components/index.ts

@@ -0,0 +1,55 @@
+export type { EntityViewProps } from "./EntityView";
+export { EntityView } from "./EntityView";
+
+export type { EntitySelectionProps } from "./ReferenceTable/EntitySelectionTable";
+export { EntitySelectionTable } from "./ReferenceTable/EntitySelectionTable";
+
+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 "./PropertyConfigBadge";
+export * from "./PropertyIdCopyTooltip";
+
+export * from "./EntityCollectionTable";
+// VirtualTable is exported from @rebasepro/ui
+export * from "./ArrayContainer";
+export * from "./ReferenceWidget";
+export * from "./SearchIconsView";
+export * from "./FieldCaption";
+export * from "./EntityPreview";
+
+// history is lazy-loaded by EntityEditView and resolutions.ts
+// export * from "./history";
+export * from "./common";
+export * from "./field_configs";
+
+export * from "./SideEntityProvider";
+export * from "./AdminModeSyncer";
+// Admin views are lazy-loaded by RebaseRouteDefs and useResolvedViews
+// export * from "./admin/RolesView";
+// export * from "./admin/UsersView";
+export * from "./app/AppBar";
+export * from "./app/Drawer";
+export * from "./app/Scaffold";
+export * from "./DefaultAppBar";
+export * from "./DefaultDrawer";
+export * from "./DrawerNavigationItem";
+export * from "./DrawerNavigationGroup";
+// ContentHomePage is lazy-loaded by RebaseRouteDefs
+// export * from "./HomePage/ContentHomePage";
+export * from "./SideDialogs";
+
+export * from "./app/useApp";
+export * from "./RebaseCMS";
+export * from "./RebaseShell";
+
+// Composable shell layers — each independently usable
+export * from "./RebaseAuthGate";
+export * from "./RebaseNavigation";
+export * from "./RebaseLayout";
+export * from "./RebaseRouteDefs";

package/src/contexts/BreacrumbsContext.tsx

@@ -0,0 +1,53 @@
+import React, { useCallback, useMemo, useState } from "react";
+import { BreadcrumbEntry, BreadcrumbsController } from "../hooks/useBreadcrumbsController";
+
+const DEFAULT_BREADCRUMBS_CONTROLLER: BreadcrumbsController = {
+    breadcrumbs: [],
+    set: () => {
+    },
+    updateCount: () => {
+    }
+};
+
+export const BreadcrumbContext = React.createContext<BreadcrumbsController>(DEFAULT_BREADCRUMBS_CONTROLLER);
+
+interface BreadcrumbsProviderProps {
+    children: React.ReactNode;
+}
+
+export const BreadcrumbsProvider: React.FC<BreadcrumbsProviderProps> = ({ children }) => {
+
+    const [breadcrumbs, setBreadcrumbs] = useState<BreadcrumbEntry[]>([]);
+
+    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,
+count: prevEntry.count };
+            }
+            return newEntry;
+        }));
+    }, []);
+
+    const updateCount = useCallback((id: string, count: number | null | undefined) => {
+        setBreadcrumbs(prev => prev.map(entry =>
+            entry.id === id ? { ...entry,
+count } : entry
+        ));
+    }, []);
+
+    const value = useMemo(() => ({
+        breadcrumbs,
+        set,
+        updateCount
+    }), [breadcrumbs, set, updateCount]);
+
+    return (
+        <BreadcrumbContext.Provider value={value}>
+            {children}
+        </BreadcrumbContext.Provider>
+    );
+};

package/src/contexts/SideDialogsControllerContext.tsx

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

package/src/contexts/SideEntityControllerContext.tsx

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

package/src/data_export/export/BasicExportAction.tsx

@@ -0,0 +1,143 @@
+
+import React, { useCallback } from "react";
+
+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 { downloadEntitiesExport } from "./export";
+
+export type BasicExportActionProps = {
+    data: Entity<any>[];
+    properties: Properties;
+    propertiesOrder?: string[];
+}
+
+export function BasicExportAction({
+    data,
+    properties,
+    propertiesOrder
+}: BasicExportActionProps) {
+
+    const dateRef = React.useRef<Date>(new Date());
+    const [flattenArrays, setFlattenArrays] = React.useState<boolean>(true);
+    const [exportType, setExportType] = React.useState<"csv" | "json">("csv");
+    const [dateExportType, setDateExportType] = React.useState<"timestamp" | "string">("string");
+
+    const [open, setOpen] = React.useState(false);
+
+    const handleClickOpen = useCallback(() => {
+        setOpen(true);
+    }, [setOpen]);
+
+    const handleClose = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+
+    const onOkClicked = useCallback(() => {
+        downloadEntitiesExport({
+            data,
+            additionalData: [],
+            properties,
+            propertiesOrder,
+            name: "export.csv",
+            flattenArrays,
+            additionalHeaders: [],
+            exportType,
+            dateExportType
+        });
+        handleClose();
+    }, []);
+
+    return <>
+
+        <Tooltip title={"Export"}
+            asChild={true}>
+            <IconButton
+                size={"small"}
+                color={"primary"} onClick={handleClickOpen}>
+                <DownloadIcon
+                    size={"small"}/>
+            </IconButton>
+        </Tooltip>
+
+        <Dialog
+            open={open}
+            onOpenChange={setOpen}
+            maxWidth={"xl"}>
+
+            <DialogTitle variant={"h6"}>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 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>
+                    </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>
+                    </div>
+                </div>
+
+                <BooleanSwitchWithLabel
+                    size={"small"}
+                    disabled={exportType !== "csv"}
+                    value={flattenArrays}
+                    onValueChange={setFlattenArrays}
+                    label={"Flatten arrays"}/>
+
+            </DialogContent>
+
+            <DialogActions>
+
+                <Button onClick={handleClose}
+                    variant={"text"}>
+                    Cancel
+                </Button>
+
+                <Button onClick={onOkClicked}>
+                    DownloadIcon
+                </Button>
+
+            </DialogActions>
+
+        </Dialog>
+
+    </>;
+}