@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -1,15 +1,24 @@
+import React from "react";
 import { type ListingViewShellProps } from "../../../ui";
+import type { AdminTableColumn } from "../types";
 export interface AdminListingScaffoldRow {
     id: string;
     primary: string;
     secondary: string;
     status: string;
     updatedAt: string;
+    featured?: boolean;
+    isPromoted?: boolean;
+    isOnSale?: boolean;
+    isSold?: boolean;
 }
 interface AdminListingScaffoldProps extends ListingViewShellProps {
     title: string;
     subtitle: string;
-    actionLabel: string;
+    actionLabel?: string;
+    actionHref?: string;
+    columns?: AdminTableColumn<AdminListingScaffoldRow>[];
+    getRowHref?: (row: AdminListingScaffoldRow) => string;
     searchPlaceholder: string;
     rows: AdminListingScaffoldRow[];
     isLoading?: boolean;
@@ -18,9 +27,15 @@ interface AdminListingScaffoldProps extends ListingViewShellProps {
     filterGroups?: ReadonlyArray<{
         title: string;
         options: ReadonlyArray<string>;
+        active?: string;
+        onSelect?: (option: string) => void;
     }>;
     activeFilters?: string[];
     resultSummary?: string;
+    onSearch?: (query: string) => void;
+    searchValue?: string;
+    onClearFilters?: () => void;
+    renderRowActions?: (row: AdminListingScaffoldRow) => React.ReactNode;
 }
-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 declare function AdminListingScaffold({ title, subtitle, actionLabel, actionHref, columns, getRowHref, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, onSearch, searchValue, onClearFilters, renderRowActions, children, headerSlot, filterContent, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, actionsSlot, ...props }: AdminListingScaffoldProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { Button, Div, Input, ListingViewShell, Span, Text, } from "../../../ui";
@@ -38,7 +39,7 @@ function buildColumns() {
     ];
 }
 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))) }));
+    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) => (_jsx(Button, { type: "button", variant: group.active === option ? "primary" : "outline", size: "sm", className: "rounded-full", onClick: () => group.onSelect?.(option), children: option }, `${group.title}-${option}`))) })] }, group.title))) }));
 }
 function renderActiveFilters(activeFilters) {
     if (!activeFilters || activeFilters.length === 0) {
@@ -46,12 +47,22 @@ function renderActiveFilters(activeFilters) {
     }
     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 }) {
+export function AdminListingScaffold({ title, subtitle, actionLabel, actionHref, columns, getRowHref, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, onSearch, searchValue, onClearFilters, renderRowActions, children, headerSlot, filterContent, activeFiltersSlot, resultCountSlot, searchSlot, sortSlot, actionsSlot, ...props }) {
+    const [localSearch, setLocalSearch] = React.useState(searchValue ?? "");
     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 })) }));
+            } })), 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, { value: localSearch, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, className: "min-w-[240px]", onChange: (e) => {
+                setLocalSearch(e.target.value);
+            }, onKeyDown: (e) => {
+                if (e.key === "Enter") {
+                    onSearch?.(localSearch);
+                }
+            } })), sortSlot: sortSlot ?? (_jsx(Button, { type: "button", variant: "outline", size: "sm", children: "Newest first" })), actionsSlot: actionsSlot ??
+            (actionLabel ? (actionHref ? (_jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => {
+                    window.location.href = actionHref;
+                }, children: actionLabel })) : (_jsx(Button, { type: "button", variant: "primary", size: "sm", children: actionLabel }))) : undefined), 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: columns ?? buildColumns(), rows: rows, isLoading: isLoading, emptyLabel: emptyLabel, getRowHref: getRowHref, renderRowActions: renderRowActions })) }));
 }

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

@@ -11,6 +11,7 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
     const [galleryAssets, setGalleryAssets] = React.useState([]);
     const [stagedUrls, setStagedUrls] = React.useState([]);
     const [operationMessage, setOperationMessage] = React.useState(null);
