@voyantjs/resources-ui 0.30.7 → 0.31.0

package/README.md

@@ -12,6 +12,47 @@ pnpm add @voyantjs/resources-ui @voyantjs/resources-react @voyantjs/ui @tanstack
 
 All components accept a `className` prop and merge it with `cn()`. Wrap or compose to extend; use the registry copy-paste path (`npx shadcn add @voyant/...`) for components you want to fork outright.
 
+## Components
+
+- `ResourcesPage` composes the resources overview and all primary/secondary tabs with package data hooks, shared filters, row selection state, and app-provided bulk mutation/navigation handlers.
+- `ResourcesOverview`, `ResourcesTab`, `PoolsTab`, `AllocationsTab`, `AssignmentsTab`, and `CloseoutsTab` remain exported for apps that need a custom page shell.
+- `ResourceDetailPage`, `ResourcePoolDetailPage`, `ResourceAllocationDetailPage`, and `ResourceAssignmentDetailPage` compose package-owned detail views for the four resources surfaces. They use `@voyantjs/resources-react` hooks for detail/list data where available and expose app callbacks for routing and delete mutations.
+- `ensureResourceDetailPageData`, `ensureResourcePoolDetailPageData`, `ensureResourceAllocationDetailPageData`, and `ensureResourceAssignmentDetailPageData` are exported for route loaders that want to prefetch the same package data.
+- `ResourceDetailField`, `ResourceDetailCard`, `ResourceDetailHeader`, the four detail skeletons, and `useResourcePoolMembers` are exported for apps that need custom detail shells while preserving the package sections/helpers.
+
+## Detail pages
+
+The detail pages deliberately keep router and mutation behavior app-owned:
+
+```tsx
+import {
+  ResourceDetailPage,
+  ensureResourceDetailPageData,
+} from "@voyantjs/resources-ui"
+import { defaultFetcher, resourcesQueryKeys } from "@voyantjs/resources-react"
+
+const resourcesClient = { baseUrl: "/api", fetcher: defaultFetcher }
+
+export const loader = ({ queryClient, id }) =>
+  ensureResourceDetailPageData(queryClient, resourcesClient, id)
+
+export function RouteComponent({ id, navigate, queryClient, api }) {
+  return (
+    <ResourceDetailPage
+      id={id}
+      onBack={() => navigate("/resources")}
+      onOpenSupplier={(supplierId) => navigate(`/suppliers/${supplierId}`)}
+      onOpenAssignment={(assignmentId) => navigate(`/resources/assignments/${assignmentId}`)}
+      onDelete={async (resource) => {
+        await api.delete(`/v1/resources/resources/${resource.id}`)
+        await queryClient.invalidateQueries({ queryKey: resourcesQueryKeys.resources() })
+        navigate("/resources")
+      }}
+    />
+  )
+}
+```
+
 ## I18n
 
 Components render English by default. To localize them, wrap your UI in

package/dist/components/resource-allocation-detail-page.d.ts

@@ -0,0 +1,15 @@
+import { type ResourceAllocationDetail } from "@voyantjs/resources-react";
+import { type ConfirmAction } from "./resource-detail-shared.js";
+export interface ResourceAllocationDetailPageProps {
+    id: string;
+    className?: string;
+    deleting?: boolean;
+    onBack?: () => void;
+    onDelete?: (allocation: ResourceAllocationDetail) => Promise<void> | void;
+    onOpenPool?: (poolId: string) => void;
+    onOpenProduct?: (productId: string) => void;
+    confirmAction?: ConfirmAction;
+}
+export declare function ResourceAllocationDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenPool, onOpenProduct, }: ResourceAllocationDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceAllocationDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-allocation-detail-page.d.ts.map

package/dist/components/resource-allocation-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-allocation-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/resource-allocation-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,wBAAwB,EAM9B,MAAM,2BAA2B,CAAA;AAKlC,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,iCAAiC;IAChD,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,wBAAwB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACzE,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,aAAa,CAAC,EAAE,aAAa,CAAA;CAC9B;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,UAAU,EACV,aAAa,GACd,EAAE,iCAAiC,2CA2HnC;AAED,wBAAgB,gCAAgC,4CAI/C"}

