@mohasinac/appkit 2.2.0 → 2.3.1

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Button } from "@mohasinac/appkit/ui";
 export function AdminFilterBar({ children, columns = 3, className = "", withCard = true, deferred = false, onApply, onReset, pendingCount = 0, labels = { apply: "Apply", reset: "Reset" }, themeConfig = { cardPadding: "p-4", flexEnd: "flex justify-end" }, }) {
@@ -8,7 +7,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
         4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4",
     };
-    const innerContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: `grid ${gridCols[columns]} gap-4`, children: children }), deferred && (_jsxs("div", { className: `${themeConfig.flexEnd} gap-2 mt-3`, children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
+    const innerContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: `grid ${gridCols[columns]} gap-4`, "data-section": "adminfilterbar-div-249", children: children }), deferred && (_jsxs("div", { className: `${themeConfig.flexEnd} gap-2 mt-3`, "data-section": "adminfilterbar-div-250", children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
                             ? `${labels.applyCount || labels.apply} (${pendingCount})`
                             : labels.apply })] }))] }));
     // If Card component is provided in config, use it; otherwise wrap in plain div
@@ -16,7 +15,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         return (_jsx(themeConfig.Card, { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
     }
     if (!withCard)
-        return _jsx("div", { className: className, children: innerContent });
+        return _jsx("div", { className: className, "data-section": "adminfilterbar-div-251", children: innerContent });
     // Fallback: render as plain div if no Card provided but withCard=true
-    return (_jsx("div", { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
+    return (_jsx("div", { className: `${themeConfig.cardPadding} ${className}`, "data-section": "adminfilterbar-div-252", children: innerContent }));
 }

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

@@ -0,0 +1,26 @@
+import { type ListingViewShellProps } from "../../../ui";
+export interface AdminListingScaffoldRow {
+    id: string;
+    primary: string;
+    secondary: string;
+    status: string;
+    updatedAt: string;
+}
+interface AdminListingScaffoldProps extends ListingViewShellProps {
+    title: string;
+    subtitle: string;
+    actionLabel: string;
+    searchPlaceholder: string;
+    rows: AdminListingScaffoldRow[];
+    isLoading?: boolean;
+    errorMessage?: string;
+    emptyLabel?: string;
+    filterGroups?: ReadonlyArray<{
+        title: string;
+        options: ReadonlyArray<string>;
+    }>;
+    activeFilters?: string[];
+    resultSummary?: string;
+}
+export declare function AdminListingScaffold({ title, subtitle, actionLabel, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, children, headerSlot, filterContent, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, actionsSlot, ...props }: AdminListingScaffoldProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Button, Div, Input, ListingViewShell, Span, Text, } from "../../../ui";
+import { AdminPageHeader } from "./AdminPageHeader";
+import { DataTable } from "./DataTable";
+const DEFAULT_FILTER_GROUPS = [
+    {
+        title: "Status",
+        options: ["Active", "Draft", "Archived"],
+    },
+    {
+        title: "Updated",
+        options: ["Last 7 days", "This month", "Needs review"],
+    },
+];
+function buildColumns() {
+    return [
+        {
+            key: "primary",
+            header: "Item",
+            sortable: true,
+            render: (row) => (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+        },
+        {
+            key: "status",
+            header: "Status",
+            sortable: true,
+            className: "w-40",
+            render: (row) => (_jsx(Span, { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+        },
+        {
+            key: "updatedAt",
+            header: "Updated",
+            sortable: true,
+            className: "w-40",
+            render: (row) => (_jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
+        },
+    ];
+}
+function renderFilterContent(groups = DEFAULT_FILTER_GROUPS) {
+    return (_jsx(Div, { className: "space-y-5", children: groups.map((group) => (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400", children: group.title }), _jsx(Div, { className: "flex flex-wrap gap-2", children: group.options.map((option, index) => (_jsx(Button, { type: "button", variant: "outline", size: "sm", className: "rounded-full", children: option }, `${group.title}-${option}`))) })] }, group.title))) }));
+}
+function renderActiveFilters(activeFilters) {
+    if (!activeFilters || activeFilters.length === 0) {
+        return null;
+    }
+    return (_jsx(Div, { className: "mb-4 flex flex-wrap gap-2", children: activeFilters.map((filter) => (_jsx(Span, { className: "inline-flex rounded-full border border-zinc-200 bg-white px-3 py-1 text-xs font-medium text-zinc-600 dark:border-slate-700 dark:bg-slate-900 dark:text-zinc-300", children: filter }, filter))) }));
+}
+export function AdminListingScaffold({ title, subtitle, actionLabel, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, children, headerSlot, filterContent, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, actionsSlot, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    return (_jsx(ListingViewShell, { ...props, portal: "admin", headerSlot: headerSlot ?? (_jsx(AdminPageHeader, { title: title, subtitle: subtitle, actionLabel: actionLabel, onAction: () => undefined, themeConfig: {
+                gradient: "rounded-3xl border border-zinc-200 bg-gradient-to-r from-white to-zinc-50 dark:border-slate-800 dark:from-slate-950 dark:to-slate-900",
+                titleClass: "text-3xl font-bold text-zinc-950 dark:text-zinc-50",
+                subtitleClass: "text-sm text-zinc-600 dark:text-zinc-300",
+                spacingClass: "space-y-1.5",
+            } })), filterContent: filterContent ?? renderFilterContent(filterGroups), activeFiltersSlot: activeFiltersSlot ?? renderActiveFilters(activeFilters), resultCountSlot: resultCountSlot ?? (_jsx(Text, { className: "text-sm text-zinc-600 dark:text-zinc-300", children: resultSummary ?? `Showing ${rows.length} items` })), searchSlot: searchSlot ?? (_jsx(Input, { readOnly: true, value: "", placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "min-w-[240px]" })), sortSlot: sortSlot ?? (_jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Newest first" })), actionsSlot: actionsSlot ?? (_jsx(Button, { type: "button", variant: "primary", size: "sm", children: actionLabel })), filterActiveCount: activeFilters?.length ?? 0, filterPendingCount: 0, errorSlot: errorMessage ? (_jsx(Div, { className: "rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })) : undefined, children: hasChildren ? (children) : (_jsx(DataTable, { columns: buildColumns(), rows: rows, isLoading: isLoading, emptyLabel: emptyLabel })) }));
+}

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

@@ -1,9 +1,9 @@
 import React from "react";
-import type { SlottedListingViewProps } from "../../../ui";
-export interface AdminMediaViewProps extends SlottedListingViewProps {
-    /** @deprecated Use `overlays` instead. */
-    renderDrawer?: () => React.ReactNode;
-    /** @deprecated Use `overlays` instead. */
-    renderModal?: () => React.ReactNode;
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminMediaViewProps extends Omit<StackedViewShellProps, "sections"> {
+    children?: React.ReactNode;
+    labels?: {
+        title?: string;
+    };
 }
-export declare function AdminMediaView({ renderDrawer, renderModal, overlays, ...props }: AdminMediaViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminMediaView({ labels, children, ...rest }: AdminMediaViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,51 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { SlottedListingView } from "../../../ui";
-export function AdminMediaView({ renderDrawer, renderModal, overlays, ...props }) {
-    return (_jsx(SlottedListingView, { portal: "admin", ...props, overlays: _jsxs(_Fragment, { children: [overlays, renderDrawer?.(), renderModal?.()] }) }));
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { Alert, Button, Div, StackedViewShell, Text, } from "../../../ui";
+import { MediaUploadField, MediaUploadList, useMediaCleanup, useMediaUpload, } from "../../media";
+export function AdminMediaView({ labels = {}, children, ...rest }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const { upload, isPending: isUploadPending } = useMediaUpload();
+    const { cleanup, isPending: isCleanupPending } = useMediaCleanup();
+    const [heroAssetUrl, setHeroAssetUrl] = React.useState("");
+    const [galleryAssets, setGalleryAssets] = React.useState([]);
+    const [stagedUrls, setStagedUrls] = React.useState([]);
+    const [operationMessage, setOperationMessage] = React.useState(null);
+    const onUpload = React.useCallback(async (file) => {
+        setOperationMessage(null);
+        return upload(file, "admin/media", true);
+    }, [upload]);
+    const handleAbort = React.useCallback((urls) => {
+        void cleanup(urls).catch(() => {
+            setOperationMessage("Some staged files could not be removed.");
+        });
+    }, [cleanup]);
+    const clearStagedUploads = React.useCallback(async () => {
+        if (stagedUrls.length === 0) {
+            return;
+        }
+        try {
+            await cleanup(stagedUrls);
+            setHeroAssetUrl("");
+            setGalleryAssets([]);
+            setStagedUrls([]);
+            setOperationMessage("Discarded staged media uploads.");
+        }
+        catch {
+            setOperationMessage("Failed to discard staged media uploads.");
+        }
+    }, [cleanup, stagedUrls]);
+    if (hasChildren) {
+        return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Media Operations", sections: [children] }));
+    }
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Media Operations", sections: [
+            _jsx(Alert, { variant: "info", title: "Frame-only media surface", children: "Use this screen for upload validation and staged file cleanup. Persistent asset ownership should stay in the parent form that references the media URL." }, "media-info"),
+            operationMessage ? (_jsx(Alert, { variant: operationMessage.startsWith("Failed") || operationMessage.startsWith("Some") ? "error" : "success", title: "Media", children: operationMessage }, "media-op-message")) : null,
+            _jsxs(Div, { className: "space-y-5 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Upload Sandbox" }), _jsx(MediaUploadField, { label: "Primary media asset", value: heroAssetUrl, onChange: setHeroAssetUrl, onUpload: onUpload, helperText: "Uploads to /api/media/upload and previews the returned URL.", onAbort: handleAbort, onStagedUrlsChange: setStagedUrls }), _jsx(MediaUploadList, { label: "Gallery assets", value: galleryAssets, onChange: setGalleryAssets, onUpload: onUpload, helperText: "Attach multiple images or videos for batch checks.", onAbort: handleAbort, onStagedUrlsChange: setStagedUrls, maxItems: 12 }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    setHeroAssetUrl("");
+                                    setGalleryAssets([]);
+                                }, disabled: isUploadPending || isCleanupPending, children: "Clear previews" }), _jsx(Button, { type: "button", variant: "outline", onClick: () => {
+                                    void clearStagedUploads();
+                                }, disabled: isUploadPending || isCleanupPending || stagedUrls.length === 0, children: isCleanupPending ? "Discarding..." : "Discard staged uploads" }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: [stagedUrls.length, " staged upload(s)"] })] })] }, "media-uploader"),
+        ] }));
 }

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

@@ -1,9 +1,13 @@
 import React from "react";
-import type { SlottedListingViewProps } from "../../../ui";
-export interface AdminNavigationViewProps extends SlottedListingViewProps {
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminNavigationViewProps extends Omit<StackedViewShellProps, "sections"> {
     /** @deprecated Use `overlays` instead. */
     renderDrawer?: () => React.ReactNode;
     /** @deprecated Use `overlays` instead. */
     renderModal?: () => React.ReactNode;
+    labels?: {
+        title?: string;
+    };
+    renderForm?: () => React.ReactNode;
 }
-export declare function AdminNavigationView({ renderDrawer, renderModal, overlays, ...props }: AdminNavigationViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminNavigationView({ labels, renderForm, renderDrawer, renderModal, ...rest }: AdminNavigationViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,82 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { SlottedListingView } from "../../../ui";
-export function AdminNavigationView({ renderDrawer, renderModal, overlays, ...props }) {
-    return (_jsx(SlottedListingView, { portal: "admin", ...props, overlays: _jsxs(_Fragment, { children: [overlays, renderDrawer?.(), renderModal?.()] }) }));
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Form, FormActions, StackedViewShell, Toggle, } from "../../../ui";
+import { useSiteSettings } from "../../../core/hooks/useSiteSettings";
+import { SITE_SETTINGS_ENDPOINTS } from "../../../constants/api-endpoints";
+import { apiClient } from "../../../http";
+const NAV_KEYS = [
+    "home",
+    "products",
+    "auctions",
+    "preOrders",
+    "categories",
+    "stores",
+    "events",
+    "blog",
+    "reviews",
+];
+const NAV_LABELS = {
+    home: "Home",
+    products: "Products",
+    auctions: "Auctions",
+    preOrders: "Pre-orders",
+    categories: "Categories",
+    stores: "Stores",
+    events: "Events",
+    blog: "Blog",
+    reviews: "Reviews",
+};
+export function AdminNavigationView({ labels = {}, renderForm, renderDrawer, renderModal, ...rest }) {
+    const queryClient = useQueryClient();
+    const { data, isLoading, error } = useSiteSettings();
+    const [hiddenNavItems, setHiddenNavItems] = React.useState([]);
+    const [saveMessage, setSaveMessage] = React.useState(null);
+    React.useEffect(() => {
+        if (!data)
+            return;
+        setHiddenNavItems(data.navbarConfig?.hiddenNavItems ?? []);
+    }, [data]);
+    const saveNavigation = useMutation({
+        mutationFn: async () => {
+            await apiClient.patch(SITE_SETTINGS_ENDPOINTS.GET, {
+                navbarConfig: {
+                    hiddenNavItems,
+                },
+            });
+        },
+        onSuccess: async () => {
+            await queryClient.invalidateQueries({ queryKey: ["site-settings"] });
+            setSaveMessage("Navigation settings saved.");
+        },
+        onError: () => {
+            setSaveMessage("Failed to save navigation settings.");
+        },
+    });
+    const toggleNavItem = (key, visible) => {
+        setHiddenNavItems((prev) => {
+            if (visible) {
+                return prev.filter((item) => item !== key);
+            }
+            if (prev.includes(key)) {
+                return prev;
+            }
+            return [...prev, key];
+        });
+        setSaveMessage(null);
+    };
+    const defaultForm = () => (_jsxs(Form, { onSubmit: (event) => {
+            event.preventDefault();
+            saveNavigation.mutate();
+        }, className: "space-y-4", children: [NAV_KEYS.map((key) => {
+                const isVisible = !hiddenNavItems.includes(key);
+                return (_jsx(Toggle, { checked: isVisible, onChange: (value) => toggleNavItem(key, value), label: `Show ${NAV_LABELS[key]} in top navigation` }, key));
+            }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+                            setHiddenNavItems(data?.navbarConfig?.hiddenNavItems ?? []);
+                            setSaveMessage(null);
+                        }, disabled: saveNavigation.isPending, children: "Reset" }), _jsx(Button, { type: "submit", disabled: saveNavigation.isPending, children: saveNavigation.isPending ? "Saving..." : "Save navigation" })] }), saveMessage ? (_jsx(Alert, { variant: saveMessage.startsWith("Failed") ? "error" : "success", title: saveMessage.startsWith("Failed") ? "Save failed" : "Saved", children: saveMessage })) : null] }));
+    const loadingAlert = isLoading ? (_jsx(Alert, { variant: "info", title: "Loading settings", children: "Fetching navigation configuration..." })) : null;
+    const errorAlert = error ? (_jsx(Alert, { variant: "error", title: "Could not load settings", children: error instanceof Error ? error.message : "Unknown error" })) : null;
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Navigation", sections: [loadingAlert, errorAlert, renderForm?.() ?? defaultForm(), renderDrawer?.(), renderModal?.()] }));
 }

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

@@ -1,4 +1,4 @@
 import type { ListingViewShellProps } from "../../../ui";
 export interface AdminOrdersViewProps extends ListingViewShellProps {
 }
-export declare function AdminOrdersView(props: AdminOrdersViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminOrdersView({ children, ...props }: AdminOrdersViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,31 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { ListingViewShell } from "../../../ui";
-export function AdminOrdersView(props) {
-    return _jsx(ListingViewShell, { portal: "admin", ...props });
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { AdminListingScaffold } from "./AdminListingScaffold";
+export function AdminOrdersView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "orders", "listing"],
+        endpoint: ADMIN_ENDPOINTS.ORDERS,
+        mapRows: (response) => toRecordArray(response.orders).map((item, index) => ({
+            id: toStringValue(item.id, `order-${index}`),
+            primary: `Order ${toStringValue(item.orderNumber ?? item.id, "-")}`,
+            secondary: [
+                toStringValue(item.buyerName ?? item.customerName, "Unknown buyer"),
+                toRupees(item.totalAmount ?? item.total ?? item.amount),
+            ].join(" · "),
+            status: toStringValue(item.status, "Unknown"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
+            ? response.meta.total
+            : mappedRows.length,
+    });
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Order Operations", subtitle: "Track payment, fulfillment, and delivery exceptions across the marketplace.", actionLabel: "Export orders", searchPlaceholder: "Search orders, buyers, or tracking IDs", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No orders found", resultSummary: `Showing ${rows.length} of ${total} orders` }));
 }

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

@@ -1,4 +1,3 @@
-"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
 import { ChevronRight } from "lucide-react";
@@ -8,5 +7,5 @@ export function AdminPageHeader({ title, subtitle, description, badge, breadcrum
     subtitleClass: "text-lg text-gray-700",
     spacingClass: "space-y-1",
 }, }) {
-    return (_jsxs("div", { className: `${themeConfig.gradient} p-6 ${className}`, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { className: "text-zinc-700 dark:text-zinc-200 font-medium", children: crumb.label }))] }, index))) })), _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [_jsxs("div", { className: themeConfig.spacingClass, children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
+    return (_jsxs("div", { className: `${themeConfig.gradient} p-6 ${className}`, "data-section": "adminpageheader-div-253", children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { className: "text-zinc-700 dark:text-zinc-200 font-medium", children: crumb.label }))] }, index))) })), _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", "data-section": "adminpageheader-div-254", children: [_jsxs("div", { className: themeConfig.spacingClass, "data-section": "adminpageheader-div-255", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
 }

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

