@powerhousedao/contributor-billing 0.1.31 → 0.1.33

package/dist/editors/builder-team-admin/components/expense-reports.js

@@ -0,0 +1,118 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileItem } from "@powerhousedao/design-system/connect";
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import { isFolderNodeKind, isFileNodeKind, addFolder, setSelectedNode, useSelectedNodePath, useNodesInSelectedDriveOrFolder, useSelectedDriveId, useUserPermissions, } from "@powerhousedao/reactor-browser";
+import { useEffect, useRef, useState, Fragment } from "react";
+import { Plus } from "lucide-react";
+import { ExpenseReportsStats } from "./ExpenseReportsStats.js";
+import { useExpenseReportAutoPlacement } from "../hooks/useExpenseReportAutoPlacement.js";
+/**
+ * Simple inline input for creating new folders.
+ */
+function FolderNameInput({ onSubmit, onCancel, }) {
+    const [value, setValue] = useState("New Folder");
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (value.trim()) {
+                onSubmit(value.trim());
+            }
+        }
+        else if (e.key === "Escape") {
+            onCancel();
+        }
+    };
+    return (_jsx("input", { ref: inputRef, type: "text", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => {
+            if (value.trim()) {
+                onSubmit(value.trim());
+            }
+            else {
+                onCancel();
+            }
+        }, className: "text-gray-800 bg-transparent border-b border-gray-400 outline-none px-1 py-0.5 text-sm min-w-[100px]", placeholder: "New Folder" }));
+}
+/**
+ * Custom breadcrumbs component that treats "Expense Reports" folder as the root.
+ * Only shows path from "Expense Reports" folder onwards.
+ * Includes folder creation functionality.
+ */
+function ExpenseReportsBreadcrumbs({ rootFolderId }) {
+    const selectedNodePath = useSelectedNodePath();
+    const selectedDriveId = useSelectedDriveId();
+    const { isAllowedToCreateDocuments } = useUserPermissions();
+    const [isCreating, setIsCreating] = useState(false);
+    // Find the index of the root folder in the path
+    const rootIndex = selectedNodePath.findIndex((node) => node.id === rootFolderId);
+    // Get the path starting from (and including) the root folder
+    const visiblePath = rootIndex >= 0 ? selectedNodePath.slice(rootIndex) : selectedNodePath;
+    const handleAddNew = () => {
+        setIsCreating(true);
+    };
+    const handleSubmit = (name) => {
+        if (!isAllowedToCreateDocuments || !selectedDriveId)
+            return;
+        const parentFolderId = selectedNodePath.at(-1)?.id;
+        addFolder(selectedDriveId, name, parentFolderId)
+            .then((node) => {
+            if (node) {
+                setSelectedNode(node);
+            }
+        })
+            .catch((error) => {
+            console.error(error);
+        })
+            .finally(() => {
+            setIsCreating(false);
+        });
+    };
+    const handleCancel = () => {
+        setIsCreating(false);
+    };
+    return (_jsxs("div", { className: "flex h-9 flex-row items-center gap-2 text-gray-500 border-b border-gray-200 pb-3", children: [visiblePath.map((node) => (_jsxs(Fragment, { children: [_jsx("div", { className: "transition-colors last-of-type:text-gray-800 hover:text-gray-800 cursor-pointer", onClick: () => setSelectedNode(node.id), role: "button", children: node.name }), _jsx("span", { children: "/" })] }, node.id))), isAllowedToCreateDocuments &&
+                (isCreating ? (_jsx(FolderNameInput, { onSubmit: handleSubmit, onCancel: handleCancel })) : (_jsxs("button", { type: "button", className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 transition-colors hover:bg-gray-200 hover:text-gray-800", onClick: handleAddNew, children: [_jsx(Plus, { size: 14 }), "Add new"] })))] }));
+}
+export function ExpenseReports() {
+    const hasNavigatedToFolder = useRef(false);
+    const selectedNodePath = useSelectedNodePath();
+    const nodesInCurrentFolder = useNodesInSelectedDriveOrFolder();
+    // Use the shared auto-placement hook - this handles:
+    // 1. Creating the "Expense Reports" folder if it doesn't exist
+    // 2. Moving expense reports dropped anywhere into the proper folder
+    // 3. Organizing expense reports into year-based subfolders
+    const { expenseReportsFolder, expenseReportDocuments } = useExpenseReportAutoPlacement();
+    // Navigate to the folder when it exists (only once on mount)
+    useEffect(() => {
+        if (expenseReportsFolder && !hasNavigatedToFolder.current) {
+            hasNavigatedToFolder.current = true;
+            setSelectedNode(expenseReportsFolder.id);
+        }
+    }, [expenseReportsFolder]);
+    // Check if we're currently within the Expense Reports folder tree
+    const isWithinExpenseReports = expenseReportsFolder &&
+        selectedNodePath.some((node) => node.id === expenseReportsFolder.id);
+    // If user navigated outside Expense Reports folder, bring them back
+    useEffect(() => {
+        if (expenseReportsFolder &&
+            !isWithinExpenseReports &&
+            hasNavigatedToFolder.current) {
+            setSelectedNode(expenseReportsFolder.id);
+        }
+    }, [expenseReportsFolder, isWithinExpenseReports]);
+    // Show loading state while folder is being created
+    if (!expenseReportsFolder) {
+        return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", children: "Setting up Expense Reports folder..." }) }));
+    }
+    // Get folder and file nodes from current selection
+    const folderNodes = nodesInCurrentFolder.filter((n) => isFolderNodeKind(n));
+    const fileNodes = nodesInCurrentFolder.filter((n) => isFileNodeKind(n));
+    const hasFolders = folderNodes.length > 0;
+    const hasFiles = fileNodes.length > 0;
+    const isEmpty = !hasFolders && !hasFiles;
+    const hasExpenseReports = expenseReportDocuments.length > 0;
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-2xl font-bold text-center mb-4", children: "Expense Reports" }), _jsxs("div", { className: "space-y-6 px-6", children: [hasExpenseReports && (_jsx(ExpenseReportsStats, { expenseReportDocuments: expenseReportDocuments })), _jsx(ExpenseReportsBreadcrumbs, { rootFolderId: expenseReportsFolder.id }), hasFolders && (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-gray-600", children: "Folders" }), _jsx("div", { className: "flex flex-wrap gap-4", children: folderNodes.map((folderNode) => (_jsx(FolderItem, { folderNode: folderNode }, folderNode.id))) })] })), hasFiles && (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-600", children: "Documents" }), _jsx("div", { className: "flex flex-wrap gap-4", children: fileNodes.map((fileNode) => (_jsx(FileItem, { fileNode: fileNode }, fileNode.id))) })] })), isEmpty && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "text-gray-400 mb-2", children: _jsx("svg", { className: "w-16 h-16 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }), _jsx("p", { className: "text-gray-500 text-sm", children: "No expense reports yet. Add documents to this folder to get started." })] }))] })] }));
+}