package/dist/components/resource-allocation-detail-page.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { labelById, useAllocation, usePool, useProducts, useRules, useStartTimes, } from "@voyantjs/resources-react";
+import { Badge, Button, cn } from "@voyantjs/ui/components";
+import { Package, Wrench } from "lucide-react";
+import { useResourcesUiI18nOrDefault } from "../i18n/index.js";
+import { ResourceDetailSkeleton as BaseResourceDetailSkeleton, ResourceDetailCard, ResourceDetailField, ResourceDetailHeader, ResourceDetailState, } from "./resource-detail-shared.js";
+export function ResourceAllocationDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenPool, onOpenProduct, }) {
+    const i18n = useResourcesUiI18nOrDefault();
+    const m = i18n.messages;
+    const page = m.detailPages;
+    const allocationQuery = useAllocation(id);
+    const allocation = allocationQuery.data;
+    const poolQuery = usePool(allocation?.poolId);
+    const productsQuery = useProducts({ limit: 25 });
+    const rulesQuery = useRules({
+        enabled: Boolean(allocation?.productId),
+        productId: allocation?.productId,
+        limit: 25,
+    });
+    const startTimesQuery = useStartTimes({
+        enabled: Boolean(allocation?.productId),
+        productId: allocation?.productId,
+        limit: 25,
+    });
+    if (allocationQuery.isPending) {
+        return _jsx(ResourceAllocationDetailSkeleton, {});
+    }
+    if (allocationQuery.isError) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.allocation.loadFailed, onBack: onBack }));
+    }
+    if (!allocation) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.allocation.notFound, onBack: onBack }));
+    }
+    const rule = rulesQuery.data?.data.find((entry) => entry.id === allocation.availabilityRuleId);
+    const startTime = startTimesQuery.data?.data.find((entry) => entry.id === allocation.startTimeId);
+    return (_jsxs("div", { "data-slot": "resource-allocation-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsx(ResourceDetailHeader, { title: page.allocation.pageTitle, deleteConfirmName: allocation.id, deleteConfirmTemplate: page.allocation.deleteConfirm, deleteErrorMessage: page.allocation.deleteFailed, deleting: deleting, confirmAction: confirmAction, onBack: onBack, onDelete: onDelete ? () => onDelete(allocation) : undefined, badges: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", children: m.common.allocationModeLabels[allocation.allocationMode] }), _jsxs(Badge, { variant: "secondary", children: [page.common.quantity, " ", i18n.formatNumber(allocation.quantityRequired)] })] }), actions: _jsxs(_Fragment, { children: [onOpenPool ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onOpenPool(allocation.poolId), children: [_jsx(Wrench, { "data-icon": "inline-start", "aria-hidden": "true" }), page.common.openPool] })) : null, onOpenProduct ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onOpenProduct(allocation.productId), children: [_jsx(Package, { "data-icon": "inline-start", "aria-hidden": "true" }), page.common.openProduct] })) : null] }) }), _jsx(ResourceDetailCard, { title: page.allocation.detailsTitle, children: _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(ResourceDetailField, { label: page.common.pool, children: poolQuery.data?.name ?? allocation.poolId }), _jsx(ResourceDetailField, { label: page.common.product, children: labelById(productsQuery.data?.data ?? [], allocation.productId) ||
+                                allocation.productId }), _jsx(ResourceDetailField, { label: page.allocation.rule, children: rule?.recurrenceRule ?? allocation.availabilityRuleId ?? page.common.noRule }), _jsx(ResourceDetailField, { label: page.allocation.startTime, children: startTime?.label ??
+                                startTime?.startTimeLocal ??
+                                allocation.startTimeId ??
+                                page.common.noStartTime }), _jsx(ResourceDetailField, { label: page.allocation.priority, children: i18n.formatNumber(allocation.priority) }), _jsx(ResourceDetailField, { label: page.common.created, children: i18n.formatDateTime(allocation.createdAt) }), _jsx(ResourceDetailField, { label: page.common.updated, children: i18n.formatDateTime(allocation.updatedAt) })] }) })] }));
+}
+export function ResourceAllocationDetailSkeleton() {
+    return (_jsx(BaseResourceDetailSkeleton, { actionCount: 3, detailRows: 7, showNotes: false, stackedCards: 0 }));
+}

package/dist/components/resource-assignment-detail-page.d.ts

@@ -0,0 +1,15 @@
+import { type ResourceSlotAssignmentDetail } from "@voyantjs/resources-react";
+import { type ConfirmAction } from "./resource-detail-shared.js";
+export interface ResourceAssignmentDetailPageProps {
+    id: string;
+    className?: string;
+    deleting?: boolean;
+    onBack?: () => void;
+    onDelete?: (assignment: ResourceSlotAssignmentDetail) => Promise<void> | void;
+    onOpenResource?: (resourceId: string) => void;
+    onOpenSlot?: (slotId: string) => void;
+    confirmAction?: ConfirmAction;
+}
+export declare function ResourceAssignmentDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenResource, onOpenSlot, }: ResourceAssignmentDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceAssignmentDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-assignment-detail-page.d.ts.map

package/dist/components/resource-assignment-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-assignment-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/resource-assignment-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,4BAA4B,EAOlC,MAAM,2BAA2B,CAAA;AAMlC,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,iCAAiC;IAChD,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,4BAA4B,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7E,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,UAAU,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACrC,aAAa,CAAC,EAAE,aAAa,CAAA;CAC9B;AAED,wBAAgB,4BAA4B,CAAC,EAC3C,SAAS,EACT,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,cAAc,EACd,UAAU,GACX,EAAE,iCAAiC,2CAkInC;AAED,wBAAgB,gCAAgC,4CAI/C"}

package/dist/components/resource-assignment-detail-page.js

