@mohasinac/appkit 4.71.0 → 4.71.2

package/dist/features/admin/components/AdminPaymentClustersView.js

@@ -13,11 +13,12 @@ import { ROUTES } from "../../../next/routing/route-map.js";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { apiClient } from "../../../http/index.js";
 import { useApiMutation } from "@mohasinac/appkit/client";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const BAN_BADGE = {
     banned: "danger",
     suspicious: "secondary",
 };
-export function AdminPaymentClustersView(_props) {
+export function AdminPaymentClustersView({ pageRegionCards = [] }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const { data, isLoading, error } = useQuery({
@@ -54,5 +55,5 @@ export function AdminPaymentClustersView(_props) {
         },
     });
     const clusters = data?.clusters ?? [];
-    return (_jsxs(Stack, { gap: "lg", padding: "page", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", color: "primary", children: "Payment Method Clusters" }), _jsx(Text, { size: "sm", color: "muted", className: "mt-1", children: "Multiple accounts sharing the same payment identifier. Flagging is informational only \u2014 users are not blocked." })] }), isLoading && (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), error && (_jsx(Div, { surface: "danger-surface", color: "error", padding: "inline", rounded: "xl", textSize: "sm", children: "Failed to load payment clusters." })), !isLoading && clusters.length === 0 && (_jsx(Div, { surface: "muted", padding: "y-4xl", rounded: "xl", className: "text-center", children: _jsx(Text, { color: "muted", size: "sm", children: "No shared payment identifiers found." }) })), clusters.map((cluster) => (_jsxs(Stack, { surface: "card", padding: "md", gap: "md", rounded: "xl", border: "default", children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", children: "Identifier Hash" }), _jsx(Span, { size: "xs", color: "muted", className: "font-mono truncate max-w-xs", children: cluster.identifierHash })] }), _jsxs(Badge, { variant: "secondary", size: "sm", children: [cluster.methods.length, " accounts"] })] }), _jsx(Stack, { gap: "xs", children: cluster.methods.map((m) => (_jsxs(Row, { justify: "between", align: "center", gap: "sm", surface: "muted", padding: "inlineSm", rounded: "lg", children: [_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", color: "primary", className: "truncate", children: [m.type.toUpperCase(), " \u00B7 ", m.displayLabel] }), _jsxs(TextLink, { href: String(ROUTES.ADMIN.USER_DETAIL(m.userId)), size: "xs", children: ["User: ", m.userId] })] }), _jsxs(Row, { gap: "xs", align: "center", children: [m.banStatus && (_jsx(Badge, { variant: BAN_BADGE[m.banStatus] ?? "secondary", size: "sm", children: m.banStatus.replace(/_/g, " ") })), m.banStatus === "suspicious" ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => clearFlagMutation.mutate(m.id), disabled: clearFlagMutation.isPending, children: "Clear flag" })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => flagMutation.mutate(m.id), disabled: flagMutation.isPending, children: "Flag Suspicious" }))] })] }, m.id))) })] }, cluster.identifierHash)))] }));
+    return (_jsxs(Stack, { gap: "lg", padding: "page", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Heading, { level: 2, size: "lg", weight: "semibold", color: "primary", children: "Payment Method Clusters" }), _jsx(Text, { size: "sm", color: "muted", className: "mt-1", children: "Multiple accounts sharing the same payment identifier. Flagging is informational only \u2014 users are not blocked." })] }), _jsx(AdminComposableRegion, { pageId: "admin-payment-methods-clusters", initialCards: pageRegionCards }), isLoading && (_jsx(Row, { justify: "center", padding: "y-4xl", children: _jsx(Div, { className: "h-6 w-6 animate-spin border-2 border-[var(--appkit-color-primary)] border-t-transparent", rounded: "full" }) })), error && (_jsx(Div, { surface: "danger-surface", color: "error", padding: "inline", rounded: "xl", textSize: "sm", children: "Failed to load payment clusters." })), !isLoading && clusters.length === 0 && (_jsx(Div, { surface: "muted", padding: "y-4xl", rounded: "xl", className: "text-center", children: _jsx(Text, { color: "muted", size: "sm", children: "No shared payment identifiers found." }) })), clusters.map((cluster) => (_jsxs(Stack, { surface: "card", padding: "md", gap: "md", rounded: "xl", border: "default", children: [_jsxs(Row, { justify: "between", align: "start", gap: "sm", children: [_jsxs(Stack, { gap: "none", children: [_jsx(Text, { size: "xs", color: "muted", weight: "medium", children: "Identifier Hash" }), _jsx(Span, { size: "xs", color: "muted", className: "font-mono truncate max-w-xs", children: cluster.identifierHash })] }), _jsxs(Badge, { variant: "secondary", size: "sm", children: [cluster.methods.length, " accounts"] })] }), _jsx(Stack, { gap: "xs", children: cluster.methods.map((m) => (_jsxs(Row, { justify: "between", align: "center", gap: "sm", surface: "muted", padding: "inlineSm", rounded: "lg", children: [_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsxs(Text, { size: "sm", weight: "medium", color: "primary", className: "truncate", children: [m.type.toUpperCase(), " \u00B7 ", m.displayLabel] }), _jsxs(TextLink, { href: String(ROUTES.ADMIN.USER_DETAIL(m.userId)), size: "xs", children: ["User: ", m.userId] })] }), _jsxs(Row, { gap: "xs", align: "center", children: [m.banStatus && (_jsx(Badge, { variant: BAN_BADGE[m.banStatus] ?? "secondary", size: "sm", children: m.banStatus.replace(/_/g, " ") })), m.banStatus === "suspicious" ? (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => clearFlagMutation.mutate(m.id), disabled: clearFlagMutation.isPending, children: "Clear flag" })) : (_jsx(Button, { size: "sm", variant: "ghost", onClick: () => flagMutation.mutate(m.id), disabled: flagMutation.isPending, children: "Flag Suspicious" }))] })] }, m.id))) })] }, cluster.identifierHash)))] }));
 }