package/dist/editors/builder-team-admin/components/overview/ProfileHeader.d.ts

@@ -0,0 +1,10 @@
+import type { BuilderProfileDocument } from "@powerhousedao/builder-profile/document-models/builder-profile";
+type ProfileHeaderProps = {
+    builderProfileDoc: BuilderProfileDocument | null;
+};
+/**
+ * Hero section displaying the builder team profile with avatar and name.
+ */
+export declare function ProfileHeader({ builderProfileDoc }: ProfileHeaderProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=ProfileHeader.d.ts.map

package/dist/editors/builder-team-admin/components/overview/ProfileHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProfileHeader.d.ts","sourceRoot":"","sources":["../../../../../editors/builder-team-admin/components/overview/ProfileHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,gEAAgE,CAAC;AAE7G,KAAK,kBAAkB,GAAG;IACxB,iBAAiB,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAClD,CAAC;AAEF;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAAE,iBAAiB,EAAE,EAAE,kBAAkB,kDAuDtE"}

package/dist/editors/builder-team-admin/components/overview/ProfileHeader.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Hero section displaying the builder team profile with avatar and name.
+ */
+export function ProfileHeader({ builderProfileDoc }) {
+    if (!builderProfileDoc) {
+        return null;
+    }
+    const { name, icon, slug } = builderProfileDoc.state.global;
+    const displayName = name || "Unnamed Team";
+    const initials = displayName
+        .split(" ")
+        .map((word) => word[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+    return (_jsx("div", { className: "overflow-hidden rounded-2xl bg-gradient-to-br from-slate-50 via-indigo-50/40 to-blue-50/30 p-8 border border-slate-200/60", children: _jsxs("div", { className: "flex items-center gap-6", children: [_jsxs("div", { className: "relative", children: [icon ? (_jsx("img", { src: icon, alt: displayName, className: "h-20 w-20 rounded-2xl object-cover shadow-lg shadow-slate-300/50 ring-4 ring-white/80", onError: (e) => {
+                                e.currentTarget.style.display = "none";
+                                const fallback = e.currentTarget.nextElementSibling;
+                                if (fallback) {
+                                    fallback.style.display = "flex";
+                                }
+                            } })) : null, _jsx("div", { className: `h-20 w-20 rounded-2xl bg-gradient-to-br from-indigo-500 to-blue-600 shadow-lg shadow-indigo-400/30 ring-4 ring-white/80 ${icon ? "hidden" : "flex"} items-center justify-center`, children: _jsx("span", { className: "text-2xl font-bold text-white", children: initials }) })] }), _jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-bold tracking-tight text-slate-900", children: displayName }), slug && (_jsxs("p", { className: "mt-1 text-base font-medium text-slate-500", children: ["@", slug] }))] })] }) }));
+}

package/dist/editors/builder-team-admin/components/overview/SubscriptionsStats.d.ts

@@ -0,0 +1,15 @@
+import type { ServiceSubscription } from "../../../../document-models/service-subscriptions/gen/types.js";
+type SubscriptionsStatsProps = {
+    subscriptions: ServiceSubscription[];
+};
+/**
+ * Displays subscription statistics in a 4-column card grid.
+ * Shows: Active count, Trial count, Monthly cost estimate, Seats usage.
+ */
+export declare function SubscriptionsStats({ subscriptions }: SubscriptionsStatsProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Empty state placeholder when no subscriptions document exists.
+ */
+export declare function SubscriptionsEmptyState(): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=SubscriptionsStats.d.ts.map

package/dist/editors/builder-team-admin/components/overview/SubscriptionsStats.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscriptionsStats.d.ts","sourceRoot":"","sources":["../../../../../editors/builder-team-admin/components/overview/SubscriptionsStats.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gEAAgE,CAAC;AAE1G,KAAK,uBAAuB,GAAG;IAC7B,aAAa,EAAE,mBAAmB,EAAE,CAAC;CACtC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,aAAa,EAAE,EAAE,uBAAuB,2CA+E5E;AAED;;GAEG;AACH,wBAAgB,uBAAuB,4CA6BtC"}

package/dist/editors/builder-team-admin/components/overview/SubscriptionsStats.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Displays subscription statistics in a 4-column card grid.
+ * Shows: Active count, Trial count, Monthly cost estimate, Seats usage.
+ */
+export function SubscriptionsStats({ subscriptions }) {
+    const activeCount = subscriptions.filter((s) => s.status === "ACTIVE").length;
+    const trialCount = subscriptions.filter((s) => s.status === "TRIAL").length;
+    // Calculate estimated monthly cost by normalizing all billing cycles
+    const totalMonthly = subscriptions.reduce((sum, sub) => {
+        if (!sub.amount)
+            return sum;
+        const amount = sub.amount;
+        switch (sub.billingCycle) {
+            case "MONTHLY":
+                return sum + amount;
+            case "QUARTERLY":
+                return sum + amount / 3;
+            case "ANNUAL":
+                return sum + amount / 12;
+            case "BIENNIAL":
+                return sum + amount / 24;
+            default:
+                return sum;
+        }
+    }, 0);
+    const totalSeats = subscriptions.reduce((sum, sub) => sum + (sub.seats?.total ?? 0), 0);
+    const usedSeats = subscriptions.reduce((sum, sub) => sum + (sub.seats?.assignedMembers.length ?? 0), 0);
+    const stats = [
+        {
+            label: "Active Subscriptions",
+            value: activeCount.toString(),
+            color: "text-emerald-600",
+        },
+        {
+            label: "Trial Subscriptions",
+            value: trialCount.toString(),
+            color: "text-amber-600",
+        },
+        {
+            label: "Monthly Cost (est.)",
+            value: `$${totalMonthly.toLocaleString(undefined, {
+                minimumFractionDigits: 0,
+                maximumFractionDigits: 0,
+            })}`,
+            color: "text-slate-900",
+        },
+        {
+            label: "Seats Used",
+            value: `${usedSeats}/${totalSeats}`,
+            color: "text-slate-900",
+        },
+    ];
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-lg font-semibold text-slate-900", children: "Service Subscriptions" }), _jsx("div", { className: "grid grid-cols-2 gap-4 sm:grid-cols-4", children: stats.map((stat) => (_jsxs("div", { className: "rounded-xl border border-slate-200 bg-white p-5 shadow-sm transition-shadow hover:shadow-md", children: [_jsx("p", { className: "text-sm font-medium text-slate-500", children: stat.label }), _jsx("p", { className: `mt-2 text-3xl font-semibold tracking-tight ${stat.color}`, children: stat.value })] }, stat.label))) })] }));
+}
+/**
+ * Empty state placeholder when no subscriptions document exists.
+ */
+export function SubscriptionsEmptyState() {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-lg font-semibold text-slate-900", children: "Service Subscriptions" }), _jsxs("div", { className: "rounded-xl border border-dashed border-slate-300 bg-slate-50/50 p-8 text-center", children: [_jsx("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: _jsx("svg", { className: "h-6 w-6 text-slate-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M2.25 8.25h19.5M2.25 9h19.5m-16.5 5.25h6m-6 2.25h3m-3.75 3h15a2.25 2.25 0 002.25-2.25V6.75A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25v10.5A2.25 2.25 0 004.5 19.5z" }) }) }), _jsx("p", { className: "text-sm text-slate-500", children: "No subscriptions document found. Create one to track your team's services." })] })] }));
+}