+    const [copiedUrl, setCopiedUrl] = React.useState(null);
     const onUpload = React.useCallback(async (file) => {
         setOperationMessage(null);
         return upload(file, "admin/media", true);
@@ -21,9 +22,8 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
         });
     }, [cleanup]);
     const clearStagedUploads = React.useCallback(async () => {
-        if (stagedUrls.length === 0) {
+        if (stagedUrls.length === 0)
             return;
-        }
         try {
             await cleanup(stagedUrls);
             setHeroAssetUrl("");
@@ -35,17 +35,27 @@ export function AdminMediaView({ labels = {}, children, ...rest }) {
             setOperationMessage("Failed to discard staged media uploads.");
         }
     }, [cleanup, stagedUrls]);
+    const copyToClipboard = React.useCallback(async (url) => {
+        try {
+            await navigator.clipboard.writeText(url);
+            setCopiedUrl(url);
+            setTimeout(() => setCopiedUrl(null), 2000);
+        }
+        catch {
+            setOperationMessage("Could not copy URL to clipboard.");
+        }
+    }, []);
     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 Library", 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: () => {
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Media Library", sections: [
+            _jsx(Alert, { variant: "info", title: "Upload sandbox", children: "Upload files and copy the resulting URL for use in forms. Browsing all stored media files requires the I4 media library infrastructure (deferred)." }, "media-info"),
+            operationMessage ? (_jsx(Alert, { variant: operationMessage.startsWith("Failed") || operationMessage.startsWith("Some") || operationMessage.startsWith("Could") ? "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 & Copy URL" }), _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 }), heroAssetUrl && (_jsxs(Div, { className: "flex items-center gap-2 rounded-lg bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-3 py-2", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: heroAssetUrl }), _jsx(Button, { type: "button", variant: "outline", onClick: () => copyToClipboard(heroAssetUrl), children: copiedUrl === heroAssetUrl ? "Copied!" : "Copy URL" })] })), _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 }), galleryAssets.length > 0 && (_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 font-medium", children: "Gallery URLs" }), galleryAssets.map((asset, i) => (_jsxs(Div, { className: "flex items-center gap-2 rounded bg-zinc-50 dark:bg-zinc-800 border border-zinc-200 dark:border-zinc-700 px-2 py-1", children: [_jsx(Text, { className: "flex-1 truncate text-xs text-zinc-600 dark:text-zinc-400 font-mono", children: asset.url }), _jsx(Button, { type: "button", variant: "ghost", onClick: () => copyToClipboard(asset.url), children: copiedUrl === asset.url ? "Copied!" : "Copy" })] }, i)))] })), _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"),
+                                }, 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/AdminNavEditorView.d.ts

