@mohasinac/appkit 4.13.1 → 4.14.0

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

@@ -0,0 +1,186 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * WHY: Offers had a seller surface (/store/offers) and a buyer surface
+ *      (/user/offers) but no admin surface at all — despite the offers
+ *      collection carrying real money commitments, a 48h locked price, and a
+ *      lane that can block a buyer's whole cart. There was no way for support
+ *      to see an offer, let alone clear a stuck one.
+ * WHAT: The admin offers list. Cloned from SellerOffersView rather than
+ *       AdminBidsView: the seller view is already offer-shaped and already
+ *       satisfies `audit-listing-detail-affordance` (row click -> detail
+ *       modal), whereas AdminBidsView is itself still on the Root Cause #56
+ *       backlog and cloning it would have added a tenth violation.
+ *
+ * Two things differ from the seller view, both deliberate:
+ *  - the buyer's real name/email is shown UNMASKED (the seller view masks via
+ *    `maskOfferForSeller`) — an admin investigating a dispute needs identity;
+ *  - the only mutation is Cancel. Accepting or countering on a seller's behalf
+ *    is an authority nobody asked for, so `ADMIN_ROW_ACTIONS.offers` is
+ *    deliberately just [VIEW, CANCEL].
+ *
+ * EXPORTS:
+ *   AdminOffersView
+ *
+ * @tag domain:admin,offers
+ * @tag layer:feature-view
+ * @tag pattern:slot-shell
+ * @tag access:client
+ * @tag consumers:src/app/[locale]/admin/offers/page.tsx
+ * @tag sideEffects:network
+ */
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
+import { sortBy } from "@mohasinac/appkit/client";
+import React, { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
+import { ConfirmDeleteModal, FilterChipGroup, ListingLayout, RecordDetailModal, RowActionMenu, useToast, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ADMIN_OFFER_STATUS_TABS } from "../constants/filter-tabs";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
+import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
+import { ROUTES } from "../../../next/routing/route-map";
+import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData";
+import { DataListingView } from "./DataListingView";
+import { apiClient } from "../../../http";
+/** Terminal states — an offer here has nothing left to cancel. */
+const TERMINAL_STATUSES = new Set(["paid", "declined", "expired", "withdrawn"]);
+export function AdminOffersView({ children, ...props }) {
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [detailRow, setDetailRow] = useState(null);
+    const [cancelOpen, setCancelOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState(null);
+    const cancelMutation = useApiMutation({
+        mutationFn: async (offerId) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.OFFER_BY_ID(offerId), { status: "expired" });
+        },
+        onSuccess: () => {
+            showToast("Offer cancelled and cleared from the buyer's cart.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "offers"] });
+            setCancelOpen(false);
+            setSelectedRow(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to cancel offer.", "error");
+        },
+    });
+    if (React.Children.count(children) > 0) {
+        return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
+    }
+    const config = {
+        portal: "admin",
+        title: "Offers",
+        searchPlaceholder: "Search offers by product, buyer, or store",
+        emptyLabel: "No offers found",
+        filterKeys: ["status"],
+        defaultSort: sortBy("createdAt", "DESC"),
+        queryKey: ["admin", "offers", "listing"],
+        endpoint: ADMIN_ENDPOINTS.OFFERS,
+        sortOptions: [
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: sortBy("offerAmount", "DESC"), label: "Highest offer" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `offer-${index}`),
+            // The LISTING, not the offer id — a row identified only by
+            // `offer-…-20260819-x7y8z9` is unreadable at a glance (Root Cause #52).
+            primary: toStringValue(item.productTitle, "Untitled listing"),
+            // Admin sees both sides of the negotiation, unmasked.
+            secondary: [
+                `Offer: ${toCurrency(item.offerAmount)}`,
+                `Listed: ${toCurrency(item.listedPrice)}`,
+                `${toStringValue(item.buyerName, "Unknown buyer")} → ${toStringValue(item.storeName, "Unknown store")}`,
+            ].join(" · "),
+            status: toStringValue(item.status, "pending"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            detail: item,
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        // A menu of pure mutations is not a detail affordance (Root Cause #56) —
+        // cancelling an offer without first reading it is acting blind.
+        onRowClick: (row) => setDetailRow(row),
+        buildFilters: (state) => state.status && state.status !== "All"
+            ? sieveFilter("status", SIEVE_OP.EQ, state.status)
+            : undefined,
+        buildBulkActions: (selection) => [
+            {
+                id: ROW_ACTION_ID.CANCEL,
+                label: ACTIONS.ADMIN["cancel-offer"].label,
+                variant: "secondary",
+                onClick: () => selection.clearSelection(),
+            },
+        ],
+        renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
+                { label: ROW_ACTION_META[ROW_ACTION_ID.VIEW].label, onClick: () => setDetailRow(row) },
+                {
+                    label: ACTIONS.ADMIN["cancel-offer"].label,
+                    destructive: true,
+                    disabled: TERMINAL_STATUSES.has(row.status),
+                    onClick: () => {
+                        setSelectedRow(row);
+                        setCancelOpen(true);
+                    },
+                },
+            ] })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_OFFER_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
+    };
+    const d = detailRow?.detail ?? {};
+    const productSlug = toStringValue(d.productSlug ?? d.productId, "");
+    const paidOrderId = toStringValue(d.paidOrderId, "");
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(RecordDetailModal, { isOpen: detailRow !== null, onClose: () => setDetailRow(null), title: detailRow?.primary ?? "Offer", badges: detailRow ? [{ label: detailRow.status }] : undefined, description: toStringValue(d.buyerNote, ""), fields: [
+                    { label: "Buyer", value: toStringValue(d.buyerName, "Unknown buyer") },
+                    { label: "Buyer email", value: toStringValue(d.buyerEmail, "—") },
+                    { label: "Store", value: toStringValue(d.storeName, "Unknown store") },
+                    { label: "Listed price", value: toCurrency(d.listedPrice) },
+                    { label: "Offered", value: toCurrency(d.offerAmount) },
+                    ...(d.counterAmount
+                        ? [{ label: "Seller counter", value: toCurrency(d.counterAmount) }]
+                        : []),
+                    ...(d.lockedPrice
+                        ? [{ label: "Locked price", value: toCurrency(d.lockedPrice) }]
+                        : []),
+                    ...(d.sellerNote
+                        ? [{ label: "Seller note", value: toStringValue(d.sellerNote, "") }]
+                        : []),
+                    { label: "Offer expires", value: toRelativeDate(d.expiresAt) },
+                    ...(d.checkoutDeadline
+                        ? [{ label: "Buyer must pay by", value: toRelativeDate(d.checkoutDeadline) }]
+                        : []),
+                    { label: "Created", value: toRelativeDate(d.createdAt) },
+                    { label: "Offer ID", value: detailRow?.id ?? "—" },
+                ], items: detailRow
+                    ? {
+                        heading: "Listing",
+                        entries: [
+                            {
+                                image: toStringValue(d.productImageUrl, "") || undefined,
+                                title: detailRow.primary,
+                                subtitle: toStringValue(d.productId, ""),
+                                trailing: toCurrency(d.listedPrice),
+                                href: productSlug
+                                    ? String(ROUTES.PUBLIC.PRODUCT_DETAIL(productSlug))
+                                    : undefined,
+                            },
+                            // A paid offer became a real order — link to it, so the
+                            // "what happened next" question has an answer in one click.
+                            ...(paidOrderId
+                                ? [
+                                    {
+                                        title: `Order ${paidOrderId}`,
+                                        subtitle: "Placed from this offer",
+                                        href: String(ROUTES.ADMIN.ORDER_DETAIL(paidOrderId)),
+                                    },
+                                ]
+                                : []),
+                        ],
+                    }
+                    : undefined }), _jsx(ConfirmDeleteModal, { isOpen: cancelOpen, onClose: () => {
+                    setCancelOpen(false);
+                    setSelectedRow(null);
+                }, onConfirm: () => {
+                    if (selectedRow)
+                        cancelMutation.mutate(selectedRow.id);
+                }, isDeleting: cancelMutation.isPending, title: ACTIONS.ADMIN["cancel-offer"].confirmation.title, message: ACTIONS.ADMIN["cancel-offer"].confirmation.body, confirmText: ACTIONS.ADMIN["cancel-offer"].confirmation.confirmLabel, variant: "warning" })] }));
+}

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