package/dist/editors/builder-team-admin/components/overview/TeamMembersOverview.d.ts

@@ -0,0 +1,10 @@
+type TeamMembersOverviewProps = {
+    contributors: string[] | undefined;
+};
+/**
+ * Displays team members as a horizontal row of avatar cards.
+ * Fetches contributor profiles from builder-profile documents across all drives.
+ */
+export declare function TeamMembersOverview({ contributors, }: TeamMembersOverviewProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TeamMembersOverview.d.ts.map

package/dist/editors/builder-team-admin/components/overview/TeamMembersOverview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TeamMembersOverview.d.ts","sourceRoot":"","sources":["../../../../../editors/builder-team-admin/components/overview/TeamMembersOverview.tsx"],"names":[],"mappings":"AAYA,KAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;CACpC,CAAC;AAIF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAClC,YAAY,GACb,EAAE,wBAAwB,2CAsH1B"}

package/dist/editors/builder-team-admin/components/overview/TeamMembersOverview.js

@@ -0,0 +1,121 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback, useState } from "react";
+import { useDrives, useGetDocuments } from "@powerhousedao/reactor-browser";
+import { useRemoteBuilderProfiles } from "../../hooks/useRemoteBuilderProfiles.js";
+const MAX_VISIBLE_MEMBERS = 6;
+/**
+ * Displays team members as a horizontal row of avatar cards.
+ * Fetches contributor profiles from builder-profile documents across all drives.
+ */
+export function TeamMembersOverview({ contributors, }) {
+    const drives = useDrives();
+    // Map all builder profile FileNodes from all drives with their driveId
+    const builderProfileNodesWithDriveId = useMemo(() => {
+        if (!drives)
+            return [];
+        return drives.flatMap((drive) => {
+            const builderProfileNodes = drive.state.global.nodes.filter((node) => node.kind === "file" &&
+                "documentType" in node &&
+                node.documentType === "powerhouse/builder-profile");
+            return builderProfileNodes.map((node) => ({
+                node,
+                driveId: drive.header.id,
+            }));
+        });
+    }, [drives]);
+    // Get all unique builder PHIDs from the nodes
+    const builderPhids = useMemo(() => {
+        return builderProfileNodesWithDriveId.map(({ node }) => node.id);
+    }, [builderProfileNodesWithDriveId]);
+    // Fetch all builder profile documents from all drives
+    const builderProfileDocuments = useGetDocuments(builderPhids);
+    // Create a map of PHID to document for quick lookup (local drives)
+    const localBuilderProfileMap = useMemo(() => {
+        const map = new Map();
+        for (const doc of builderProfileDocuments) {
+            if (doc.header.documentType === "powerhouse/builder-profile") {
+                map.set(doc.header.id, doc);
+            }
+        }
+        return map;
+    }, [builderProfileDocuments]);
+    // Fetch remote profiles as fallback for contributors not found locally
+    const { profileMap: remoteProfileMap } = useRemoteBuilderProfiles(localBuilderProfileMap);
+    // Helper function to get builder profile data by PHID (local first, then remote fallback)
+    const getBuilderProfileByPhid = useCallback((phid) => {
+        // Try local first
+        const localDoc = localBuilderProfileMap.get(phid);
+        if (localDoc) {
+            return {
+                phid,
+                name: localDoc.state.global.name || "Unknown",
+                icon: localDoc.state.global.icon || null,
+            };
+        }
+        // Fall back to remote
+        const remoteProfile = remoteProfileMap.get(phid);
+        if (remoteProfile) {
+            return {
+                phid,
+                name: remoteProfile.state?.name || "Unknown",
+                icon: remoteProfile.state?.icon || null,
+            };
+        }
+        return null;
+    }, [localBuilderProfileMap, remoteProfileMap]);
+    // Map contributors to team member data
+    const teamMembers = useMemo(() => {
+        if (!contributors)
+            return [];
+        return contributors
+            .map((phid) => getBuilderProfileByPhid(phid))
+            .filter((member) => member !== null);
+    }, [contributors, getBuilderProfileByPhid]);
+    const contributorCount = contributors?.length ?? 0;
+    const [isExpanded, setIsExpanded] = useState(false);
+    if (contributorCount === 0) {
+        return _jsx(TeamMembersEmptyState, {});
+    }
+    const hasOverflow = contributorCount > MAX_VISIBLE_MEMBERS;
+    const visibleMembers = isExpanded
+        ? teamMembers
+        : teamMembers.slice(0, MAX_VISIBLE_MEMBERS);
+    const overflowCount = contributorCount - MAX_VISIBLE_MEMBERS;
+    return (_jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("h2", { className: "text-lg font-semibold text-slate-900", children: "Team Members" }), _jsx("span", { className: "inline-flex items-center justify-center rounded-full bg-indigo-100 px-2.5 py-0.5 text-sm font-medium text-indigo-700", children: contributorCount })] }), _jsxs("div", { className: "flex flex-wrap gap-4", children: [visibleMembers.map((member) => (_jsx(MemberCard, { member: member }, member.phid))), hasOverflow && !isExpanded && (_jsx(OverflowIndicator, { count: overflowCount, onClick: () => setIsExpanded(true) })), hasOverflow && isExpanded && (_jsx(CollapseIndicator, { onClick: () => setIsExpanded(false) }))] })] }));
+}
+/**
+ * Individual team member card with avatar and name.
+ */
+function MemberCard({ member }) {
+    const initials = member.name
+        .split(" ")
+        .map((word) => word[0])
+        .join("")
+        .slice(0, 2)
+        .toUpperCase();
+    return (_jsxs("div", { className: "group flex flex-col items-center gap-2", children: [_jsxs("div", { className: "relative", children: [member.icon ? (_jsx("img", { src: member.icon, alt: member.name, className: "h-14 w-14 rounded-full object-cover ring-2 ring-white shadow-md transition-transform group-hover:scale-105", onError: (e) => {
+                            e.currentTarget.style.display = "none";
+                            const fallback = e.currentTarget.nextElementSibling;
+                            if (fallback) {
+                                fallback.style.display = "flex";
+                            }
+                        } })) : null, _jsx("div", { className: `h-14 w-14 rounded-full bg-gradient-to-br from-slate-400 to-slate-500 ring-2 ring-white shadow-md ${member.icon ? "hidden" : "flex"} items-center justify-center transition-transform group-hover:scale-105`, children: _jsx("span", { className: "text-sm font-semibold text-white", children: initials }) })] }), _jsx("span", { className: "max-w-[80px] truncate text-xs font-medium text-slate-600", children: member.name })] }));
+}
+/**
+ * Overflow indicator showing remaining member count. Clickable to expand.
+ */
+function OverflowIndicator({ count, onClick, }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex flex-col items-center gap-2 group cursor-pointer", title: "Click to show all members", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 ring-2 ring-white shadow-sm transition-all group-hover:bg-indigo-100 group-hover:ring-indigo-200", children: _jsxs("span", { className: "text-sm font-semibold text-slate-500 group-hover:text-indigo-600", children: ["+", count] }) }), _jsx("span", { className: "text-xs font-medium text-slate-400 group-hover:text-indigo-500", children: "show all" })] }));
+}
+/**
+ * Collapse indicator to hide extra members. Clickable to collapse.
+ */
+function CollapseIndicator({ onClick }) {
+    return (_jsxs("button", { type: "button", onClick: onClick, className: "flex flex-col items-center gap-2 group cursor-pointer", title: "Click to show less", children: [_jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-slate-100 ring-2 ring-white shadow-sm transition-all group-hover:bg-slate-200", children: _jsx("svg", { className: "h-5 w-5 text-slate-500 group-hover:text-slate-700", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" }) }) }), _jsx("span", { className: "text-xs font-medium text-slate-400 group-hover:text-slate-600", children: "show less" })] }));
+}
+/**
+ * Empty state when no team members have been added.
+ */
+function TeamMembersEmptyState() {
+    return (_jsxs("div", { className: "space-y-4", children: [_jsx("h2", { className: "text-lg font-semibold text-slate-900", children: "Team Members" }), _jsxs("div", { className: "rounded-xl border border-dashed border-slate-300 bg-slate-50/50 p-8 text-center", children: [_jsx("div", { className: "mx-auto mb-3 flex h-12 w-12 items-center justify-center rounded-full bg-slate-100", children: _jsx("svg", { className: "h-6 w-6 text-slate-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 1.5, children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M18 18.72a9.094 9.094 0 003.741-.479 3 3 0 00-4.682-2.72m.94 3.198l.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0112 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 016 18.719m12 0a5.971 5.971 0 00-.941-3.197m0 0A5.995 5.995 0 0012 12.75a5.995 5.995 0 00-5.058 2.772m0 0a3 3 0 00-4.681 2.72 8.986 8.986 0 003.74.477m.94-3.197a5.971 5.971 0 00-.94 3.197M15 6.75a3 3 0 11-6 0 3 3 0 016 0zm6 3a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0zm-13.5 0a2.25 2.25 0 11-4.5 0 2.25 2.25 0 014.5 0z" }) }) }), _jsx("p", { className: "text-sm text-slate-500", children: "No team members added yet. Add contributors to your builder profile." })] })] }));
+}