package/dist/features/admin/components/AdminPaymentMethodsView.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminPaymentMethodsViewProps {
     children?: React.ReactNode;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function AdminPaymentMethodsView(_props: AdminPaymentMethodsViewProps): React.JSX.Element;
+export declare function AdminPaymentMethodsView({ pageRegionCards }: AdminPaymentMethodsViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminPaymentMethodsView.js

@@ -18,6 +18,7 @@ import { DataListingView } from "./DataListingView.js";
 import { apiClient } from "../../../http/index.js";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import { QuickEditMenu } from "./QuickEditMenu.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const BAN_STATUS_TABS = [
     { id: "", label: "All" },
     { id: "banned", label: "Banned" },
@@ -124,7 +125,7 @@ onOpen) {
         },
     };
 }
-export function AdminPaymentMethodsView(_props) {
+export function AdminPaymentMethodsView({ pageRegionCards = [] }) {
     const [detail, setDetail] = useState(null);
     // Independent useUrlTable() against the same URL param the listing reads
     // via filterKeys (Root Cause #35 pattern).
@@ -157,5 +158,5 @@ export function AdminPaymentMethodsView(_props) {
                         { label: "Banned at", value: toRelativeDate(d.bannedAt) },
                         { label: "Method ID", value: detail?.id ?? "—" },
                     ] : undefined;
-                })() }), _jsx(Div, { padding: "inline", border: "default", className: "border-b", children: _jsx(FilterChipGroup, { label: "Status", tabs: BAN_STATUS_TABS, value: banStatus, onChange: (v) => chipTable.set("banStatus", v) }) }), _jsx(DataListingView, { config: config })] }));
+                })() }), _jsx(Div, { padding: "inline", border: "default", className: "border-b", children: _jsx(FilterChipGroup, { label: "Status", tabs: BAN_STATUS_TABS, value: banStatus, onChange: (v) => chipTable.set("banStatus", v) }) }), _jsx(AdminComposableRegion, { pageId: "admin-payment-methods", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config })] }));
 }

package/dist/features/admin/components/AdminPaymentsGuideView.d.ts

@@ -1,2 +1,7 @@
 import React from "react";
