@mohasinac/appkit 2.3.2 → 2.4.1

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

@@ -0,0 +1,162 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button, Form, Input, RichTextEditor, Select, StackedViewShell, TagInput, Toggle, useToast, } from "../../../ui";
+import { ImageUpload } from "../../media/upload/ImageUpload";
+import { useMediaUpload } from "../../media";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+// --- Helpers -----------------------------------------------------------------
+const STATUS_OPTIONS = [
+    { label: "Draft", value: "draft" },
+    { label: "Published", value: "published" },
+    { label: "Archived", value: "archived" },
+];
+const CATEGORY_OPTIONS = [
+    { label: "News", value: "news" },
+    { label: "Tips", value: "tips" },
+    { label: "Guides", value: "guides" },
+    { label: "Updates", value: "updates" },
+    { label: "Community", value: "community" },
+];
+function toSlug(str) {
+    const base = str
+        .toLowerCase()
+        .trim()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+    return base.startsWith("blog-") ? base : `blog-${base}`;
+}
+function toDateInputValue(val) {
+    if (!val)
+        return "";
+    try {
+        return new Date(val).toISOString().split("T")[0];
+    }
+    catch {
+        return "";
+    }
+}
+// --- Component ---------------------------------------------------------------
+export function AdminBlogEditorView({ postId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(postId);
+    const [title, setTitle] = React.useState("");
+    const [slug, setSlug] = React.useState("");
+    const [slugManual, setSlugManual] = React.useState(false);
+    const [excerpt, setExcerpt] = React.useState("");
+    const [content, setContent] = React.useState("");
+    const [coverImage, setCoverImage] = React.useState("");
+    const [category, setCategory] = React.useState("news");
+    const [tags, setTags] = React.useState([]);
+    const [status, setStatus] = React.useState("draft");
+    const [isFeatured, setIsFeatured] = React.useState(false);
+    const [authorName, setAuthorName] = React.useState("Admin");
+    const [publishedAt, setPublishedAt] = React.useState("");
+    const [metaTitle, setMetaTitle] = React.useState("");
+    const [metaDescription, setMetaDescription] = React.useState("");
+    const { showToast } = useToast();
+    const { upload } = useMediaUpload();
+    // --- load existing post (edit mode) ---
+    const postQuery = useQuery({
+        queryKey: ["admin", "blog", postId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.BLOG_BY_ID(postId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const p = postQuery.data;
+        if (!p)
+            return;
+        setTitle(p.title ?? "");
+        setSlug(p.slug ?? "");
+        setSlugManual(true);
+        setExcerpt(p.excerpt ?? "");
+        setContent(p.content ?? "");
+        setCoverImage(typeof p.coverImage === "string"
+            ? p.coverImage
+            : p.coverImage?.url ?? "");
+        setCategory(p.category ?? "news");
+        setTags(Array.isArray(p.tags) ? p.tags : []);
+        setStatus(p.status ?? "draft");
+        setIsFeatured(p.isFeatured ?? false);
+        setAuthorName(p.authorName ?? "Admin");
+        setPublishedAt(toDateInputValue(p.publishedAt));
+        setMetaTitle(p.metaTitle ?? "");
+        setMetaDescription(p.metaDescription ?? "");
+    }, [postQuery.data]);
+    const handleTitleChange = (value) => {
+        setTitle(value);
+        if (!slugManual)
+            setSlug(toSlug(value));
+    };
+    // --- save ---
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                title,
+                slug: slug || toSlug(title),
+                excerpt,
+                content,
+                coverImage: coverImage || undefined,
+                category,
+                tags,
+                status,
+                isFeatured,
+                authorName,
+                publishedAt: status === "published" && !publishedAt
+                    ? new Date().toISOString()
+                    : publishedAt
+                        ? new Date(publishedAt).toISOString()
+                        : undefined,
+                metaTitle: metaTitle || undefined,
+                metaDescription: metaDescription || undefined,
+            };
+            if (isEdit) {
+                return apiClient.patch(ADMIN_ENDPOINTS.BLOG_BY_ID(postId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.BLOG, {
+                ...payload,
+                authorId: "admin",
+                readTimeMinutes: Math.max(1, Math.round(content.replace(/<[^>]*>/g, "").split(/\s+/).length / 200)),
+                views: 0,
+            });
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? res?.id ?? postId;
+            showToast(isEdit ? "Post updated." : "Post created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save post.", "error");
+        },
+    });
+    // --- delete ---
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.BLOG_BY_ID(postId)),
+        onSuccess: () => {
+            showToast("Post deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ?? "Failed to delete post.", "error"),
+    });
+    const isSubmitting = saveMutation.isPending || postQuery.isLoading;
+    const canSave = Boolean(title);
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Post" : "New Blog Post", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-5", children: [_jsx(Input, { label: "Title", value: title, onChange: (e) => handleTitleChange(e.target.value), required: true, placeholder: "e.g. How to Grade Pok\u00E9mon Cards" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                            setSlug(e.target.value);
+                            setSlugManual(true);
+                        }, placeholder: "blog-how-to-grade-pokemon-cards", helperText: "Auto-generated from title. Must start with 'blog-'." }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: (v) => setCategory(v) }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: (v) => setStatus(v) })] }), _jsx(Input, { label: "Excerpt", value: excerpt, onChange: (e) => setExcerpt(e.target.value), placeholder: "Short summary shown in listings and cards" }), _jsx(ImageUpload, { label: "Cover image", currentImage: coverImage, onUpload: (file) => upload(file, "blog", true, { type: "blog-cover", title: title || slug, category }), onChange: setCoverImage }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Content" }), _jsx(RichTextEditor, { value: content, onChange: setContent, placeholder: "Write your article here...", minHeightClassName: "min-h-[320px]" })] }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. pokemon, grading, tcg" }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Input, { label: "Author name", value: authorName, onChange: (e) => setAuthorName(e.target.value), placeholder: "Author display name" }), _jsx(Input, { label: "Publish date (optional)", value: publishedAt, onChange: (e) => setPublishedAt(e.target.value), type: "date", helperText: "Auto-set to now when publishing." })] }), _jsx(Toggle, { label: "Featured post", checked: isFeatured, onChange: setIsFeatured }), _jsx(Input, { label: "Meta title (optional)", value: metaTitle, onChange: (e) => setMetaTitle(e.target.value), placeholder: "Defaults to post title" }), _jsx(Input, { label: "Meta description (optional)", value: metaDescription, onChange: (e) => setMetaDescription(e.target.value), placeholder: "SEO description \u2014 max 160 chars", maxLength: 160 }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create post" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this post? This cannot be undone.")) {
+                                        deleteMutation.mutate();
+                                    }
+                                }, children: "Delete post" }))] })] }, "blog-form"),
+        ] }));
+}

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