@@ -1,4 +1,4 @@
 import type { ListingViewShellProps } from "../../../ui";
 export interface AdminPayoutsViewProps extends ListingViewShellProps {
 }
-export declare function AdminPayoutsView(props: AdminPayoutsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminPayoutsView({ children, ...props }: AdminPayoutsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,31 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { ListingViewShell } from "../../../ui";
-export function AdminPayoutsView(props) {
-    return _jsx(ListingViewShell, { portal: "admin", ...props });
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toRupees, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { AdminListingScaffold } from "./AdminListingScaffold";
+export function AdminPayoutsView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "payouts", "listing"],
+        endpoint: ADMIN_ENDPOINTS.PAYOUTS,
+        mapRows: (response) => toRecordArray(response.payouts).map((item, index) => ({
+            id: toStringValue(item.id, `payout-${index}`),
+            primary: [
+                `Payout ${toStringValue(item.id, "-")}`,
+                toRupees(item.amount),
+            ].join(" · "),
+            secondary: toStringValue(item.sellerName ?? item.sellerEmail, "Unknown seller"),
+            status: toStringValue(item.status, "Pending"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.meta?.total === "number"
+            ? response.meta.total
+            : mappedRows.length,
+    });
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Payout Operations", subtitle: "Monitor payout eligibility, dispatch readiness, and failure follow-up in one operational queue.", actionLabel: "Run payout batch", searchPlaceholder: "Search sellers, payout IDs, or order groups", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No payouts found", resultSummary: `Showing ${rows.length} of ${total} payouts` }));
 }

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