@@ -0,0 +1,47 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelById, useAssignment, useBookings, usePool, useProducts, useResource, useSlots, } from "@voyantjs/resources-react";
+import { Badge, Button, cn } from "@voyantjs/ui/components";
+import { CalendarDays, Wrench } from "lucide-react";
+import { useResourcesUiI18nOrDefault } from "../i18n/index.js";
+import { formatDateTimeOrFallback, formatResourceSlotLabel } from "../i18n/utils.js";
+import { ResourceDetailSkeleton as BaseResourceDetailSkeleton, ResourceDetailCard, ResourceDetailField, ResourceDetailHeader, ResourceDetailState, } from "./resource-detail-shared.js";
+export function ResourceAssignmentDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenResource, onOpenSlot, }) {
+    const i18n = useResourcesUiI18nOrDefault();
+    const m = i18n.messages;
+    const page = m.detailPages;
+    const assignmentQuery = useAssignment(id);
+    const assignment = assignmentQuery.data;
+    const slotsQuery = useSlots({ limit: 25 });
+    const slot = slotsQuery.data?.data.find((entry) => entry.id === assignment?.slotId);
+    const poolQuery = usePool(assignment?.poolId);
+    const resourceQuery = useResource(assignment?.resourceId);
+    const bookingsQuery = useBookings({ limit: 25 });
+    const productsQuery = useProducts({ limit: 25 });
+    if (assignmentQuery.isPending) {
+        return _jsx(ResourceAssignmentDetailSkeleton, {});
+    }
+    if (assignmentQuery.isError) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.assignment.loadFailed, onBack: onBack }));
+    }
+    if (!assignment) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.assignment.notFound, onBack: onBack }));
+    }
+    const slotLabel = slot
+        ? formatResourceSlotLabel(slot, {
+            template: m.common.slotLabel,
+            formatDate: i18n.formatDate,
+        })
+        : assignment.slotId;
+    return (_jsxs("div", { "data-slot": "resource-assignment-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsx(ResourceDetailHeader, { title: page.assignment.pageTitle, deleteConfirmName: assignment.id, deleteConfirmTemplate: page.assignment.deleteConfirm, deleteErrorMessage: page.assignment.deleteFailed, deleting: deleting, confirmAction: confirmAction, onBack: onBack, onDelete: onDelete ? () => onDelete(assignment) : undefined, badges: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", children: m.common.assignmentStatusLabels[assignment.status] }), _jsx(Badge, { variant: "secondary", children: slotLabel })] }), actions: _jsxs(_Fragment, { children: [onOpenSlot ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onOpenSlot(assignment.slotId), children: [_jsx(CalendarDays, { "data-icon": "inline-start", "aria-hidden": "true" }), page.common.openSlot] })) : null, assignment.resourceId && onOpenResource ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onOpenResource(assignment.resourceId), children: [_jsx(Wrench, { "data-icon": "inline-start", "aria-hidden": "true" }), page.common.openResource] })) : null] }) }), _jsx(ResourceDetailCard, { title: page.assignment.detailsTitle, children: _jsxs("div", { className: "grid gap-3 md:grid-cols-2", children: [_jsx(ResourceDetailField, { label: page.common.slot, children: slotLabel }), _jsx(ResourceDetailField, { label: page.common.product, children: slot?.productId
+                                ? labelById(productsQuery.data?.data ?? [], slot.productId)
+                                : page.common.noValue }), _jsx(ResourceDetailField, { label: page.common.pool, children: poolQuery.data?.name ?? assignment.poolId ?? page.common.noPool }), _jsx(ResourceDetailField, { label: page.common.resource, children: resourceQuery.data?.name ?? assignment.resourceId ?? page.common.noResource }), _jsx(ResourceDetailField, { label: page.common.booking, children: assignment.bookingId
+                                ? labelById(bookingsQuery.data?.data ?? [], assignment.bookingId)
+                                : page.common.noBooking }), _jsx(ResourceDetailField, { label: page.assignment.assignedBy, children: assignment.assignedBy ?? page.common.noValue }), _jsx(ResourceDetailField, { label: page.assignment.released, children: formatDateTimeOrFallback(assignment.releasedAt, {
+                                fallback: page.common.noValue,
+                                formatDateTime: i18n.formatDateTime,
+                            }) }), _jsx(ResourceDetailField, { label: page.common.created, children: i18n.formatDateTime(assignment.createdAt) }), _jsx(ResourceDetailField, { label: page.common.updated, children: i18n.formatDateTime(assignment.updatedAt) })] }) }), assignment.notes ? (_jsx(ResourceDetailCard, { title: page.common.notes, children: _jsx("p", { className: "whitespace-pre-wrap", children: assignment.notes }) })) : null] }));
+}
+export function ResourceAssignmentDetailSkeleton() {
+    return (_jsx(BaseResourceDetailSkeleton, { actionCount: 3, detailRows: 9, showNotes: false, stackedCards: 0 }));
+}

package/dist/components/resource-detail-data.d.ts

@@ -0,0 +1,34 @@
+import type { QueryClient } from "@tanstack/react-query";
+import { type VoyantResourcesContextValue } from "@voyantjs/resources-react";
+export type ResourcePoolMemberRow = {
+    id: string;
+    poolId: string;
+    resourceId: string;
+};
+type ListResponse<T> = {
+    data: T[];
+    total: number;
+    limit: number;
+    offset: number;
+};
+type PoolMemberFilters = {
+    poolId?: string | undefined;
+    resourceId?: string | undefined;
+    limit?: number | undefined;
+    offset?: number | undefined;
+};
+export declare function getResourcePoolMembersQueryOptions(client: VoyantResourcesContextValue, filters?: PoolMemberFilters): import("@tanstack/react-query").OmitKeyof<import("@tanstack/react-query").UseQueryOptions<ListResponse<ResourcePoolMemberRow>, Error, ListResponse<ResourcePoolMemberRow>, readonly ["voyant", "resources", "pool-members", "list", PoolMemberFilters]>, "queryFn"> & {
+    queryFn?: import("@tanstack/react-query").QueryFunction<ListResponse<ResourcePoolMemberRow>, readonly ["voyant", "resources", "pool-members", "list", PoolMemberFilters], never> | undefined;
+} & {
+    queryKey: readonly ["voyant", "resources", "pool-members", "list", PoolMemberFilters] & {
+        [dataTagSymbol]: ListResponse<ResourcePoolMemberRow>;
+        [dataTagErrorSymbol]: Error;
+    };
+};
+export declare function useResourcePoolMembers(filters?: PoolMemberFilters): import("@tanstack/react-query").UseQueryResult<ListResponse<ResourcePoolMemberRow>, Error>;
+export declare function ensureResourceDetailPageData(queryClient: QueryClient, client: VoyantResourcesContextValue, id: string): Promise<void>;
+export declare function ensureResourcePoolDetailPageData(queryClient: QueryClient, client: VoyantResourcesContextValue, id: string): Promise<void>;
+export declare function ensureResourceAllocationDetailPageData(queryClient: QueryClient, client: VoyantResourcesContextValue, id: string): Promise<void>;
+export declare function ensureResourceAssignmentDetailPageData(queryClient: QueryClient, client: VoyantResourcesContextValue, id: string): Promise<void>;
+export {};
+//# sourceMappingURL=resource-detail-data.d.ts.map