@@ -0,0 +1,20 @@
+export interface NavItemData {
+    id?: string;
+    label: string;
+    href: string;
+    icon?: string;
+    order?: number;
+    parentId?: string;
+    isVisible?: boolean;
+}
+export interface AdminNavEditorViewProps {
+    open: boolean;
+    onClose: () => void;
+    onSaved: () => void;
+    item?: NavItemData | null;
+    parentOptions?: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions, }: AdminNavEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,84 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation } from "@tanstack/react-query";
+import { Button, Form, FormActions, Input, Select, SideDrawer, Toggle, useToast, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+// --- Constants ---------------------------------------------------------------
+const ICON_OPTIONS = [
+    { label: "None", value: "" },
+    { label: "Home", value: "home" },
+    { label: "Package", value: "package" },
+    { label: "Gavel", value: "gavel" },
+    { label: "Clock", value: "clock" },
+    { label: "Grid", value: "grid" },
+    { label: "Store", value: "store" },
+    { label: "Calendar", value: "calendar" },
+    { label: "BookOpen", value: "book-open" },
+    { label: "Star", value: "star" },
+    { label: "Tag", value: "tag" },
+    { label: "Link", value: "link" },
+];
+// --- Component ---------------------------------------------------------------
+export function AdminNavEditorView({ open, onClose, onSaved, item, parentOptions = [], }) {
+    const isEdit = Boolean(item?.id);
+    const [label, setLabel] = React.useState("");
+    const [href, setHref] = React.useState("");
+    const [icon, setIcon] = React.useState("");
+    const [order, setOrder] = React.useState(0);
+    const [parentId, setParentId] = React.useState("");
+    const [isVisible, setIsVisible] = React.useState(true);
+    React.useEffect(() => {
+        if (open && item) {
+            setLabel(item.label ?? "");
+            setHref(item.href ?? "");
+            setIcon(item.icon ?? "");
+            setOrder(item.order ?? 0);
+            setParentId(item.parentId ?? "");
+            setIsVisible(item.isVisible ?? true);
+        }
+        else if (!open) {
+            setLabel("");
+            setHref("");
+            setIcon("");
+            setOrder(0);
+            setParentId("");
+            setIsVisible(true);
+        }
+    }, [open, item]);
+    const { showToast } = useToast();
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                label,
+                href,
+                icon: icon || undefined,
+                order,
+                parentId: parentId || undefined,
+                isVisible,
+            };
+            if (isEdit) {
+                return apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(item.id), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.NAVIGATION, payload);
+        },
+        onSuccess: () => {
+            showToast(isEdit ? "Nav item updated." : "Nav item created.", "success");
+            onSaved();
+            onClose();
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save nav item.", "error");
+        },
+    });
+    const canSave = Boolean(label.trim()) && Boolean(href.trim());
+    const parentSelectOptions = [
+        { label: "None (top-level)", value: "" },
+        ...parentOptions,
+    ];
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: isEdit ? "Edit Nav Item" : "New Nav Item", children: _jsxs(Form, { onSubmit: (e) => {
+                e.preventDefault();
+                saveMutation.mutate();
+            }, className: "space-y-4 p-4", children: [_jsx(Input, { label: "Label", value: label, onChange: (e) => setLabel(e.target.value), required: true, placeholder: "e.g. Products" }), _jsx(Input, { label: "URL / href", value: href, onChange: (e) => setHref(e.target.value), required: true, placeholder: "/products", helperText: "Use relative paths (e.g. /products) or full URLs." }), _jsx(Select, { label: "Icon (optional)", options: ICON_OPTIONS, value: icon, onValueChange: setIcon }), parentOptions.length > 0 && (_jsx(Select, { label: "Parent item (for nested nav)", options: parentSelectOptions, value: parentId, onValueChange: setParentId })), _jsx(Input, { label: "Order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower numbers appear first." }), _jsx(Toggle, { label: "Visible in navigation", checked: isVisible, onChange: setIsVisible }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !canSave || saveMutation.isPending, children: isEdit ? "Save changes" : "Create item" })] })] }) }));
+}

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

@@ -1,13 +1,7 @@
-import React from "react";
 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({ labels, renderForm, renderDrawer, renderModal, ...rest }: AdminNavigationViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminNavigationView({ labels, ...rest }: AdminNavigationViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,82 +1,94 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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 { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, ConfirmDeleteModal, RowActionMenu, StackedViewShell, Toggle, useToast, } from "../../../ui";
 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 }) {
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { AdminNavEditorView } from "./AdminNavEditorView";
+// --- Component ---------------------------------------------------------------
+export function AdminNavigationView({ labels = {}, ...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,
-                },
-            });
+    const { showToast } = useToast();
+    const [drawerOpen, setDrawerOpen] = React.useState(false);
+    const [editing, setEditing] = React.useState(null);
+    const [deleteTarget, setDeleteTarget] = React.useState(null);
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["admin", "navigation"],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.NAVIGATION);
+            return res?.data ?? res;
+        },
+    });
+    const items = data?.items ?? [];
+    const sorted = [...items].sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+    const visibilityMutation = useMutation({
+        mutationFn: async ({ id, isVisible }) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id), { isVisible });
         },
