@mohasinac/appkit 2.3.2 → 2.4.1

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

@@ -1,50 +1,59 @@
 "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 { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { Alert, Button, Div, Form, FormActions, Input, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { apiClient } from "../../../http";
 export function AdminFeatureFlagsView({ labels = {}, renderFlags, ...rest }) {
     const queryClient = useQueryClient();
-    const { data, isLoading, error } = useSiteSettings();
+    const { showToast } = useToast();
+    const { data, isLoading, error } = useQuery({
+        queryKey: ["admin", "feature-flags"],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.FEATURE_FLAGS);
+            return res.data ?? { flags: {}, rollouts: {} };
+        },
+    });
     const [flags, setFlags] = React.useState({});
-    const [saveMessage, setSaveMessage] = React.useState(null);
+    const [rollouts, setRollouts] = React.useState({});
     React.useEffect(() => {
-        if (!data?.featureFlags)
+        if (!data)
             return;
-        setFlags(data.featureFlags);
+        setFlags(data.flags ?? {});
+        setRollouts(data.rollouts ?? {});
     }, [data]);
     const saveFlags = useMutation({
         mutationFn: async () => {
-            await apiClient.patch(SITE_SETTINGS_ENDPOINTS.GET, {
-                featureFlags: flags,
-            });
+            await apiClient.put(ADMIN_ENDPOINTS.FEATURE_FLAGS, { flags, rollouts });
         },
         onSuccess: async () => {
-            await queryClient.invalidateQueries({ queryKey: ["site-settings"] });
-            setSaveMessage("Feature flags saved.");
+            await queryClient.invalidateQueries({ queryKey: ["admin", "feature-flags"] });
+            showToast("Feature flags saved.", "success");
         },
         onError: () => {
-            setSaveMessage("Failed to save feature flags.");
+            showToast("Failed to save feature flags.", "error");
         },
     });
     const featureKeys = React.useMemo(() => Object.keys(flags), [flags]);
     const formatLabel = (value) => value
         .replace(/([A-Z])/g, " $1")
-        .replace(/^./, (char) => char.toUpperCase());
+        .replace(/_/g, " ")
+        .replace(/^./, (char) => char.toUpperCase())
+        .trim();
     const defaultFlags = () => (_jsxs(Form, { onSubmit: (event) => {
             event.preventDefault();
             saveFlags.mutate();
-        }, className: "space-y-4", children: [featureKeys.map((key) => (_jsx(Toggle, { checked: Boolean(flags[key]), onChange: (value) => {
-                    setFlags((prev) => ({ ...prev, [key]: value }));
-                    setSaveMessage(null);
-                }, label: formatLabel(key) }, key))), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
-                            setFlags(data?.featureFlags ?? {});
-                            setSaveMessage(null);
-                        }, disabled: saveFlags.isPending, children: "Reset" }), _jsx(Button, { type: "submit", disabled: saveFlags.isPending || featureKeys.length === 0, children: saveFlags.isPending ? "Saving..." : "Save feature flags" })] }), 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 feature flags..." })) : null;
-    const errorAlert = error ? (_jsx(Alert, { variant: "error", title: "Could not load settings", children: error instanceof Error ? error.message : "Unknown error" })) : null;
+        }, className: "space-y-4", children: [featureKeys.length === 0 && !isLoading && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "No feature flags configured. Add flags to siteSettings.featureFlags to manage them here." })), featureKeys.map((key) => (_jsxs(Div, { className: "flex items-start justify-between gap-4 rounded-lg border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-3", children: [_jsxs(Div, { className: "flex-1", children: [_jsx(Toggle, { checked: Boolean(flags[key]), onChange: (value) => {
+                                    setFlags((prev) => ({ ...prev, [key]: value }));
+                                }, label: formatLabel(key) }), _jsx(Text, { className: "mt-0.5 ml-10 text-xs text-zinc-400 dark:text-zinc-500 font-mono", children: key })] }), _jsxs(Div, { className: "flex flex-col gap-1 w-32 shrink-0", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rollout %" }), _jsx(Input, { type: "number", min: 0, max: 100, value: rollouts[key] ?? 100, onChange: (e) => setRollouts((prev) => ({
+                                    ...prev,
+                                    [key]: Math.min(100, Math.max(0, Number(e.target.value))),
+                                })), disabled: !flags[key], className: "w-full" })] })] }, key))), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: () => {
+                            setFlags(data?.flags ?? {});
+                            setRollouts(data?.rollouts ?? {});
+                        }, disabled: saveFlags.isPending, children: "Reset" }), _jsx(Button, { type: "submit", isLoading: saveFlags.isPending, disabled: saveFlags.isPending || featureKeys.length === 0, children: "Save feature flags" })] })] }));
+    const loadingAlert = isLoading ? (_jsx(Alert, { variant: "info", title: "Loading feature flags", children: "Fetching feature flags\u2026" })) : null;
+    const errorAlert = error ? (_jsx(Alert, { variant: "error", title: "Could not load feature flags", children: error instanceof Error ? error.message : "Unknown error" })) : null;
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Feature Flags", sections: [loadingAlert, errorAlert, renderFlags?.() ?? defaultFlags()] }));
 }

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

@@ -1,3 +1,4 @@
+import React from "react";
 import { type ListingViewShellProps } from "../../../ui";
 import type { AdminTableColumn } from "../types";
 export interface AdminListingScaffoldRow {
@@ -6,6 +7,10 @@ export interface AdminListingScaffoldRow {
     secondary: string;
     status: string;
     updatedAt: string;
+    featured?: boolean;
+    isPromoted?: boolean;
+    isOnSale?: boolean;
+    isSold?: boolean;
 }
 interface AdminListingScaffoldProps extends ListingViewShellProps {
     title: string;
@@ -30,6 +35,7 @@ interface AdminListingScaffoldProps extends ListingViewShellProps {
     onSearch?: (query: string) => void;
     searchValue?: string;
     onClearFilters?: () => void;
+    renderRowActions?: (row: AdminListingScaffoldRow) => React.ReactNode;
 }
-export declare function AdminListingScaffold({ title, subtitle, actionLabel, actionHref, columns, getRowHref, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, onSearch, searchValue, onClearFilters, 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

@@ -47,7 +47,7 @@ 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, actionHref, columns, getRowHref, searchPlaceholder, rows, isLoading, errorMessage, emptyLabel, filterGroups, activeFilters, resultSummary, onSearch, searchValue, onClearFilters, 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: {
@@ -64,5 +64,5 @@ export function AdminListingScaffold({ title, subtitle, actionLabel, actionHref,
             } })), 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 })) }));
+                }, 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.` })] }));
 }