package/dist/components/resource-detail-data.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-detail-data.d.ts","sourceRoot":"","sources":["../../src/components/resource-detail-data.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAA;AAExD,OAAO,EAkBL,KAAK,2BAA2B,EACjC,MAAM,2BAA2B,CAAA;AAIlC,MAAM,MAAM,qBAAqB,GAAG;IAClC,EAAE,EAAE,MAAM,CAAA;IACV,MAAM,EAAE,MAAM,CAAA;IACd,UAAU,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,KAAK,YAAY,CAAC,CAAC,IAAI;IACrB,IAAI,EAAE,CAAC,EAAE,CAAA;IACT,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,EAAE,MAAM,CAAA;CACf,CAAA;AAED,KAAK,iBAAiB,GAAG;IACvB,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC3B,UAAU,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC/B,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,SAAS,CAAA;CAC5B,CAAA;AAmBD,wBAAgB,kCAAkC,CAChD,MAAM,EAAE,2BAA2B,EACnC,OAAO,GAAE,iBAAsB;;;;;;;EAiBhC;AAED,wBAAgB,sBAAsB,CAAC,OAAO,GAAE,iBAAsB,8FAQrE;AAED,wBAAsB,4BAA4B,CAChD,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,2BAA2B,EACnC,EAAE,EAAE,MAAM,iBAmBX;AAED,wBAAsB,gCAAgC,CACpD,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,2BAA2B,EACnC,EAAE,EAAE,MAAM,iBAmBX;AAED,wBAAsB,sCAAsC,CAC1D,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,2BAA2B,EACnC,EAAE,EAAE,MAAM,iBAcX;AAED,wBAAsB,sCAAsC,CAC1D,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,2BAA2B,EACnC,EAAE,EAAE,MAAM,iBAeX"}

package/dist/components/resource-detail-data.js