@@ -12,6 +12,7 @@ import { ROUTES } from "../../../next/routing/route-map";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
 import { ADMIN_ORDER_STATUS_TABS, ADMIN_ORDER_PAYMENT_REVIEW_TABS } from "../constants/filter-tabs";
 import { isManualPaymentMethod, isPaymentReviewQueueMode } from "../../orders/constants/payment-window";
+import { useOrderScope } from "../../orders/components/OrderScopeTabs";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
 import { AdminOrderEditorView } from "./AdminOrderEditorView";
@@ -80,6 +81,7 @@ export function AdminOrdersView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
+    const orderScope = useOrderScope();
     const config = {
         portal: "admin",
         title: "Orders",
@@ -147,7 +149,14 @@ export function AdminOrdersView({ children, ...props }) {
                 return undefined;
             return f.status && f.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, f.status) : undefined;
         },
-        buildExtraParams: (f) => isPaymentReviewQueueMode(f.paymentReview ?? "") ? { paymentReview: f.paymentReview } : undefined,
+        // The payment-review queue is its own mode — it already ignores `status`
+        // (see buildFilters above), so it must ignore the lifecycle scope too, or
+        // an admin opening the queue from the default Active tab would see it
+        // silently narrowed.
+        buildExtraParams: (f) => isPaymentReviewQueueMode(f.paymentReview ?? "")
+            ? { paymentReview: f.paymentReview }
+            : orderScope.extraParams,
+        renderAboveContent: orderScope.renderAboveContent,
         // Mirrors the row action's "View full details" entry so the row itself
         // is clickable, not just the overflow menu.
         onRowClick: (row) => {

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

@@ -11,6 +11,8 @@ import { ADMIN_PRODUCT_STATUS_TABS } from "../constants/filter-tabs";
 import { ROUTES } from "../../../constants";
 import { toRecordArray, toRelativeDate, toCurrency, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+const PRIZE_DRAW_TYPES = ["prize-draw"];
 const STATUS_VARIANT = {
     published: "success",
     active: "success",
@@ -57,6 +59,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
+    const scope = useAvailabilityScope(PRIZE_DRAW_TYPES);
     const config = {
         portal: "admin",
         title: "Prize Draws",
@@ -94,6 +97,8 @@ export function AdminPrizeDrawsView({ children, ...props }) {
             const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         rowHrefTemplate: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT("{id}")),
         // Rule #7: bulk-action array sourced from the ADMIN_BULK_ACTIONS preset.
         buildBulkActions: (selection) => ADMIN_BULK_ACTIONS.prizeDraws.map((id) => ({

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

@@ -16,6 +16,8 @@ import { AdminProductEditorView } from "./AdminProductEditorView";
 import { QuickEditMenu } from "./QuickEditMenu";
 import { ADMIN_BULK_ACTIONS, ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
 import { parseSelectedListingTypes } from "../../products/utils/listing-type";
+import { useAvailabilityScope } from "../../products/hooks/useAvailabilityScope";
+import { ALL_LISTING_TYPES } from "../../../_internal/shared/listing-types/feature-flags";
 const FLAG_DEFS = [
     { key: "featured", label: "Featured" },
     { key: "isPromoted", label: "Promoted" },
@@ -95,16 +97,15 @@ export function AdminProductsView({ children, ...props }) {
                     void handleToggle(row.id, key, v);
                 } }, key))) })),
     };
-    // We need showSold state to be derived from URL — read it via a small inner component
-    // that uses the listing's own table state. To keep things simple, use a ref into the
-    // config's render-prop chain via `renderAboveContent` which has no useUrlTable.
-    // Simplest: use buildFilters which gets the full filterState, and add showSold to filterKeys.
+    // Spans every listing type unless the Type chips narrow it, which is what
+    // makes the middle tab read "Sold & Ended" here rather than one or the other.
+    const scope = useAvailabilityScope(ALL_LISTING_TYPES);
     const config = {
         portal: "admin",
         title: "Products",
         searchPlaceholder: "Search products, SKUs, or seller names",
         emptyLabel: "No products found",
-        filterKeys: ["status", "type", "showSold", "showEnded", "showClosed"],
+        filterKeys: ["status", "type"],
         defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "products", "listing"],
         endpoint: ADMIN_ENDPOINTS.PRODUCTS,
@@ -169,8 +170,6 @@ export function AdminProductsView({ children, ...props }) {
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (state) => {
             const parts = [];
-            if (state.showSold !== "true")
-                parts.push("isSold==false");
             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
@@ -181,20 +180,17 @@ export function AdminProductsView({ children, ...props }) {
             if (selectedTypes.length > 0) {
                 parts.push(sieveFilter("listingType", SIEVE_OP.EQ, selectedTypes.join("|")));
             }
-            // Ended/closed are per-type predicates: `auctionEndDate` and
-            // `prizeRevealWindowEnd` only exist on auctions and prize-draws. Apply
-            // each only when its type is the ONLY one selected — with a mixed
-            // selection the inequality would exclude every row of the other types
-            // (they have no such field at all), which reads as "no results".
-            const onlyType = selectedTypes.length === 1 ? selectedTypes[0] : null;
-            if (onlyType === "auction" && state.showEnded !== "true") {
-                parts.push(sieveFilter("auctionEndDate", SIEVE_OP.GTE, new Date().toISOString()));
-            }
-            if (onlyType === "prize-draw" && state.showClosed !== "true") {
-                parts.push(sieveFilter("prizeRevealWindowEnd", SIEVE_OP.GTE, new Date().toISOString()));
-            }
+            // 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;
         },
+        buildExtraParams: () => scope.extraParams,
+        renderAboveContent: scope.renderAboveContent,
         primaryAction: {
             label: "Add Product",
             onClick: ({ openCreatePanel }) => openCreatePanel(),
@@ -263,16 +259,7 @@ 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 })) }), _jsx(FilterChipGroup, { label: "Sold", tabs: [
-                        { id: "", label: "Hide sold" },
-                        { id: "true", label: "Show sold" },
-                    ], value: pendingFilters.showSold ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showSold: id })), allId: "" }), _jsx(FilterChipGroup, { label: "Ended", tabs: [
-                        { id: "", label: "Hide ended" },
-                        { id: "true", label: "Show ended" },
-                    ], value: pendingFilters.showEnded ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showEnded: id })), allId: "" }), _jsx(FilterChipGroup, { label: "Closed", tabs: [
-                        { id: "", label: "Hide closed" },
-                        { id: "true", label: "Show closed" },
-                    ], value: pendingFilters.showClosed ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, showClosed: id })), allId: "" })] })),
+        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 })),
         resolveEditorTitle: ({ isCreate }) => (isCreate ? "Add Product" : "Edit Product"),
     };