@@ -1,4 +1,7 @@
 import type { ListingViewShellProps } from "../../../ui";
+import type { AdminListingScaffoldRow } from "./AdminListingScaffold";
 export interface AdminBlogViewProps extends ListingViewShellProps {
+    actionHref?: string;
+    getRowHref?: (row: AdminListingScaffoldRow) => string;
 }
-export declare function AdminBlogView({ children, ...props }: AdminBlogViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function AdminBlogView({ children, getRowHref, ...props }: AdminBlogViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,26 +1,69 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+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 { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
-export function AdminBlogView({ children, ...props }) {
+import { DataTable } from "./DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status", "isFeatured"];
+const DEFAULT_SORT = "-publishedAt";
+const SORT_OPTIONS = [
+    { value: "-publishedAt", label: "Latest" },
+    { value: "publishedAt", label: "Oldest" },
+    { value: "-createdAt", label: "Newest draft" },
+    { value: "title", label: "Title A–Z" },
+];
+const STATUS_OPTIONS = ["All", "published", "draft", "archived"];
+export function AdminBlogView({ children, getRowHref, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const [q, setQ] = React.useState("");
-    const [statusFilter, setStatusFilter] = React.useState("");
-    const [featuredFilter, setFeaturedFilter] = React.useState("");
+    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 filterParts = [];
-    if (statusFilter && statusFilter !== "All")
-        filterParts.push(`status==${statusFilter}`);
-    if (featuredFilter === "Featured Only")
+    const statusRaw = table.get("status");
+    if (statusRaw && statusRaw !== "All")
+        filterParts.push(`status==${statusRaw}`);
+    if (table.get("isFeatured") === "true")
         filterParts.push("isFeatured==true");
     const filters = filterParts.join(",") || undefined;
     const { rows, total, isLoading, errorMessage } = useAdminListingData({
-        queryKey: ["admin", "blog", "listing", q, filters ?? ""],
+        queryKey: ["admin", "blog", "listing"],
         endpoint: ADMIN_ENDPOINTS.BLOG,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
         filters,
-        q,
+        q: table.get("q") || undefined,
         mapRows: (response) => toRecordArray(response.posts).map((item, index) => ({
             id: toStringValue(item.id, `post-${index}`),
             primary: toStringValue(item.title, "Untitled post"),
@@ -32,30 +75,17 @@ export function AdminBlogView({ children, ...props }) {
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => {
-            if (typeof response.meta?.filteredTotal === "number") {
+            if (typeof response.meta?.filteredTotal === "number")
                 return response.meta.filteredTotal;
-            }
-            if (typeof response.meta?.total === "number") {
+            if (typeof response.meta?.total === "number")
                 return response.meta.total;
-            }
             return mappedRows.length;
         },
     });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "admin", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "admin", ...props, title: "Blog Publishing", subtitle: "Manage editorial drafts, featured placement, and publish readiness in the shared listing frame.", actionLabel: "New article", searchPlaceholder: "Search articles, authors, or tags", onSearch: setQ, searchValue: q, rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No blog posts found", resultSummary: `Showing ${rows.length} of ${total} posts`, filterGroups: [
-            {
-                title: "Status",
-                options: ["All", "published", "draft", "archived"],
-                active: statusFilter || "All",
-                onSelect: (opt) => setStatusFilter(opt === "All" ? "" : opt),
-            },
-            {
-                title: "Featured",
-                options: ["All", "Featured Only"],
-                active: featuredFilter || "All",
-                onSelect: (opt) => setFeaturedFilter(opt === "All" ? "" : opt),
-            },
-        ] }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search articles, authors, or tags", 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 }), 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 blog posts found", getRowHref: getRowHref })] }), 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" }) })] })] }), _jsxs("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))) })] }), _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: "Featured" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [{ label: "All", value: "" }, { label: "Featured only", value: "true" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isFeatured: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isFeatured || "") === opt.value ? "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.label }, opt.label))) })] })] }), _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})` : ""] }) })] })] }))] }));
 }

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