package/dist/editors/builder-team-admin/components/snapshot-reports.d.ts

@@ -0,0 +1,2 @@
+export declare function SnapshotReports(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=snapshot-reports.d.ts.map

package/dist/editors/builder-team-admin/components/snapshot-reports.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"snapshot-reports.d.ts","sourceRoot":"","sources":["../../../../editors/builder-team-admin/components/snapshot-reports.tsx"],"names":[],"mappings":"AAmJA,wBAAgB,eAAe,4CAkH9B"}

package/dist/editors/builder-team-admin/components/snapshot-reports.js

@@ -0,0 +1,116 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { FileItem } from "@powerhousedao/design-system/connect";
+import { FolderItem } from "@powerhousedao/design-system/connect";
+import { isFolderNodeKind, isFileNodeKind, addFolder, setSelectedNode, useSelectedNodePath, useNodesInSelectedDriveOrFolder, useSelectedDriveId, useUserPermissions, } from "@powerhousedao/reactor-browser";
+import { useEffect, useRef, useState, Fragment } from "react";
+import { Plus } from "lucide-react";
+import { useSnapshotReportAutoPlacement } from "../hooks/useSnapshotReportAutoPlacement.js";
+/**
+ * Simple inline input for creating new folders.
+ */
+function FolderNameInput({ onSubmit, onCancel, }) {
+    const [value, setValue] = useState("New Folder");
+    const inputRef = useRef(null);
+    useEffect(() => {
+        inputRef.current?.focus();
+        inputRef.current?.select();
+    }, []);
+    const handleKeyDown = (e) => {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (value.trim()) {
+                onSubmit(value.trim());
+            }
+        }
+        else if (e.key === "Escape") {
+            onCancel();
+        }
+    };
+    return (_jsx("input", { ref: inputRef, type: "text", value: value, onChange: (e) => setValue(e.target.value), onKeyDown: handleKeyDown, onBlur: () => {
+            if (value.trim()) {
+                onSubmit(value.trim());
+            }
+            else {
+                onCancel();
+            }
+        }, className: "text-gray-800 bg-transparent border-b border-gray-400 outline-none px-1 py-0.5 text-sm min-w-[100px]", placeholder: "New Folder" }));
+}
+/**
+ * Custom breadcrumbs component that treats "Snapshot Reports" folder as the root.
+ * Only shows path from "Snapshot Reports" folder onwards.
+ * Includes folder creation functionality.
+ */
+function SnapshotReportsBreadcrumbs({ rootFolderId, }) {
+    const selectedNodePath = useSelectedNodePath();
+    const selectedDriveId = useSelectedDriveId();
+    const { isAllowedToCreateDocuments } = useUserPermissions();
+    const [isCreating, setIsCreating] = useState(false);
+    // Find the index of the root folder in the path
+    const rootIndex = selectedNodePath.findIndex((node) => node.id === rootFolderId);
+    // Get the path starting from (and including) the root folder
+    const visiblePath = rootIndex >= 0 ? selectedNodePath.slice(rootIndex) : selectedNodePath;
+    const handleAddNew = () => {
+        setIsCreating(true);
+    };
+    const handleSubmit = (name) => {
+        if (!isAllowedToCreateDocuments || !selectedDriveId)
+            return;
+        const parentFolderId = selectedNodePath.at(-1)?.id;
+        addFolder(selectedDriveId, name, parentFolderId)
+            .then((node) => {
+            if (node) {
+                setSelectedNode(node);
+            }
+        })
+            .catch((error) => {
+            console.error(error);
+        })
+            .finally(() => {
+            setIsCreating(false);
+        });
+    };
+    const handleCancel = () => {
+        setIsCreating(false);
+    };
+    return (_jsxs("div", { className: "flex h-9 flex-row items-center gap-2 text-gray-500 border-b border-gray-200 pb-3", children: [visiblePath.map((node) => (_jsxs(Fragment, { children: [_jsx("div", { className: "transition-colors last-of-type:text-gray-800 hover:text-gray-800 cursor-pointer", onClick: () => setSelectedNode(node.id), role: "button", children: node.name }), _jsx("span", { children: "/" })] }, node.id))), isAllowedToCreateDocuments &&
+                (isCreating ? (_jsx(FolderNameInput, { onSubmit: handleSubmit, onCancel: handleCancel })) : (_jsxs("button", { type: "button", className: "ml-1 flex items-center justify-center gap-2 rounded-md bg-gray-50 px-2 py-1.5 transition-colors hover:bg-gray-200 hover:text-gray-800", onClick: handleAddNew, children: [_jsx(Plus, { size: 14 }), "Add new"] })))] }));
+}
+export function SnapshotReports() {
+    const hasNavigatedToFolder = useRef(false);
+    const selectedNodePath = useSelectedNodePath();
+    const nodesInCurrentFolder = useNodesInSelectedDriveOrFolder();
+    // Use the shared auto-placement hook - this handles:
+    // 1. Creating the "Snapshot Reports" folder if it doesn't exist
+    // 2. Moving snapshot reports dropped anywhere into the proper folder
+    // 3. Organizing snapshot reports into year-based subfolders
+    const { snapshotReportsFolder } = useSnapshotReportAutoPlacement();
+    // Navigate to the folder when it exists (only once on mount)
+    useEffect(() => {
+        if (snapshotReportsFolder && !hasNavigatedToFolder.current) {
+            hasNavigatedToFolder.current = true;
+            setSelectedNode(snapshotReportsFolder.id);
+        }
+    }, [snapshotReportsFolder]);
+    // Check if we're currently within the Snapshot Reports folder tree
+    const isWithinSnapshotReports = snapshotReportsFolder &&
+        selectedNodePath.some((node) => node.id === snapshotReportsFolder.id);
+    // If user navigated outside Snapshot Reports folder, bring them back
+    useEffect(() => {
+        if (snapshotReportsFolder &&
+            !isWithinSnapshotReports &&
+            hasNavigatedToFolder.current) {
+            setSelectedNode(snapshotReportsFolder.id);
+        }
+    }, [snapshotReportsFolder, isWithinSnapshotReports]);
+    // Show loading state while folder is being created
+    if (!snapshotReportsFolder) {
+        return (_jsx("div", { className: "flex items-center justify-center h-64", children: _jsx("div", { className: "text-gray-500", children: "Setting up Snapshot Reports folder..." }) }));
+    }
+    // Get folder and file nodes from current selection
+    const folderNodes = nodesInCurrentFolder.filter((n) => isFolderNodeKind(n));
+    const fileNodes = nodesInCurrentFolder.filter((n) => isFileNodeKind(n));
+    const hasFolders = folderNodes.length > 0;
+    const hasFiles = fileNodes.length > 0;
+    const isEmpty = !hasFolders && !hasFiles;
+    return (_jsxs("div", { children: [_jsx("div", { className: "text-2xl font-bold text-center mb-4", children: "Snapshot Reports" }), _jsxs("div", { className: "space-y-6 px-6", children: [_jsx(SnapshotReportsBreadcrumbs, { rootFolderId: snapshotReportsFolder.id }), hasFolders && (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-bold text-gray-600", children: "Folders" }), _jsx("div", { className: "flex flex-wrap gap-4", children: folderNodes.map((folderNode) => (_jsx(FolderItem, { folderNode: folderNode }, folderNode.id))) })] })), hasFiles && (_jsxs("div", { children: [_jsx("h3", { className: "mb-2 text-sm font-semibold text-gray-600", children: "Documents" }), _jsx("div", { className: "flex flex-wrap gap-4", children: fileNodes.map((fileNode) => (_jsx(FileItem, { fileNode: fileNode }, fileNode.id))) })] })), isEmpty && (_jsxs("div", { className: "flex flex-col items-center justify-center py-12 text-center", children: [_jsx("div", { className: "text-gray-400 mb-2", children: _jsx("svg", { className: "w-16 h-16 mx-auto", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1, d: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }) }), _jsx("p", { className: "text-gray-500 text-sm", children: "No snapshot reports yet. Add documents to this folder to get started." })] }))] })] }));
+}

package/dist/editors/builder-team-admin/components/team-members.d.ts

@@ -0,0 +1,2 @@
+export declare function ContributorsSection({}: {}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=team-members.d.ts.map

package/dist/editors/builder-team-admin/components/team-members.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"team-members.d.ts","sourceRoot":"","sources":["../../../../editors/builder-team-admin/components/team-members.tsx"],"names":[],"mappings":"AAmKA,wBAAgB,mBAAmB,CAAC,EAAE,IAAA,2CA0TrC"}