@@ -0,0 +1,90 @@
+"use client";
+import { queryOptions, useQuery } from "@tanstack/react-query";
+import { getAllocationQueryOptions, getAllocationsQueryOptions, getAssignmentQueryOptions, getAssignmentsQueryOptions, getBookingsQueryOptions, getCloseoutsQueryOptions, getPoolQueryOptions, getPoolsQueryOptions, getProductsQueryOptions, getResourceQueryOptions, getResourcesQueryOptions, getRulesQueryOptions, getSlotsQueryOptions, getStartTimesQueryOptions, getSuppliersQueryOptions, resourcesQueryKeys, useVoyantResourcesContext, } from "@voyantjs/resources-react";
+const DETAIL_LIMIT = 25;
+function joinUrl(baseUrl, path) {
+    const trimmedBase = baseUrl.endsWith("/") ? baseUrl.slice(0, -1) : baseUrl;
+    const trimmedPath = path.startsWith("/") ? path : `/${path}`;
+    return `${trimmedBase}${trimmedPath}`;
+}
+async function fetchJson(client, path) {
+    const response = await client.fetcher(joinUrl(client.baseUrl, path));
+    if (!response.ok) {
+        const body = await response.text();
+        throw new Error(body || `Voyant API error: ${response.status} ${response.statusText}`);
+    }
+    return (await response.json());
+}
+export function getResourcePoolMembersQueryOptions(client, filters = {}) {
+    return queryOptions({
+        queryKey: [...resourcesQueryKeys.all, "pool-members", "list", filters],
+        queryFn: () => {
+            const params = new URLSearchParams();
+            if (filters.poolId)
+                params.set("poolId", filters.poolId);
+            if (filters.resourceId)
+                params.set("resourceId", filters.resourceId);
+            if (filters.limit !== undefined)
+                params.set("limit", String(filters.limit));
+            if (filters.offset !== undefined)
+                params.set("offset", String(filters.offset));
+            const qs = params.toString();
+            return fetchJson(client, `/v1/resources/pool-members${qs ? `?${qs}` : ""}`);
+        },
+    });
+}
+export function useResourcePoolMembers(filters = {}) {
+    const client = useVoyantResourcesContext();
+    const enabled = Boolean(filters.poolId || filters.resourceId);
+    return useQuery({
+        ...getResourcePoolMembersQueryOptions(client, filters),
+        enabled,
+    });
+}
+export async function ensureResourceDetailPageData(queryClient, client, id) {
+    await queryClient.ensureQueryData(getResourceQueryOptions(client, id));
+    await Promise.all([
+        queryClient.ensureQueryData(getResourcePoolMembersQueryOptions(client, { resourceId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getPoolsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getAssignmentsQueryOptions(client, { resourceId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getSlotsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getBookingsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getCloseoutsQueryOptions(client, { resourceId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getSuppliersQueryOptions(client, { limit: DETAIL_LIMIT })),
+    ]);
+}
+export async function ensureResourcePoolDetailPageData(queryClient, client, id) {
+    await queryClient.ensureQueryData(getPoolQueryOptions(client, id));
+    await Promise.all([
+        queryClient.ensureQueryData(getResourcePoolMembersQueryOptions(client, { poolId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getResourcesQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getAllocationsQueryOptions(client, { poolId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getAssignmentsQueryOptions(client, { poolId: id, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getSlotsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getBookingsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getProductsQueryOptions(client, { limit: DETAIL_LIMIT })),
+    ]);
+}
+export async function ensureResourceAllocationDetailPageData(queryClient, client, id) {
+    const allocation = await queryClient.ensureQueryData(getAllocationQueryOptions(client, id));
+    await Promise.all([
+        queryClient.ensureQueryData(getPoolQueryOptions(client, allocation.poolId)),
+        queryClient.ensureQueryData(getProductsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getRulesQueryOptions(client, { productId: allocation.productId, limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getStartTimesQueryOptions(client, { productId: allocation.productId, limit: DETAIL_LIMIT })),
+    ]);
+}
+export async function ensureResourceAssignmentDetailPageData(queryClient, client, id) {
+    const assignment = await queryClient.ensureQueryData(getAssignmentQueryOptions(client, id));
+    await Promise.all([
+        assignment.poolId
+            ? queryClient.ensureQueryData(getPoolQueryOptions(client, assignment.poolId))
+            : Promise.resolve(),
+        assignment.resourceId
+            ? queryClient.ensureQueryData(getResourceQueryOptions(client, assignment.resourceId))
+            : Promise.resolve(),
+        queryClient.ensureQueryData(getSlotsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getBookingsQueryOptions(client, { limit: DETAIL_LIMIT })),
+        queryClient.ensureQueryData(getProductsQueryOptions(client, { limit: DETAIL_LIMIT })),
+    ]);
+}

package/dist/components/resource-detail-page.d.ts

@@ -0,0 +1,23 @@
+import { type ResourceDetail, type ResourcePoolRow, type ResourceSlotAssignmentRow } from "@voyantjs/resources-react";
+import { type ConfirmAction } from "./resource-detail-shared.js";
+export interface ResourceDetailPageProps {
+    id: string;
+    className?: string;
+    deleting?: boolean;
+    onBack?: () => void;
+    onDelete?: (resource: ResourceDetail) => Promise<void> | void;
+    onOpenSupplier?: (supplierId: string) => void;
+    onOpenAssignment?: (assignmentId: string) => void;
+    confirmAction?: ConfirmAction;
+}
+export declare function ResourceDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenAssignment, onOpenSupplier, }: ResourceDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceAssignmentSummary({ assignment, bookingLabel, noValue, onOpenAssignment, pool, slotLabel, }: {
+    assignment: ResourceSlotAssignmentRow;
+    bookingLabel: string;
+    noValue: string;
+    onOpenAssignment?: (assignmentId: string) => void;
+    pool?: ResourcePoolRow | undefined;
+    slotLabel: string;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-detail-page.d.ts.map

package/dist/components/resource-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/resource-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,cAAc,EACnB,KAAK,eAAe,EACpB,KAAK,yBAAyB,EAQ/B,MAAM,2BAA2B,CAAA;AAelC,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,uBAAuB;IACtC,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,cAAc,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7D,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,aAAa,CAAC,EAAE,aAAa,CAAA;CAC9B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,cAAc,GACf,EAAE,uBAAuB,2CAmMzB;AAED,wBAAgB,sBAAsB,4CAErC;AAMD,wBAAgB,yBAAyB,CAAC,EACxC,UAAU,EACV,YAAY,EACZ,OAAO,EACP,gBAAgB,EAChB,IAAI,EACJ,SAAS,GACV,EAAE;IACD,UAAU,EAAE,yBAAyB,CAAA;IACrC,YAAY,EAAE,MAAM,CAAA;IACpB,OAAO,EAAE,MAAM,CAAA;IACf,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,IAAI,CAAC,EAAE,eAAe,GAAG,SAAS,CAAA;IAClC,SAAS,EAAE,MAAM,CAAA;CAClB,2CA4CA"}

package/dist/components/resource-detail-page.js

@@ -0,0 +1,77 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { labelById, useAssignments, useBookings, useCloseouts, usePools, useResource, useSlots, useSuppliers, } from "@voyantjs/resources-react";
+import { Badge, Button, Card, CardContent, CardHeader, CardTitle, cn, } from "@voyantjs/ui/components";
+import { Package, Users, Wrench } from "lucide-react";
+import { useResourcesUiI18nOrDefault } from "../i18n/index.js";
+import { formatDateTimeOrFallback, formatResourceSlotLabel } from "../i18n/utils.js";
+import { useResourcePoolMembers } from "./resource-detail-data.js";
+import { ResourceDetailSkeleton as BaseResourceDetailSkeleton, ResourceDetailCard, ResourceDetailField, ResourceDetailHeader, ResourceDetailState, } from "./resource-detail-shared.js";
+export function ResourceDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenAssignment, onOpenSupplier, }) {
+    const i18n = useResourcesUiI18nOrDefault();
+    const m = i18n.messages;
+    const page = m.detailPages;
+    const resourceQuery = useResource(id);
+    const suppliersQuery = useSuppliers({ limit: 25 });
+    const poolMembersQuery = useResourcePoolMembers({ resourceId: id, limit: 25 });
+    const poolsQuery = usePools({ limit: 25 });
+    const assignmentsQuery = useAssignmentsByResource(id);
+    const slotsQuery = useSlots({ limit: 25 });
+    const bookingsQuery = useBookings({ limit: 25 });
+    const closeoutsQuery = useCloseouts({ resourceId: id, limit: 25 });
+    if (resourceQuery.isPending) {
+        return _jsx(ResourceDetailSkeleton, {});
+    }
+    if (resourceQuery.isError) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.resource.loadFailed, onBack: onBack }));
+    }
+    const resource = resourceQuery.data;
+    if (!resource) {
+        return (_jsx(ResourceDetailState, { className: className, message: page.resource.notFound, onBack: onBack }));
+    }
+    const pools = poolsQuery.data?.data ?? [];
+    const slots = slotsQuery.data?.data ?? [];
+    const bookings = bookingsQuery.data?.data ?? [];
+    const poolsById = new Map(pools.map((pool) => [pool.id, pool]));
+    const slotsById = new Map(slots.map((slot) => [slot.id, slot]));
+    const bookingsById = new Map(bookings.map((booking) => [booking.id, booking]));
+    const supplierLabel = resource.supplierId
+        ? labelById(suppliersQuery.data?.data ?? [], resource.supplierId)
+        : page.resource.noSupplierAssigned;
+    return (_jsxs("div", { "data-slot": "resource-detail-page", className: cn("flex flex-col gap-6 p-6", className), children: [_jsx(ResourceDetailHeader, { title: resource.name, deleteConfirmName: resource.name, deleteConfirmTemplate: page.resource.deleteConfirm, deleteErrorMessage: page.resource.deleteFailed, deleting: deleting, confirmAction: confirmAction, onBack: onBack, onDelete: onDelete ? () => onDelete(resource) : undefined, badges: _jsxs(_Fragment, { children: [_jsx(Badge, { variant: "outline", children: m.common.resourceKindLabels[resource.kind] }), _jsx(Badge, { variant: resource.active ? "default" : "secondary", children: resource.active ? m.common.active : m.common.inactive })] }), actions: resource.supplierId && onOpenSupplier ? (_jsxs(Button, { type: "button", variant: "outline", onClick: () => onOpenSupplier(resource.supplierId), children: [_jsx(Users, { "data-icon": "inline-start", "aria-hidden": "true" }), page.common.openSupplier] })) : null }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(ResourceDetailCard, { title: page.resource.detailsTitle, children: [_jsx(ResourceDetailField, { label: page.common.supplier, children: supplierLabel }), _jsx(ResourceDetailField, { label: page.common.code, children: resource.code ?? page.common.noValue }), _jsx(ResourceDetailField, { label: page.common.capacity, children: resource.capacity ?? page.common.noValue }), _jsx(ResourceDetailField, { label: page.common.created, children: i18n.formatDateTime(resource.createdAt) }), _jsx(ResourceDetailField, { label: page.common.updated, children: i18n.formatDateTime(resource.updatedAt) })] }), resource.notes ? (_jsx(ResourceDetailCard, { title: page.common.notes, children: _jsx("p", { className: "whitespace-pre-wrap", children: resource.notes }) })) : null] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Package, { className: "size-4", "aria-hidden": "true" }), _jsx(CardTitle, { children: page.resource.poolMembershipsTitle })] }), _jsx(CardContent, { className: "flex flex-col gap-3 text-sm", children: (poolMembersQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: page.resource.poolMembershipsEmpty })) : (poolMembersQuery.data?.data.map((member) => {
+                            const pool = poolsById.get(member.poolId);
+                            return (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("div", { className: "font-medium", children: pool?.name ?? member.poolId }), _jsxs("div", { className: "text-muted-foreground", children: [page.common.product, ": ", pool?.productId ?? page.common.noValue] })] }, member.id));
+                        })) })] }), _jsxs(Card, { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Wrench, { className: "size-4", "aria-hidden": "true" }), _jsx(CardTitle, { children: page.resource.assignmentsTitle })] }), _jsx(CardContent, { className: "flex flex-col gap-3 text-sm", children: (assignmentsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: page.resource.assignmentsEmpty })) : (assignmentsQuery.data?.data.map((assignment) => (_jsx(ResourceAssignmentSummary, { assignment: assignment, pool: undefined, slotLabel: slotsById.get(assignment.slotId)
+                                ? formatResourceSlotLabel(slotsById.get(assignment.slotId), {
+                                    template: m.common.slotLabel,
+                                    formatDate: i18n.formatDate,
+                                })
+                                : assignment.slotId, bookingLabel: bookingsById.get(assignment.bookingId ?? "")?.bookingNumber ??
+                                assignment.bookingId ??
+                                page.common.noBooking, noValue: page.common.noValue, onOpenAssignment: onOpenAssignment }, assignment.id)))) })] }), _jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: page.resource.closeoutsTitle }) }), _jsx(CardContent, { className: "flex flex-col gap-3 text-sm", children: (closeoutsQuery.data?.data.length ?? 0) === 0 ? (_jsx("p", { className: "text-muted-foreground", children: page.resource.closeoutsEmpty })) : (closeoutsQuery.data?.data.map((closeout) => (_jsxs("div", { className: "rounded-md border p-3", children: [_jsx("div", { className: "font-medium", children: closeout.dateLocal }), _jsxs("div", { className: "text-muted-foreground", children: [formatDateTimeOrFallback(closeout.startsAt, {
+                                            fallback: page.common.noValue,
+                                            formatDateTime: i18n.formatDateTime,
+                                        }), " ", page.common.to, " ", formatDateTimeOrFallback(closeout.endsAt, {
+                                            fallback: page.common.noValue,
+                                            formatDateTime: i18n.formatDateTime,
+                                        })] }), _jsxs("div", { className: "text-muted-foreground", children: [page.resource.createdBy, ": ", closeout.createdBy ?? page.common.noValue] }), closeout.reason ? (_jsx("div", { className: "mt-2 whitespace-pre-wrap", children: closeout.reason })) : null] }, closeout.id)))) })] })] }));
+}
+export function ResourceDetailSkeleton() {
+    return _jsx(BaseResourceDetailSkeleton, { actionCount: 2, detailRows: 5, stackedCards: 3 });
+}
+function useAssignmentsByResource(resourceId) {
+    return useAssignments({ resourceId, limit: 25 });
+}
+export function ResourceAssignmentSummary({ assignment, bookingLabel, noValue, onOpenAssignment, pool, slotLabel, }) {
+    const i18n = useResourcesUiI18nOrDefault();
+    const m = i18n.messages;
+    const page = m.detailPages;
+    const content = (_jsxs(_Fragment, { children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Badge, { variant: "outline", children: m.common.assignmentStatusLabels[assignment.status] }), _jsx("span", { children: slotLabel })] }), _jsxs("div", { className: "mt-2 text-muted-foreground", children: [page.common.booking, ": ", bookingLabel] }), pool ? (_jsxs("div", { className: "text-muted-foreground", children: [page.common.pool, ": ", pool.name] })) : null, _jsxs("div", { className: "text-muted-foreground", children: [page.resource.assignedBy, ": ", assignment.assignedBy ?? noValue, " · ", page.resource.released, ":", " ", formatDateTimeOrFallback(assignment.releasedAt, {
+                        fallback: noValue,
+                        formatDateTime: i18n.formatDateTime,
+                    })] }), assignment.notes ? _jsx("div", { className: "mt-2 whitespace-pre-wrap", children: assignment.notes }) : null] }));
+    if (!onOpenAssignment) {
+        return _jsx("div", { className: "rounded-md border p-3", children: content });
+    }
+    return (_jsx("button", { type: "button", className: "block w-full rounded-md border p-3 text-left hover:bg-muted/40", onClick: () => onOpenAssignment(assignment.id), children: content }));
+}