-        onSuccess: async () => {
-            await queryClient.invalidateQueries({ queryKey: ["site-settings"] });
-            setSaveMessage("Navigation settings saved.");
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] });
         },
-        onError: () => {
-            setSaveMessage("Failed to save navigation settings.");
+        onError: () => showToast("Failed to update visibility.", "error"),
+    });
+    const reorderMutation = useMutation({
+        mutationFn: async ({ id, newOrder }) => {
+            await apiClient.patch(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id), { order: newOrder });
+        },
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] });
         },
+        onError: () => showToast("Failed to reorder.", "error"),
     });
-    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 deleteMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.delete(ADMIN_ENDPOINTS.NAVIGATION_BY_ID(id));
+        },
+        onSuccess: () => {
+            showToast("Nav item deleted.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] });
+            setDeleteTarget(null);
+        },
+        onError: () => showToast("Failed to delete nav item.", "error"),
+    });
+    const handleMoveUp = (idx) => {
+        if (idx === 0)
+            return;
+        const current = sorted[idx];
+        const above = sorted[idx - 1];
+        reorderMutation.mutate({ id: current.id, newOrder: (above.order ?? 0) - 1 });
+    };
+    const handleMoveDown = (idx) => {
+        if (idx >= sorted.length - 1)
+            return;
+        const current = sorted[idx];
+        const below = sorted[idx + 1];
+        reorderMutation.mutate({ id: current.id, newOrder: (below.order ?? 0) + 1 });
     };
-    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?.()] }));
+    const parentOptions = sorted
+        .filter((i) => !i.parentId)
+        .map((i) => ({ label: i.label, value: i.id }));
+    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Navigation", sections: [
+                    isLoading ? (_jsx(Alert, { variant: "info", title: "Loading", children: "Fetching nav items\u2026" }, "loading")) : null,
+                    error ? (_jsx(Alert, { variant: "error", title: "Load failed", children: error instanceof Error ? error.message : "Unknown error" }, "error")) : null,
+                    _jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs("p", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
+                                    setEditing(null);
+                                    setDrawerOpen(true);
+                                }, children: "+ New item" })] }, "header"),
+                    sorted.length === 0 && !isLoading ? (_jsx("p", { className: "text-sm text-zinc-400 dark:text-zinc-500 py-8 text-center", children: "No nav items yet. Click \"New item\" to add one." }, "empty")) : null,
+                    _jsx("div", { className: "divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 overflow-hidden", children: sorted.map((item, idx) => (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx("button", { type: "button", onClick: () => handleMoveUp(idx), disabled: idx === 0 || reorderMutation.isPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move up", children: "\u25B2" }), _jsx("button", { type: "button", onClick: () => handleMoveDown(idx), disabled: idx >= sorted.length - 1 || reorderMutation.isPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs("p", { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? (_jsx("span", { className: "text-zinc-400 mr-1", children: "\u21B3" })) : null, item.label] }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => visibilityMutation.mutate({ id: item.id, isVisible: val }), label: "" }), _jsx(RowActionMenu, { actions: [
+                                        {
+                                            label: "Edit",
+                                            onClick: () => {
+                                                setEditing(item);
+                                                setDrawerOpen(true);
+                                            },
+                                        },
+                                        {
+                                            label: "Delete",
+                                            destructive: true,
+                                            onClick: () => setDeleteTarget(item),
+                                        },
+                                    ] })] }, item.id))) }, "list"),
+                ] }), _jsx(AdminNavEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), onSaved: () => queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] }), item: editing, parentOptions: parentOptions }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(deleteTarget), onClose: () => setDeleteTarget(null), onConfirm: () => deleteMutation.mutate(deleteTarget.id), isDeleting: deleteMutation.isPending, title: "Delete nav item", message: `Remove "${deleteTarget?.label}" from navigation? This cannot be undone.` })] }));
 }

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

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

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