@@ -1,4 +1,4 @@
 import type { ListingViewShellProps } from "../../../ui";
 export interface AdminProductsViewProps extends ListingViewShellProps {
 }
-export declare function AdminProductsView(props: AdminProductsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminProductsView({ children, ...props }: AdminProductsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,29 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { ListingViewShell } from "../../../ui";
-export function AdminProductsView(props) {
-    return _jsx(ListingViewShell, { portal: "admin", ...props });
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { AdminListingScaffold } from "./AdminListingScaffold";
+export function AdminProductsView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "products", "listing"],
+        endpoint: ADMIN_ENDPOINTS.PRODUCTS,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `product-${index}`),
+            primary: toStringValue(item.title ?? item.name, "Untitled product"),
+            secondary: [
+                toStringValue(item.sellerName, "Unknown seller"),
+                toStringValue(item.sku, "No SKU"),
+            ].join(" · "),
+            status: toStringValue(item.status, "Unknown"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Product Management", subtitle: "Review catalogue health, publishing state, and merchandising issues from one queue.", actionLabel: "New product", searchPlaceholder: "Search products, SKUs, or seller names", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No products found", resultSummary: `Showing ${rows.length} of ${total} products` }));
 }

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

@@ -4,4 +4,4 @@ export interface AdminReviewsViewProps extends ListingViewShellProps {
     /** @deprecated Use `detailView` instead. */
     renderDetailView?: () => React.ReactNode;
 }