package/dist/components/resource-detail-shared.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from "react";
+export type ConfirmAction = (message: string) => boolean;
+export declare const defaultConfirmAction: ConfirmAction;
+export declare function ResourceDetailField({ label, children }: {
+    label: string;
+    children: ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceDetailState({ className, message, onBack, }: {
+    className?: string;
+    message: string;
+    onBack?: () => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceDetailCard({ children, className, title, }: {
+    children: ReactNode;
+    className?: string;
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceDetailHeader({ actions, badges, className, confirmAction, deleteConfirmName, deleteConfirmTemplate, deleteErrorMessage, deleting: deletingProp, onBack, onDelete, title, }: {
+    actions?: ReactNode;
+    badges?: ReactNode;
+    className?: string;
+    confirmAction?: ConfirmAction;
+    deleteConfirmName: string;
+    deleteConfirmTemplate: string;
+    deleteErrorMessage: string;
+    deleting?: boolean;
+    onBack?: () => void;
+    onDelete?: () => Promise<void> | void;
+    title: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ResourceDetailSkeleton({ actionCount, detailRows, showNotes, stackedCards, }: {
+    actionCount: number;
+    detailRows: number;
+    showNotes?: boolean;
+    stackedCards?: number;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-detail-shared.d.ts.map

package/dist/components/resource-detail-shared.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-detail-shared.d.ts","sourceRoot":"","sources":["../../src/components/resource-detail-shared.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAKtC,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,KAAK,OAAO,CAAA;AAExD,eAAO,MAAM,oBAAoB,EAAE,aACI,CAAA;AAEvC,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,2CAO9F;AAED,wBAAgB,mBAAmB,CAAC,EAClC,SAAS,EACT,OAAO,EACP,MAAM,GACP,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,MAAM,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB,2CAaA;AAED,wBAAgB,kBAAkB,CAAC,EACjC,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE;IACD,QAAQ,EAAE,SAAS,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,EAAE,MAAM,CAAA;CACd,2CASA;AAED,wBAAgB,oBAAoB,CAAC,EACnC,OAAO,EACP,MAAM,EACN,SAAS,EACT,aAAoC,EACpC,iBAAiB,EACjB,qBAAqB,EACrB,kBAAkB,EAClB,QAAQ,EAAE,YAAY,EACtB,MAAM,EACN,QAAQ,EACR,KAAK,GACN,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,aAAa,CAAA;IAC7B,iBAAiB,EAAE,MAAM,CAAA;IACzB,qBAAqB,EAAE,MAAM,CAAA;IAC7B,kBAAkB,EAAE,MAAM,CAAA;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IACrC,KAAK,EAAE,MAAM,CAAA;CACd,2CA6DA;AAED,wBAAgB,sBAAsB,CAAC,EACrC,WAAW,EACX,UAAU,EACV,SAAgB,EAChB,YAAgB,GACjB,EAAE;IACD,WAAW,EAAE,MAAM,CAAA;IACnB,UAAU,EAAE,MAAM,CAAA;IAClB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,YAAY,CAAC,EAAE,MAAM,CAAA;CACtB,2CA8EA"}

package/dist/components/resource-detail-shared.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { formatMessage } from "@voyantjs/i18n";
+import { Button, Card, CardContent, CardHeader, CardTitle, cn } from "@voyantjs/ui/components";
+import { Skeleton } from "@voyantjs/ui/components/skeleton";
+import { ArrowLeft, Loader2, Trash2 } from "lucide-react";
+import { useState } from "react";
+import { useResourcesUiMessagesOrDefault } from "../i18n/index.js";
+export const defaultConfirmAction = (message) => globalThis.confirm?.(message) ?? true;
+export function ResourceDetailField({ label, children }) {
+    return (_jsxs("div", { className: "grid gap-1 sm:grid-cols-[10rem_minmax(0,1fr)] sm:gap-3", children: [_jsx("span", { className: "text-muted-foreground", children: label }), _jsx("span", { className: "min-w-0 break-words", children: children })] }));
+}
+export function ResourceDetailState({ className, message, onBack, }) {
+    const messages = useResourcesUiMessagesOrDefault();
+    return (_jsxs("div", { className: cn("flex flex-col items-center justify-center gap-4 py-12", className), children: [_jsx("p", { className: "text-muted-foreground", children: message }), onBack ? (_jsx(Button, { variant: "outline", onClick: onBack, children: messages.detailPages.common.backToResources })) : null] }));
+}
+export function ResourceDetailCard({ children, className, title, }) {
+    return (_jsxs(Card, { className: className, children: [_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) }), _jsx(CardContent, { className: "flex flex-col gap-3 text-sm", children: children })] }));
+}
+export function ResourceDetailHeader({ actions, badges, className, confirmAction = defaultConfirmAction, deleteConfirmName, deleteConfirmTemplate, deleteErrorMessage, deleting: deletingProp, onBack, onDelete, title, }) {
+    const messages = useResourcesUiMessagesOrDefault();
+    const [deletingState, setDeletingState] = useState(false);
+    const [deleteError, setDeleteError] = useState(null);
+    const deleting = deletingProp || deletingState;
+    async function handleDelete() {
+        if (!onDelete)
+            return;
+        setDeleteError(null);
+        const confirmed = confirmAction(formatMessage(deleteConfirmTemplate, { name: deleteConfirmName }));
+        if (!confirmed)
+            return;
+        setDeletingState(true);
+        try {
+            await onDelete();
+        }
+        catch (error) {
+            setDeleteError(error instanceof Error ? error.message : deleteErrorMessage);
+        }
+        finally {
+            setDeletingState(false);
+        }
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "flex flex-col gap-4 md:flex-row md:items-start md:justify-between", children: [_jsxs("div", { className: "flex min-w-0 items-start gap-3", children: [onBack ? (_jsxs(Button, { type: "button", variant: "ghost", size: "icon", onClick: onBack, children: [_jsx(ArrowLeft, { "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: messages.detailPages.common.backToResources })] })) : null, _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("h1", { className: "truncate text-2xl font-bold tracking-tight", children: title }), badges ? _jsx("div", { className: "mt-1 flex flex-wrap items-center gap-2", children: badges }) : null] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [actions, onDelete ? (_jsxs(Button, { type: "button", variant: "destructive", onClick: () => void handleDelete(), disabled: deleting, children: [deleting ? (_jsx(Loader2, { "data-icon": "inline-start", className: "animate-spin", "aria-hidden": "true" })) : (_jsx(Trash2, { "data-icon": "inline-start", "aria-hidden": "true" })), messages.detailPages.common.delete] })) : null] })] }), deleteError ? _jsx("p", { className: "text-sm text-destructive", children: deleteError }) : null] }));
+}
+export function ResourceDetailSkeleton({ actionCount, detailRows, showNotes = true, stackedCards = 2, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-6 p-6", children: [_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(Skeleton, { className: "size-9 rounded-md" }), _jsxs("div", { className: "flex flex-1 flex-col gap-2", children: [_jsx(Skeleton, { className: "h-7 w-56" }), _jsxs("div", { className: "flex gap-2", children: [_jsx(Skeleton, { className: "h-5 w-16 rounded-full" }), _jsx(Skeleton, { className: "h-5 w-20 rounded-full" })] })] }), Array.from({ length: actionCount }).map((_, index) => (_jsx(Skeleton
+                    // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder
+                    , { className: "h-9 w-28" }, index)))] }), _jsxs("div", { className: "grid gap-6 md:grid-cols-2", children: [_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-36" }) }), _jsx(CardContent, { className: "flex flex-col gap-3", children: Array.from({ length: detailRows }).map((_, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-28" }), _jsx(Skeleton, { className: "h-3.5 w-40" })] }, index))) })] }), showNotes ? (_jsxs(Card, { children: [_jsx(CardHeader, { children: _jsx(Skeleton, { className: "h-5 w-16" }) }), _jsxs(CardContent, { className: "flex flex-col gap-2", children: [_jsx(Skeleton, { className: "h-3.5 w-full" }), _jsx(Skeleton, { className: "h-3.5 w-3/4" }), _jsx(Skeleton, { className: "h-3.5 w-2/3" })] })] })) : null] }), Array.from({ length: stackedCards }).map((_, cardIndex) => (_jsxs(Card
+            // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder
+            , { children: [_jsxs(CardHeader, { className: "flex flex-row items-center gap-2", children: [_jsx(Skeleton, { className: "size-4" }), _jsx(Skeleton, { className: "h-5 w-36" })] }), _jsx(CardContent, { className: "flex flex-col gap-3", children: Array.from({ length: 2 }).map((_, rowIndex) => (_jsxs("div", { className: "flex flex-col gap-2 rounded-md border p-3", children: [_jsx(Skeleton, { className: "h-4 w-48" }), _jsx(Skeleton, { className: "h-3 w-64 max-w-full" })] }, rowIndex))) })] }, cardIndex)))] }));
+}