-export declare function AdminPaymentsGuideView(): React.JSX.Element;
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+export interface AdminPaymentsGuideViewProps {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+}
+export declare function AdminPaymentsGuideView({ pageRegionCards }: AdminPaymentsGuideViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminPaymentsGuideView.js

@@ -5,8 +5,9 @@ import { Div } from "../../../ui/components/Div.js";
 import { Heading, Span, Text } from "../../../ui/components/Typography.js";
 import { Row, Stack } from "../../../ui/components/Layout.js";
 import { GC } from "../../_guide-cls.js";
-export function AdminPaymentsGuideView() {
-    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: "flex-shrink-0 w-10 h-10 [background:linear-gradient(135deg,var(--appkit-color-primary-700)_0%,var(--appkit-color-cobalt)_100%)]", align: "center", justify: "center", rounded: "xl", children: _jsx(CreditCard, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Payments (Razorpay)" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Razorpay is disabled by default on this platform \u2014 manual UPI/bank transfer and Cash on Delivery are the default payment methods. Enable Razorpay only once you have real (or test-mode) API keys." })] }), [
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export function AdminPaymentsGuideView({ pageRegionCards = [] }) {
+    return (_jsxs(Stack, { className: "max-w-3xl mx-auto", padding: "b-2xl", gap: "xl", children: [_jsxs(Section, { children: [_jsxs(Row, { className: "mb-2", align: "center", gap: "3", children: [_jsx(Row, { className: `flex-shrink-0 w-10 h-10 ${GC.iconBg}`, align: "center", justify: "center", rounded: "xl", children: _jsx(CreditCard, { className: GC.iconPrimary }) }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)] tracking-widest", size: "sm", weight: "semibold", transform: "uppercase", children: "Admin Guide" })] }), _jsx(Heading, { level: 1, className: "text-[var(--appkit-color-text)] mb-2", mdSize: "3xl", size: "2xl", weight: "bold", children: "Payments (Razorpay)" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Razorpay is disabled by default on this platform \u2014 manual UPI/bank transfer and Cash on Delivery are the default payment methods. Enable Razorpay only once you have real (or test-mode) API keys." })] }), _jsx(AdminComposableRegion, { pageId: "admin-guide-payments", initialCards: pageRegionCards }), [
                 {
                     Icon: CreditCard, title: "Create a Razorpay Account",
                     content: (_jsxs(Ul, { className: GC.listMuted, children: [_jsxs(Li, { children: ["Sign up at ", _jsx(Span, { weight: "bold", children: "razorpay.com" }), "."] }), _jsxs(Li, { children: ["For development, use ", _jsx(Span, { weight: "bold", children: "Test Mode" }), " keys \u2014 no real money moves and no KYC is required to start integrating."] })] })),

package/dist/features/admin/components/AdminPayoutsView.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminPayoutsViewProps = ListingLayoutProps;
-export declare function AdminPayoutsView({ children, ...props }: AdminPayoutsViewProps): React.JSX.Element;
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+export type AdminPayoutsViewProps = ListingLayoutProps & {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+};
+export declare function AdminPayoutsView({ children, pageRegionCards, ...props }: AdminPayoutsViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminPayoutsView.js

@@ -21,7 +21,8 @@ import { ADMIN_BULK_ACTIONS, ROW_ACTION_META } from "../../products/constants/ac
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData.js";
 import { DataListingView } from "./DataListingView.js";
 import { apiClient } from "../../../http/index.js";
-export function AdminPayoutsView({ children, ...props }) {
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export function AdminPayoutsView({ children, pageRegionCards = [], ...props }) {
     const router = useRouter();
     const [markPaidOpen, setMarkPaidOpen] = useState(false);
     const [selectedPayoutId, setSelectedPayoutId] = useState(null);
@@ -153,7 +154,7 @@ export function AdminPayoutsView({ children, ...props }) {
                         { id: "true", label: "Show all" },
                     ], value: pendingFilters.showAllPayouts ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showAllPayouts: id })), allId: "" })] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminPayoutMarkPaidModal, { isOpen: markPaidOpen, payoutId: selectedPayoutId, onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-payouts", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), _jsx(AdminPayoutMarkPaidModal, { isOpen: markPaidOpen, payoutId: selectedPayoutId, onClose: () => {
                     setMarkPaidOpen(false);
                     setSelectedPayoutId(null);
                 } })] }));

package/dist/features/admin/components/AdminProductEditorView.d.ts

@@ -2,8 +2,13 @@ import React from "react";
 import type { StackedViewShellProps } from "../../../ui/components/StackedViewShell";
 import type { ProductFormValue } from "../../products/components/ProductForm";
 import type { ListingType } from "../../products/types";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminProductEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
     productId?: string;