-export declare function AdminReviewsView({ renderDetailView, ...props }: AdminReviewsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminReviewsView({ renderDetailView, children, ...props }: AdminReviewsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,27 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
 import { ListingViewShell } from "../../../ui";
-export function AdminReviewsView({ renderDetailView, ...props }) {
-    return _jsx(ListingViewShell, { portal: "admin", ...props, detailView: renderDetailView?.() });
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { AdminListingScaffold } from "./AdminListingScaffold";
+export function AdminReviewsView({ renderDetailView, children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const hasDetailView = Boolean(renderDetailView);
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "reviews", "listing"],
+        endpoint: ADMIN_ENDPOINTS.REVIEWS,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `review-${index}`),
+            primary: `${toStringValue(item.rating, "-")} star · ${toStringValue(item.productTitle ?? item.productName, "Unknown product")}`,
+            secondary: toStringValue(item.userName ?? item.sellerName, "Unknown author"),
+            status: toStringValue(item.status, "Pending"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    if (hasChildren || hasDetailView) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, detailView: renderDetailView?.(), children: children });
+    }
+    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Review Moderation", subtitle: "Moderate customer feedback, seller responses, and featured review placement from one queue.", actionLabel: "Review policies", searchPlaceholder: "Search reviews, products, or seller names", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No reviews found", resultSummary: `Showing ${rows.length} of ${total} reviews` }));
 }

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

@@ -1,9 +1,5 @@
 import React from "react";
-import type { SlottedListingViewProps } from "../../../ui";
-export interface AdminSectionsViewProps extends SlottedListingViewProps {
-    /** @deprecated Use `overlays` instead. */
-    renderDrawer?: () => React.ReactNode;
-    /** @deprecated Use `overlays` instead. */
-    renderModal?: () => React.ReactNode;
+export interface AdminSectionsViewProps {
+    children?: React.ReactNode;
 }
-export declare function AdminSectionsView({ renderDrawer, renderModal, overlays, ...props }: AdminSectionsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminSectionsView({ children }: AdminSectionsViewProps): import("react/jsx-runtime").JSX.Element;