package/dist/components/resource-pool-detail-page.d.ts

@@ -0,0 +1,21 @@
+import { type ResourceAllocationRow, type ResourcePoolDetail } from "@voyantjs/resources-react";
+import { type ConfirmAction } from "./resource-detail-shared.js";
+export interface ResourcePoolDetailPageProps {
+    id: string;
+    className?: string;
+    deleting?: boolean;
+    onBack?: () => void;
+    onDelete?: (pool: ResourcePoolDetail) => Promise<void> | void;
+    onOpenAllocation?: (allocationId: string) => void;
+    onOpenProduct?: (productId: string) => void;
+    onOpenResource?: (resourceId: string) => void;
+    onOpenAssignment?: (assignmentId: string) => void;
+    confirmAction?: ConfirmAction;
+}
+export declare function ResourcePoolDetailPage({ className, confirmAction, deleting, id, onBack, onDelete, onOpenAllocation, onOpenAssignment, onOpenProduct, onOpenResource, }: ResourcePoolDetailPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function ResourcePoolDetailSkeleton(): import("react/jsx-runtime").JSX.Element;
+export declare function PoolAllocationSummary({ allocation, onOpenAllocation, }: {
+    allocation: ResourceAllocationRow;
+    onOpenAllocation?: (allocationId: string) => void;
+}): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=resource-pool-detail-page.d.ts.map

package/dist/components/resource-pool-detail-page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resource-pool-detail-page.d.ts","sourceRoot":"","sources":["../../src/components/resource-pool-detail-page.tsx"],"names":[],"mappings":"AAEA,OAAO,EAEL,KAAK,qBAAqB,EAC1B,KAAK,kBAAkB,EAQxB,MAAM,2BAA2B,CAAA;AAgBlC,OAAO,EAEL,KAAK,aAAa,EAKnB,MAAM,6BAA6B,CAAA;AAEpC,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAA;IACV,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAA;IAC7D,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,aAAa,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAA;IAC3C,cAAc,CAAC,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;IACjD,aAAa,CAAC,EAAE,aAAa,CAAA;CAC9B;AAED,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,aAAa,EACb,QAAQ,EACR,EAAE,EACF,MAAM,EACN,QAAQ,EACR,gBAAgB,EAChB,gBAAgB,EAChB,aAAa,EACb,cAAc,GACf,EAAE,2BAA2B,2CA0L7B;AAED,wBAAgB,0BAA0B,4CAEzC;AAED,wBAAgB,qBAAqB,CAAC,EACpC,UAAU,EACV,gBAAgB,GACjB,EAAE;IACD,UAAU,EAAE,qBAAqB,CAAA;IACjC,gBAAgB,CAAC,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD,2CAsCA"}