+    /** Page-region id for this screen (Phase 12) — required because this View is mounted from two different routes (new vs edit), plus embedded in a drawer, each with its own id. */
+    pageId: string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
     onSaved?: (id: string) => void;
     onDeleted?: () => void;
     embedded?: boolean;
@@ -25,4 +30,4 @@ export interface AdminProductEditorViewProps extends Omit<StackedViewShellProps,
      */
     initialListingType?: ListingType;
 }
-export declare function AdminProductEditorView({ productId, onSaved, onDeleted, embedded, enabledListingTypes, initialData, initialListingType, ...rest }: AdminProductEditorViewProps): React.JSX.Element;
+export declare function AdminProductEditorView({ productId, pageId, pageRegionCards, onSaved, onDeleted, embedded, enabledListingTypes, initialData, initialListingType, ...rest }: AdminProductEditorViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminProductEditorView.js

@@ -38,6 +38,7 @@ import { GroupInlineSelect } from "../../seller/components/GroupInlineSelect.js"
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm.js";
 import { BrandQuickCreateForm } from "./BrandQuickCreateForm.js";
 import { BarcodeField } from "../../seller/components/BarcodeField.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const __P = {
     p4: "p-[var(--appkit-space-4)]",
     sectionLabel: "tracking-widest mb-4",
@@ -95,7 +96,7 @@ const EMPTY_PRODUCT = {
     // SB1-G Phase 4 — listingType is the only listing-kind field on the schema.
     listingType: "standard",
 };
-export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded, enabledListingTypes, initialData, initialListingType, ...rest }) {
+export function AdminProductEditorView({ productId, pageId, pageRegionCards = [], onSaved, onDeleted, embedded, enabledListingTypes, initialData, initialListingType, ...rest }) {
     const isEdit = Boolean(productId);
     const startType = initialListingType ?? "standard";
     const [product, setProduct] = React.useState(() => applyMode(EMPTY_PRODUCT, startType));
@@ -219,7 +220,7 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
                                                 groupMaxUnitsPerMember: p.groupMaxUnitsPerMember,
                                                 groupRequiredMemberIds: p.groupRequiredMemberIds,
                                                 groupDiscountPercent: p.groupDiscountPercent,
-                                            }, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: ADMIN_ENDPOINTS.PRODUCTS, onGroupChanged: () => productQuery.refetch() }))
+                                            }, isCollectorDrop: modeFromProduct(p) === "collector-drop", storeProductsEndpoint: ADMIN_ENDPOINTS.PRODUCTS, onGroupChanged: () => productQuery.refetch() }))
                                         : undefined, renderGroupJoinField: ({ label, value, onChange, disabled }) => (_jsx(GroupInlineSelect, { scope: "admin", value: value ?? "", onChange: (id) => onChange(id || undefined), disabled: disabled, label: label, placeholder: "None (standalone product)", allowCreate: false })), renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: label }), _jsx(PaginatedSelect, { name: "categorySlug", value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: args.label }), _jsx(PaginatedSelect, { name: "brandSlug", value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }) })),
         },
         {
@@ -277,5 +278,8 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
         return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }
     const twoPanel = (_jsxs(Div, { layout: "grid", gap: "6", lgAlign: "start", className: "lg:grid-cols-[1fr_280px]", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-[var(--appkit-space-0)]", children: formContent }), _jsx(Show, { above: "lg", children: _jsx(StickyToolbar, { offset: "header", tone: "default", border: false, padding: "none", children: actionSidebar }) })] }));
-    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [twoPanel] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this product?", message: "This product will be permanently removed. This action cannot be undone.", confirmText: "Delete product", variant: "danger" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [
+                    _jsx(AdminComposableRegion, { pageId: pageId, initialCards: pageRegionCards }, "page-region"),
+                    twoPanel,
+                ] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this product?", message: "This product will be permanently removed. This action cannot be undone.", confirmText: "Delete product", variant: "danger" })] }));
 }

package/dist/features/admin/components/AdminProductsView.d.ts

@@ -1,8 +1,11 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
 import type { AdminListingScaffoldRow } from "./DataListingView";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminProductsViewProps extends ListingLayoutProps {
     actionHref?: string;
     getRowHref?: (row: AdminListingScaffoldRow) => string;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function AdminProductsView({ children, ...props }: AdminProductsViewProps): React.JSX.Element;
+export declare function AdminProductsView({ children, pageRegionCards, ...props }: AdminProductsViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminProductsView.js

@@ -1,27 +1,58 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
-import { SIEVE_OP, Stack, sieveFilter, Row } from "@mohasinac/appkit/client";
+import { Stack, Row } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
 import { ListingLayout } from "../../../ui/components/ListingLayout.js";
 import { Span, Text } from "../../../ui/components/Typography.js";
 import { Toggle } from "../../../ui/components/Toggle.js";
+import { Badge } from "../../../ui/components/Badge.js";
+import { humaniseFieldName } from "../../shell/entity-form.js";
 import { useToast } from "../../../ui/components/toast-context.js";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints.js";
 import { ADMIN_PRODUCT_STATUS_TABS, ADMIN_PRODUCT_LISTING_TYPE_TABS, } from "../constants/filter-tabs.js";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData.js";
 import { DataListingView } from "./DataListingView.js";
-import { FilterChipGroup } from "../../../ui/components/FilterChipGroup.js";
+import { buildFilterPanel } from "../hooks/build-filter-panel.js";
 import { apiClient } from "../../../http/index.js";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
 import { AdminProductEditorView } from "./AdminProductEditorView.js";
 import { QuickEditMenu } from "./QuickEditMenu.js";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs.js";
-import { parseSelectedListingTypes } from "../../products/utils/listing-type.js";
+import { isCollectorDropListing } from "../../products/utils/listing-type.js";
 import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope.js";
 import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags.js";
 import { formatMoney } from "../../../utils/number.formatter.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+/**
+ * Pilot conversion (3B/5B, overhaul brief) — this view's `filterKeys`/
+ * `buildFilters`/`renderFilterPanel` trio used to be hand-written (see
+ * `build-filter-panel.tsx`'s own doc comment for why `SIEVE_FIELDS` alone
+ * can't drive this); both chips reduce exactly to `buildFilterPanel`'s two
+ * supported shapes — single-select equality (`status`) and multi-select
+ * OR-group (`type`, which filters the differently-named `listingType`
+ * Sieve field) — so nothing here is hand-written anymore.
+ */
+const PRODUCTS_FILTER_PANEL = buildFilterPanel([
+    { key: "status", label: "Status", tabs: ADMIN_PRODUCT_STATUS_TABS },
+    { key: "type", label: "Type", tabs: ADMIN_PRODUCT_LISTING_TYPE_TABS, multiple: true, sieveField: "listingType" },
+]);
+/**
+ * Status → `Badge` variant, matching the restrained, already-correct
+ * color-coded system orders already use (`SellerOrdersView.tsx`).
+ *
+ * 🛑 Was one fixed `bg-primary-50 text-primary-800` class for EVERY
+ * status (no color-coding at all), whose `dark:` pair used a different
+ * color family than light mode — an internal inconsistency, not a style
+ * choice (owner's direct correction, 2026-11-05; `known-bugs.md:84`).
+ */
+const PRODUCT_STATUS_VARIANT = {
+    draft: "default",
+    published: "success",
+    in_review: "pending",
+    archived: "inactive",
+};
 const FLAG_DEFS = [
     { key: "featured", label: "Featured" },
     { key: "isPromoted", label: "Promoted" },
@@ -40,12 +71,24 @@ function buildBaseColumns() {
             sortable: true,
             render: (row) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { weight: "semibold", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", children: row.secondary })] })),
         },
+        {
+            key: "price",
+            header: "Price",
+            className: "w-28 text-right",
+            render: (row) => (_jsx(Span, { size: "sm", weight: "medium", children: typeof row.price === "number" ? formatMoney(row.price) : _jsx(Span, { color: "faint", children: "\u2014" }) })),
+        },
+        {
+            key: "stockQuantity",
+            header: "Stock",
+            className: "w-24 text-right",
+            render: (row) => (_jsx(Span, { size: "sm", weight: "medium", children: typeof row.stockQuantity === "number" ? row.stockQuantity : _jsx(Span, { color: "faint", children: "\u2014" }) })),
+        },
         {
             key: "status",
             header: "Status",
             sortable: true,
             className: "w-36",
-            render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", rounded: "full", padding: "pill-sm-tall", children: row.status })),
+            render: (row) => (_jsx(Badge, { variant: row.status ? (PRODUCT_STATUS_VARIANT[row.status] ?? "default") : "default", children: row.status ? humaniseFieldName(row.status) : "—" })),
         },
         {
             key: "updatedAt",
@@ -56,7 +99,7 @@ function buildBaseColumns() {
         },
     ];
 }
-export function AdminProductsView({ children, ...props }) {
+export function AdminProductsView({ children, pageRegionCards = [], ...props }) {
     const [overrides, setOverrides] = useState({});
     const { showToast } = useToast();
     // Mirrors the raw API record per row id (ProductRow itself is the shared
@@ -205,7 +248,7 @@ export function AdminProductsView({ children, ...props }) {
             ],
         },
         emptyLabel: "No products found",
-        filterKeys: ["status", "type"],
+        filterKeys: PRODUCTS_FILTER_PANEL.filterKeys,
         defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "products", "listing"],
         endpoint: ADMIN_ENDPOINTS.PRODUCTS,
@@ -231,18 +274,18 @@ export function AdminProductsView({ children, ...props }) {
         mapRows: (response) => toRecordArray(response.items).map((item, index) => {
             const id = toStringValue(item.id, `product-${index}`);
             rawByIdRef.current[id] = item;
-            // Auction listings lost their reserve/bid/end-date summary when this
+            // Collector Drop listings lost their reserve/bid/end-date summary when this
             // view was consolidated onto the shared Products listing — restore
             // it into `secondary` instead of seller/SKU, which admins reviewing
-            // an auction care about far less than bid activity.
-            const auctionSecondary = item.listingType === "auction"
+            // a collector drop care about far less than bid activity.
+            const collectorDropSecondary = isCollectorDropListing(item)
                 ? [
                     typeof item.reservePrice === "number"
                         ? `Reserve ${formatMoney(item.reservePrice)}`
                         : null,
                     `${typeof item.bidCount === "number" ? item.bidCount : 0} bids`,
-                    item.auctionEndDate
-                        ? `Ends ${new Date(item.auctionEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
+                    item.collectorDropEndDate
+                        ? `Ends ${new Date(item.collectorDropEndDate).toLocaleDateString("en-IN", { month: "short", day: "numeric" })}`
                         : null,
                 ]
                     .filter(Boolean)
@@ -280,18 +323,17 @@ export function AdminProductsView({ children, ...props }) {
                  * index; until it exists, a row that says "No SKU" on every product
                  * tells an admin nothing except that we asked.
                  */
-                secondary: auctionSecondary ||
-                    [
-                        toStringValue(item.storeName, "No store"),
-                        typeof item.price === "number"
-                            ? formatMoney(item.price)
-                            : null,
-                        typeof item.stockQuantity === "number"
-                            ? `${item.stockQuantity} in stock`
-                            : null,
-                    ]
-                        .filter(Boolean)
-                        .join(" · "),
+                /*
+                 * 🛑 Price/stock were ALSO in this join, duplicating the real
+                 * `price`/`stockQuantity` columns added above — both numbers
+                 * rendered twice per row, the opposite of this view's own stated
+                 * "net element count must not increase" requirement. Found live,
+                 * 2026-11-02. `secondary` is the seller name only now; the real
+                 * columns are the only place price/stock render.
+                 */
+                secondary: collectorDropSecondary || toStringValue(item.storeName, "No store"),
+                price: typeof item.price === "number" ? item.price : undefined,
+                stockQuantity: typeof item.stockQuantity === "number" ? item.stockQuantity : undefined,
                 status: toStringValue(item.status, "Unknown"),
                 updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
                 featured: Boolean(item.featured),
@@ -304,27 +346,16 @@ export function AdminProductsView({ children, ...props }) {
             return overrides[id] ? { ...base, ...overrides[id] } : base;
         }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (state) => {
-            const parts = [];
-            if (state.status && state.status !== "All")
-                parts.push(sieveFilter("status", SIEVE_OP.EQ, state.status));
-            // `state.type` is a pipe-joined set of canonical ListingType values
-            // (multi-select chips). It used to be a single display LABEL resolved
-            // through a TYPE_FILTER_MAP lookup — an indirection that silently
-            // dropped `art` and `stickers`, which had no map entry.
-            const selectedTypes = parseSelectedListingTypes(state.type);
-            if (selectedTypes.length > 0) {
-                parts.push(sieveFilter("listingType", SIEVE_OP.EQ, selectedTypes.join("|")));
-            }
-            // Three drawer chips (Sold / Ended / Closed) used to live here, each
-            // emitting its own clause and each guarded by an `onlyType` check
-            // because `auctionEndDate` and `prizeRevealWindowEnd` do not exist on
-            // the other seven types. That guard meant the ended/closed filters
-            // silently did nothing on any mixed selection. The scope param replaces
-            // all three, and resolves the per-type meaning server-side — so it works
-            // across a mixed selection, which is the common case here.
-            return parts.join(",") || undefined;
-        },
+        // Three drawer chips (Sold / Ended / Closed) used to live here too, each
+        // emitting its own clause and each guarded by an `onlyType` check because
+        // `collectorDropEndDate` and `prizeRevealWindowEnd` do not exist on the
+        // other seven types. That guard meant the ended/closed filters silently
+        // did nothing on any mixed selection. The scope param (`buildExtraParams`
+        // below) replaces all three and resolves the per-type meaning
+        // server-side — so it works across a mixed selection, which is the
+        // common case here. `status`/`type` are the two that reduce to a plain
+        // Sieve equality/OR-group, now generated rather than hand-written.
+        buildFilters: PRODUCTS_FILTER_PANEL.buildFilters,
         buildExtraParams: () => scope.extraParams,
         renderAboveContent: scope.renderAboveContent,
         primaryAction: {
@@ -412,9 +443,9 @@ export function AdminProductsView({ children, ...props }) {
                     submitLabel: "Save",
                 },
             ] })),
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PRODUCT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) }), _jsx(FilterChipGroup, { multiple: true, label: "Type", tabs: ADMIN_PRODUCT_LISTING_TYPE_TABS, value: pendingFilters.type ?? "", onChange: (ids) => setPendingFilters((p) => ({ ...p, type: ids })) })] })),
-        renderEditor: ({ editId, closePanel }) => (_jsx(AdminProductEditorView, { productId: editId ?? undefined, initialData: editId ? rawByIdRef.current[editId] : undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
+        renderFilterPanel: PRODUCTS_FILTER_PANEL.renderFilterPanel,
+        renderEditor: ({ editId, closePanel }) => (_jsx(AdminProductEditorView, { productId: editId ?? undefined, pageId: editId ? "admin-products-id-edit" : "admin-products-new", initialData: editId ? rawByIdRef.current[editId] : undefined, onSaved: closePanel, onDeleted: closePanel, embedded: true })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Product" : "Edit Product"),
     };
-    return _jsx(DataListingView, { config: config });
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-products", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config })] }));
 }

package/dist/features/admin/components/AdminReturnRequestsView.d.ts

@@ -1,5 +1,8 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminReturnRequestsViewProps {
     children?: React.ReactNode;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
-export declare function AdminReturnRequestsView(_props: AdminReturnRequestsViewProps): React.JSX.Element;
+export declare function AdminReturnRequestsView({ pageRegionCards }: AdminReturnRequestsViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminReturnRequestsView.js

@@ -13,7 +13,8 @@ import { ROUTES } from "../../../next/routing/route-map.js";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData.js";
 import { DataListingView } from "./DataListingView.js";
 import { apiClient } from "../../../http/index.js";
-export function AdminReturnRequestsView(_props) {
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export function AdminReturnRequestsView({ pageRegionCards = [] }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [approveOpen, setApproveOpen] = useState(false);
@@ -92,7 +93,7 @@ export function AdminReturnRequestsView(_props) {
                 },
             ] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: approveOpen, onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-return-requests", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), _jsx(ConfirmDeleteModal, { isOpen: approveOpen, onClose: () => {
                     setApproveOpen(false);
                     setSelectedRow(null);
                 }, onConfirm: () => {

package/dist/features/admin/components/AdminReviewsView.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminReviewsViewProps = ListingLayoutProps;
-export declare function AdminReviewsView({ children, ...props }: AdminReviewsViewProps): React.JSX.Element;
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+export type AdminReviewsViewProps = ListingLayoutProps & {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+};
+export declare function AdminReviewsView({ children, pageRegionCards, ...props }: AdminReviewsViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminReviewsView.js

@@ -21,7 +21,8 @@ import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdmin
 import { DataListingView } from "./DataListingView.js";
 import { ViewReviewModal } from "../../reviews/components/ReviewModal.js";
 import { apiClient } from "../../../http/index.js";
-export function AdminReviewsView({ children, ...props }) {
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
+export function AdminReviewsView({ children, pageRegionCards = [], ...props }) {
     const queryClient = useQueryClient();
     const { showToast } = useToast();
     const [viewReview, setViewReview] = useState(null);
@@ -178,7 +179,7 @@ export function AdminReviewsView({ children, ...props }) {
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status (defaults to Pending)", tabs: ADMIN_REVIEW_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })), allId: "__all__" }), _jsx(FilterChipGroup, { label: "Rating", tabs: ADMIN_REVIEW_RATING_TABS, value: pendingFilters.rating ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, rating: id })) })] })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(ViewReviewModal, { review: viewReview, isOpen: Boolean(viewReview), onClose: () => setViewReview(null) }), _jsx(Modal, { isOpen: replyOpen, onClose: () => {
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-reviews", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), _jsx(ViewReviewModal, { review: viewReview, isOpen: Boolean(viewReview), onClose: () => setViewReview(null) }), _jsx(Modal, { isOpen: replyOpen, onClose: () => {
                     setReplyOpen(false);
                     setReplyText("");
                     setReplyTarget(null);

package/dist/features/admin/components/AdminScammersView.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
 import type { ListingLayoutProps } from "../../../ui/components/ListingLayout";
-export type AdminScammersViewProps = ListingLayoutProps;
-export declare function AdminScammersView({ children, ...props }: AdminScammersViewProps): React.JSX.Element;
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
+export type AdminScammersViewProps = ListingLayoutProps & {
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
+};
+export declare function AdminScammersView({ children, pageRegionCards, ...props }: AdminScammersViewProps): React.JSX.Element;

package/dist/features/admin/components/AdminScammersView.js

@@ -17,6 +17,7 @@ import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdmin
 import { DataListingView } from "./DataListingView.js";
 import { AdminScammerEditorView } from "./AdminScammerEditorView.js";
 import { SCAMMER_STATUS_BADGE, SCAMMER_STATUS_LABEL, toScammerStatus, } from "../../scams/constants/scammer-status-display.js";
+import { AdminComposableRegion } from "../../dashboard/components/AdminComposableRegion.js";
 const SCAMMER_COLUMNS = [
     {
         key: "primary",
@@ -36,7 +37,7 @@ const SCAMMER_COLUMNS = [
         render: (row) => (_jsx(Span, { size: "sm", color: "muted", children: row.updatedAt })),
     },
 ];
-export function AdminScammersView({ children, ...props }) {
+export function AdminScammersView({ children, pageRegionCards = [], ...props }) {
     const router = useRouter();
     const [drawerOpen, setDrawerOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
@@ -120,7 +121,7 @@ export function AdminScammersView({ children, ...props }) {
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_SCAMMER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(AdminScammerEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), scammerId: selectedRow?.id, displayNames: Array.isArray(selectedRow?._raw?.displayNames)
+    return (_jsxs(_Fragment, { children: [_jsx(AdminComposableRegion, { pageId: "admin-scammers", initialCards: pageRegionCards }), _jsx(DataListingView, { config: config }), _jsx(AdminScammerEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), scammerId: selectedRow?.id, displayNames: Array.isArray(selectedRow?._raw?.displayNames)
                     ? selectedRow._raw.displayNames
                     : [selectedRow?.primary ?? ""], scamType: toStringValue(selectedRow?._raw?.scamType, ""), description: toStringValue(selectedRow?._raw?.description, ""), phones: Array.isArray(selectedRow?._raw?.phones)
                     ? selectedRow._raw.phones

package/dist/features/admin/components/AdminSectionsView.d.ts

@@ -1,6 +1,9 @@
 import React from "react";
+import type { DashboardCard } from "../../../_internal/shared/features/dashboard/recent-entry";
 export interface AdminSectionsViewProps {
     children?: React.ReactNode;
+    /** Admin-curated page-region cards (Phase 12). Omit for no extra content. */
+    pageRegionCards?: DashboardCard[];
 }
 /**
  * The homepage/surface sections listing.
@@ -12,4 +15,4 @@ export interface AdminSectionsViewProps {
  * toolbar button, a "Mode" dropdown, and a second dropdown to re-find the row
  * you had just clicked past.
  */
-export declare function AdminSectionsView({ children }: AdminSectionsViewProps): React.JSX.Element;
+export declare function AdminSectionsView({ children, pageRegionCards }: AdminSectionsViewProps): React.JSX.Element;