@@ -0,0 +1,7 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminBrandEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    brandId?: string;
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+}
+export declare function AdminBrandEditorView({ brandId, onSaved, onDeleted, ...rest }: AdminBrandEditorViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,104 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Button, Form, Input, StackedViewShell, Toggle, useToast, } from "../../../ui";
+import { ImageUpload } from "../../media/upload/ImageUpload";
+import { useMediaUpload } from "../../media";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+function toBrandSlug(str) {
+    const base = str.toLowerCase().trim().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+    return base.startsWith("brand-") ? base : `brand-${base}`;
+}
+export function AdminBrandEditorView({ brandId, onSaved, onDeleted, ...rest }) {
+    const isEdit = Boolean(brandId);
+    const [name, setName] = React.useState("");
+    const [slug, setSlug] = React.useState("");
+    const [slugManual, setSlugManual] = React.useState(false);
+    const [description, setDescription] = React.useState("");
+    const [logoURL, setLogoURL] = React.useState("");
+    const [bannerURL, setBannerURL] = React.useState("");
+    const [website, setWebsite] = React.useState("");
+    const [isActive, setIsActive] = React.useState(true);
+    const [displayOrder, setDisplayOrder] = React.useState("");
+    const { showToast } = useToast();
+    const brandQuery = useQuery({
+        queryKey: ["admin", "brand", brandId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const brand = brandQuery.data;
+        if (!brand)
+            return;
+        setName(brand.name ?? "");
+        setSlug(brand.slug ?? "");
+        setSlugManual(true);
+        setDescription(brand.description ?? "");
+        setLogoURL(brand.logoURL ?? "");
+        setBannerURL(brand.bannerURL ?? "");
+        setWebsite(brand.website ?? "");
+        setIsActive(brand.isActive ?? true);
+        setDisplayOrder(brand.displayOrder !== undefined ? String(brand.displayOrder) : "");
+    }, [brandQuery.data]);
+    const handleNameChange = (value) => {
+        setName(value);
+        if (!slugManual)
+            setSlug(toBrandSlug(value));
+    };
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = {
+                name,
+                slug: slug || toBrandSlug(name),
+                description: description || undefined,
+                logoURL: logoURL || undefined,
+                bannerURL: bannerURL || undefined,
+                website: website || undefined,
+                isActive,
+                displayOrder: displayOrder !== "" ? Number(displayOrder) : undefined,
+            };
+            if (isEdit) {
+                return apiClient.put(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId), payload);
+            }
+            return apiClient.post(ADMIN_ENDPOINTS.BRANDS, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? res?.id ?? brandId;
+            showToast(isEdit ? "Brand updated." : "Brand created.", "success");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            showToast(err?.message ?? "Failed to save brand.", "error");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.BRAND_BY_ID(brandId)),
+        onSuccess: () => {
+            showToast("Brand deleted.", "success");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => showToast(err?.message ?? "Failed to delete brand.", "error"),
+    });
+    const { upload } = useMediaUpload();
+    const isSubmitting = saveMutation.isPending || brandQuery.isLoading;
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Brand" : "Create Brand", sections: [
+            _jsxs(Form, { onSubmit: (e) => {
+                    e.preventDefault();
+                    saveMutation.mutate();
+                }, className: "space-y-4", children: [_jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Brand name", value: name, onChange: (e) => handleNameChange(e.target.value), required: true, placeholder: "e.g. Hot Wheels" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
+                                    setSlug(e.target.value);
+                                    setSlugManual(true);
+                                }, placeholder: "brand-hot-wheels", helperText: "Auto-generated from name. Must start with 'brand-'." })] }), _jsx(Input, { label: "Description", value: description, onChange: (e) => setDescription(e.target.value), placeholder: "Brief description of the brand" }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(ImageUpload, { label: "Logo", currentImage: logoURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-logo", brand: name || slug }), onChange: setLogoURL }), _jsx(ImageUpload, { label: "Banner", currentImage: bannerURL, onUpload: (file) => upload(file, "brands", true, { type: "brand-banner", brand: name || slug }), onChange: setBannerURL })] }), _jsxs("div", { className: "grid sm:grid-cols-2 gap-4", children: [_jsx(Input, { label: "Website", value: website, onChange: (e) => setWebsite(e.target.value), placeholder: "https://brand.com", type: "url" }), _jsx(Input, { label: "Display order", value: displayOrder, onChange: (e) => setDisplayOrder(e.target.value), type: "number", min: 0, placeholder: "0" })] }), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !name || isSubmitting, children: isEdit ? "Save changes" : "Create brand" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this brand? This cannot be undone.")) {
+                                        deleteMutation.mutate();
+                                    }
+                                }, children: "Delete brand" }))] })] }, "brand-form"),
+        ] }));
+}

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

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

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