@@ -0,0 +1,132 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X } from "lucide-react";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Button, ConfirmDeleteModal, ListingToolbar, ListingViewShell, Pagination, RowActionMenu, useToast, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status"];
+const DEFAULT_SORT = "-subscribedAt";
+const SORT_OPTIONS = [
+    { value: "-subscribedAt", label: "Newest" },
+    { value: "subscribedAt", label: "Oldest" },
+];
+const STATUS_OPTIONS = ["All", "active", "unsubscribed"];
+export function AdminNewsletterView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const queryClient = useQueryClient();
+    const { showToast } = useToast();
+    const [unsubscribeOpen, setUnsubscribeOpen] = useState(false);
+    const [selectedRow, setSelectedRow] = useState(null);
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+    }, [searchInput, table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
+    const statusRaw = table.get("status");
+    const filters = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "newsletter", "listing"],
+        endpoint: ADMIN_ENDPOINTS.NEWSLETTER,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.subscribers).map((item, index) => ({
+            id: toStringValue(item.id, `sub-${index}`),
+            primary: toStringValue(item.email, "Unknown email"),
+            secondary: [
+                toStringValue(item.source, ""),
+                item.ipAddress ? "IP logged" : "",
+            ].filter(Boolean).join(" · ") || "—",
+            status: toStringValue(item.status, "unknown"),
+            updatedAt: toRelativeDate(item.subscribedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => {
+            if (typeof response.meta?.filteredTotal === "number")
+                return response.meta.filteredTotal;
+            if (typeof response.meta?.total === "number")
+                return response.meta.total;
+            return mappedRows.length;
+        },
+    });
+    const unsubscribeMutation = useMutation({
+        mutationFn: async (id) => {
+            await apiClient.delete(ADMIN_ENDPOINTS.NEWSLETTER_BY_ID(id));
+        },
+        onSuccess: () => {
+            showToast("Subscriber unsubscribed.", "success");
+            queryClient.invalidateQueries({ queryKey: ["admin", "newsletter"] });
+            setUnsubscribeOpen(false);
+            setSelectedRow(null);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to unsubscribe.", "error");
+        },
+    });
+    const handleExportCsv = useCallback(async () => {
+        try {
+            const response = await fetch(ADMIN_ENDPOINTS.NEWSLETTER_EXPORT);
+            if (!response.ok)
+                throw new Error("Export failed");
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = "newsletter-subscribers.csv";
+            a.click();
+            URL.revokeObjectURL(url);
+        }
+        catch {
+            showToast("Failed to export CSV.", "error");
+        }
+    }, [showToast]);
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    if (hasChildren) {
+        return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
+    }
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by email or source", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: "Export CSV" }) }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 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 })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No subscribers found", renderRowActions: (row) => {
+                                    const nr = row;
+                                    return (_jsx(RowActionMenu, { actions: [
+                                            {
+                                                label: "Unsubscribe",
+                                                destructive: true,
+                                                disabled: nr.status === "unsubscribed",
+                                                onClick: () => { setSelectedRow(nr); setUnsubscribeOpen(true); },
+                                            },
+                                        ] }));
+                                } })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt ? "bg-primary text-white border-primary" : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }), _jsx(ConfirmDeleteModal, { isOpen: unsubscribeOpen, onClose: () => { setUnsubscribeOpen(false); setSelectedRow(null); }, onConfirm: () => { if (selectedRow)
+                    unsubscribeMutation.mutate(selectedRow.id); }, isDeleting: unsubscribeMutation.isPending, title: `Unsubscribe ${selectedRow?.primary ?? "subscriber"}?`, message: "The subscriber will be marked as unsubscribed and will no longer receive newsletter emails.", confirmText: "Unsubscribe", variant: "warning" })] }));
+}

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

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