@@ -0,0 +1,76 @@
+"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 { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
+import { DataTable } from "./DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["isActive"];
+const DEFAULT_SORT = "displayOrder";
+const SORT_OPTIONS = [
+    { value: "displayOrder", label: "Display order" },
+    { value: "name", label: "Name A–Z" },
+    { value: "-name", label: "Name Z–A" },
+    { value: "-createdAt", label: "Newest" },
+];
+export function AdminBrandsView({ children, ...props }) {
+    const hasChildren = React.Children.count(children) > 0;
+    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 isActiveRaw = table.get("isActive");
+    const filters = isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "brands", "listing"],
+        endpoint: ADMIN_ENDPOINTS.BRANDS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `brand-${index}`),
+            primary: toStringValue(item.name, "Untitled brand"),
+            secondary: `Slug: ${toStringValue(item.slug, "no-slug")}${item.website ? ` · ${item.website}` : ""}`,
+            status: typeof item.isActive === "boolean" ? (item.isActive ? "Active" : "Inactive") : "Active",
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+    });
+    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("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search brands by name or slug", 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 }), 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 brands found" })] }), 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: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value ? "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.label }, opt.label))) })] }) }), _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})` : ""] }) })] })] }))] }));
+}

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

@@ -0,0 +1,8 @@
+import type { StackedViewShellProps } from "../../../ui";
+export interface AdminCarouselEditorViewProps extends Omit<StackedViewShellProps, "sections"> {
+    slideId?: string;
+    onSaved?: (id: string) => void;
+    onDeleted?: () => void;
+    onCancel?: () => void;
+}
+export declare function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel, ...rest }: AdminCarouselEditorViewProps): import("react/jsx-runtime").JSX.Element;