@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -0,0 +1,204 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React from "react";
+import { useMutation, useQuery } from "@tanstack/react-query";
+import { Alert, Button, Form, FormActions, Input, Select, StackedViewShell, Toggle, Div, Text, Heading, Row, } from "../../../ui";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+// ── helpers ─────────────────────────────────────────────────────────────────
+function makeCard(zone = 1) {
+    return {
+        id: `card-${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        zone,
+        background: { type: "color", color: "var(--appkit-color-primary)" },
+        content: { title: "", subtitle: "", textColor: "#ffffff", textAlign: "left" },
+        buttons: [],
+        hover: { effect: "scale" },
+    };
+}
+function makeButton() {
+    return { id: `btn-${Date.now()}`, text: "", href: "", variant: "primary", openInNewTab: false };
+}
+const HEIGHT_OPTIONS = [
+    { value: "tall", label: "Tall (80vh)" },
+    { value: "medium", label: "Medium (60vh)" },
+    { value: "viewport", label: "Full viewport (100vh)" },
+];
+const BG_TYPE_OPTIONS = [
+    { value: "image", label: "Image" },
+    { value: "video", label: "Video" },
+    { value: "color", label: "Solid colour" },
+    { value: "gradient", label: "Gradient" },
+];
+const HOVER_OPTIONS = [
+    { value: "none", label: "None" },
+    { value: "scale", label: "Scale up" },
+    { value: "glow", label: "Glow" },
+    { value: "color", label: "Colour shift" },
+];
+const VARIANT_OPTIONS = [
+    { value: "primary", label: "Primary" },
+    { value: "secondary", label: "Secondary" },
+    { value: "outline", label: "Outline" },
+    { value: "ghost", label: "Ghost" },
+    { value: "link", label: "Link" },
+];
+const TEXT_ALIGN_OPTIONS = [
+    { value: "left", label: "Left" },
+    { value: "center", label: "Center" },
+    { value: "right", label: "Right" },
+];
+// ── Zone Picker ──────────────────────────────────────────────────────────────
+function ZonePicker({ selected, onChange, disabled, }) {
+    const zones = [1, 2, 3, 4, 5, 6];
+    return (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-500 mb-1", children: "Zone (row \u00D7 col grid)" }), _jsx("div", { className: "grid gap-1", style: { gridTemplateRows: "repeat(2, 1fr)", gridTemplateColumns: "repeat(3, 1fr)", width: 150 }, children: zones.map((z) => {
+                    const isDisabled = disabled?.(z) ?? false;
+                    return (_jsx("button", { type: "button", disabled: isDisabled, onClick: () => !isDisabled && onChange(z), className: `rounded text-xs font-mono py-2 border transition-colors ${selected === z
+                            ? "bg-primary text-white border-primary"
+                            : isDisabled
+                                ? "bg-zinc-100 text-zinc-300 border-zinc-200 dark:bg-zinc-800 dark:border-zinc-700 cursor-not-allowed"
+                                : "bg-white border-zinc-300 text-zinc-700 hover:border-primary dark:bg-zinc-900 dark:border-zinc-700 dark:text-zinc-200"}`, children: z }, z));
+                }) }), _jsx(Text, { className: "text-[10px] text-zinc-400 mt-1", children: "Row 1 = zones 1\u20133 \u00B7 Row 2 = zones 4\u20136" })] }));
+}
+// ── Background Editor ────────────────────────────────────────────────────────
+function BackgroundEditor({ value, onChange, prefix, }) {
+    const set = (patch) => onChange({ ...value, ...patch });
+    return (_jsxs(Div, { className: "space-y-3", children: [_jsx(Select, { label: "Background type", value: value.type, onChange: (e) => onChange({ type: e.target.value }), options: BG_TYPE_OPTIONS }), (value.type === "image" || value.type === "video") && (_jsxs(_Fragment, { children: [_jsx(Input, { label: `${value.type === "image" ? "Image" : "Video"} URL`, value: value.url ?? "", onChange: (e) => set({ url: e.target.value }), placeholder: "https://..." }), _jsx(Input, { label: "Mobile URL (optional)", value: value.mobileUrl ?? "", onChange: (e) => set({ mobileUrl: e.target.value || undefined }), placeholder: "https://... (portrait crop)" }), value.type === "video" && (_jsx(Input, { label: "Poster / thumbnail URL", value: value.thumbnail ?? "", onChange: (e) => set({ thumbnail: e.target.value || undefined }), placeholder: "https://..." })), _jsxs(Div, { className: "space-y-2 rounded-lg border border-zinc-200 dark:border-zinc-800 p-3", children: [_jsx(Toggle, { label: "Dim overlay", checked: value.dimOverlay?.enabled ?? false, onChange: (v) => set({ dimOverlay: { enabled: v, opacity: value.dimOverlay?.opacity ?? 40 } }) }), value.dimOverlay?.enabled && (_jsxs(Div, { children: [_jsxs(Text, { className: "text-sm font-medium mb-1", children: ["Opacity (", value.dimOverlay.opacity, "%)"] }), _jsx("input", { type: "range", min: 0, max: 90, step: 5, value: value.dimOverlay.opacity, onChange: (e) => set({ dimOverlay: { enabled: true, opacity: Number(e.target.value) } }), className: "w-full" })] }))] })] })), value.type === "color" && (_jsx(Input, { label: "Colour (CSS token or hex)", value: value.color ?? "", onChange: (e) => set({ color: e.target.value }), placeholder: "var(--appkit-color-primary) or #1a1a2e" })), value.type === "gradient" && (_jsxs(_Fragment, { children: [_jsx(Input, { label: "From colour", value: value.gradientFrom ?? "", onChange: (e) => set({ gradientFrom: e.target.value }), placeholder: "var(--appkit-color-primary)" }), _jsx(Input, { label: "To colour", value: value.gradientTo ?? "", onChange: (e) => set({ gradientTo: e.target.value }), placeholder: "var(--appkit-color-secondary)" }), _jsx(Input, { label: "Angle (degrees)", type: "number", value: String(value.gradientAngle ?? 135), onChange: (e) => set({ gradientAngle: Number(e.target.value) }), min: 0, max: 360 })] }))] }));
+}
+// ── Card Editor ──────────────────────────────────────────────────────────────
+function CardEditor({ card, index, otherZones, onChange, onRemove, }) {
+    const set = (patch) => onChange({ ...card, ...patch });
+    const setContent = (patch) => onChange({ ...card, content: { ...card.content, ...patch } });
+    const isZoneDisabled = (z) => otherZones.includes(z);
+    const buttons = card.buttons ?? [];
+    return (_jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-4", children: [_jsxs(Row, { className: "justify-between items-center", children: [_jsxs(Heading, { level: 4, className: "text-sm font-semibold", children: ["Card ", index + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: onRemove, children: "Remove" })] }), _jsx(ZonePicker, { selected: card.zone, onChange: (z) => set({ zone: z }), disabled: isZoneDisabled }), _jsx(Select, { label: "Mobile zone", value: String(card.mobileZone ?? ""), onChange: (e) => set({ mobileZone: e.target.value ? Number(e.target.value) : undefined }), options: [
+                    { value: "", label: "— inherit desktop zone —" },
+                    { value: "2", label: "Zone 2 (row 1, center)" },
+                    { value: "5", label: "Zone 5 (row 2, center)" },
+                ] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-2", children: "Background" }), _jsx(BackgroundEditor, { value: card.background, onChange: (bg) => set({ background: bg }), prefix: `card-${index}` })] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-sm font-medium", children: "Content" }), _jsx(Input, { label: "Eyebrow", value: card.content?.eyebrow ?? "", onChange: (e) => setContent({ eyebrow: e.target.value || undefined }), placeholder: "New \u00B7 Limited \u00B7 Featured" }), _jsx(Input, { label: "Title", value: card.content?.title ?? "", onChange: (e) => setContent({ title: e.target.value }) }), _jsx(Input, { label: "Subtitle", value: card.content?.subtitle ?? "", onChange: (e) => setContent({ subtitle: e.target.value || undefined }) }), _jsx(Input, { label: "Description", value: card.content?.description ?? "", onChange: (e) => setContent({ description: e.target.value || undefined }) }), _jsx(Input, { label: "Text colour (CSS)", value: card.content?.textColor ?? "#ffffff", onChange: (e) => setContent({ textColor: e.target.value }) }), _jsx(Select, { label: "Text align", value: card.content?.textAlign ?? "left", onChange: (e) => setContent({ textAlign: e.target.value }), options: TEXT_ALIGN_OPTIONS })] }), _jsxs(Div, { className: "space-y-2", children: [_jsxs(Row, { className: "justify-between items-center", children: [_jsx(Text, { className: "text-sm font-medium", children: "Buttons (max 3)" }), buttons.length < 3 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => set({ buttons: [...buttons, makeButton()] }), children: "+ Add button" }))] }), buttons.map((btn, bi) => (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 space-y-2", children: [_jsxs(Row, { className: "justify-between items-center", children: [_jsxs(Text, { className: "text-xs font-medium text-zinc-500", children: ["Button ", bi + 1] }), _jsx(Button, { type: "button", variant: "ghost", size: "sm", onClick: () => set({ buttons: buttons.filter((_, i) => i !== bi) }), children: "\u2715" })] }), _jsx(Input, { label: "Label", value: btn.text, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, text: e.target.value }; set({ buttons: next }); } }), _jsx(Input, { label: "Link (href)", value: btn.href, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, href: e.target.value }; set({ buttons: next }); }, placeholder: "/products or https://..." }), _jsx(Select, { label: "Variant", value: btn.variant, onChange: (e) => { const next = [...buttons]; next[bi] = { ...btn, variant: e.target.value }; set({ buttons: next }); }, options: VARIANT_OPTIONS }), _jsx(Toggle, { label: "Open in new tab", checked: btn.openInNewTab ?? false, onChange: (v) => { const next = [...buttons]; next[bi] = { ...btn, openInNewTab: v }; set({ buttons: next }); } })] }, btn.id ?? bi)))] }), _jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { className: "text-sm font-medium", children: "Hover effect" }), _jsx(Select, { label: "Effect", value: card.hover?.effect ?? "none", onChange: (e) => set({ hover: { effect: e.target.value } }), options: HOVER_OPTIONS })] }), _jsx(Toggle, { label: "Button-only card (no text content)", checked: card.isButtonOnly ?? false, onChange: (v) => set({ isButtonOnly: v }) })] }));
+}
+// ── Main Editor ──────────────────────────────────────────────────────────────
+export function AdminCarouselEditorView({ slideId, onSaved, onDeleted, onCancel, ...rest }) {
+    const isEdit = Boolean(slideId);
+    const [title, setTitle] = React.useState("");
+    const [active, setActive] = React.useState(false);
+    const [order, setOrder] = React.useState("");
+    const [height, setHeight] = React.useState("tall");
+    const [autoplayDelayMs, setAutoplayDelayMs] = React.useState("4000");
+    const [background, setBackground] = React.useState({
+        type: "image",
+        url: "",
+        dimOverlay: { enabled: true, opacity: 40 },
+    });
+    const [cards, setCards] = React.useState([]);
+    const [overlayTitle, setOverlayTitle] = React.useState("");
+    const [overlaySubtitle, setOverlaySubtitle] = React.useState("");
+    const [overlayDesc, setOverlayDesc] = React.useState("");
+    const [overlayBtnText, setOverlayBtnText] = React.useState("");
+    const [overlayBtnLink, setOverlayBtnLink] = React.useState("");
+    const [overlayBtnVariant, setOverlayBtnVariant] = React.useState("primary");
+    const [overlayBtnNewTab, setOverlayBtnNewTab] = React.useState(false);
+    const [errorMsg, setErrorMsg] = React.useState("");
+    const [successMsg, setSuccessMsg] = React.useState("");
+    const slideQuery = useQuery({
+        queryKey: ["admin", "carousel", slideId],
+        queryFn: async () => {
+            const res = await apiClient.get(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId));
+            return res?.data ?? res;
+        },
+        enabled: isEdit,
+    });
+    React.useEffect(() => {
+        const d = slideQuery.data;
+        if (!d)
+            return;
+        setTitle(String(d.title ?? ""));
+        setActive(Boolean(d.active));
+        setOrder(d.order !== undefined ? String(d.order) : "");
+        const s = d.settings;
+        setHeight(s?.height ?? "tall");
+        setAutoplayDelayMs(s?.autoplayDelayMs !== undefined ? String(s.autoplayDelayMs) : "4000");
+        if (d.background)
+            setBackground(d.background);
+        if (Array.isArray(d.cards))
+            setCards(d.cards);
+        const ov = d.overlay;
+        if (ov) {
+            setOverlayTitle(String(ov.title ?? ""));
+            setOverlaySubtitle(String(ov.subtitle ?? ""));
+            setOverlayDesc(String(ov.description ?? ""));
+            const btn = ov.button;
+            if (btn) {
+                setOverlayBtnText(String(btn.text ?? ""));
+                setOverlayBtnLink(String(btn.link ?? ""));
+                setOverlayBtnVariant(btn.variant ?? "primary");
+                setOverlayBtnNewTab(Boolean(btn.openInNewTab));
+            }
+        }
+    }, [slideQuery.data]);
+    const buildPayload = () => {
+        const overlay = overlayTitle || overlaySubtitle || overlayDesc
+            ? {
+                title: overlayTitle || undefined,
+                subtitle: overlaySubtitle || undefined,
+                description: overlayDesc || undefined,
+                button: overlayBtnText
+                    ? { text: overlayBtnText, link: overlayBtnLink, variant: overlayBtnVariant, openInNewTab: overlayBtnNewTab }
+                    : undefined,
+            }
+            : undefined;
+        return {
+            title,
+            active,
+            order: order !== "" ? Number(order) : undefined,
+            background,
+            settings: {
+                height,
+                autoplayDelayMs: Number(autoplayDelayMs) || 4000,
+            },
+            cards,
+            overlay,
+        };
+    };
+    const saveMutation = useMutation({
+        mutationFn: async () => {
+            const payload = buildPayload();
+            if (isEdit)
+                return apiClient.put(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId), payload);
+            return apiClient.post(ADMIN_ENDPOINTS.CAROUSEL, payload);
+        },
+        onSuccess: (res) => {
+            const id = res?.data?.id ?? slideId ?? "";
+            setSuccessMsg(isEdit ? "Slide saved." : "Slide created.");
+            setErrorMsg("");
+            if (onSaved && id)
+                onSaved(id);
+        },
+        onError: (err) => {
+            setErrorMsg(err?.message ?? "Failed to save slide.");
+            setSuccessMsg("");
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(slideId)),
+        onSuccess: () => {
+            setSuccessMsg("Slide deleted.");
+            if (onDeleted)
+                onDeleted();
+        },
+        onError: (err) => setErrorMsg(err?.message ?? "Failed to delete."),
+    });
+    const occupiedZones = cards.map((c) => c.zone);
+    return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Carousel Slide" : "New Carousel Slide", sections: [
+            errorMsg ? _jsx(Alert, { variant: "error", children: errorMsg }, "err") : null,
+            successMsg ? _jsx(Alert, { variant: "success", children: successMsg }, "ok") : null,
+            _jsxs(Form, { onSubmit: (e) => { e.preventDefault(); saveMutation.mutate(); }, className: "space-y-6", children: [_jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-4", children: [_jsx(Heading, { level: 3, className: "text-base font-semibold", children: "Slide info" }), _jsx(Input, { label: "Title", value: title, onChange: (e) => setTitle(e.target.value), required: true, placeholder: "e.g. Hot Wheels RLC Exclusives" }), _jsx(Toggle, { label: "Active (visible on homepage)", checked: active, onChange: setActive }), _jsx(Input, { label: "Display order", type: "number", value: order, onChange: (e) => setOrder(e.target.value), min: 0, placeholder: "1" }), _jsx(Select, { label: "Slide height", value: height, onChange: (e) => setHeight(e.target.value), options: HEIGHT_OPTIONS }), _jsx(Input, { label: "Autoplay delay (ms)", type: "number", value: autoplayDelayMs, onChange: (e) => setAutoplayDelayMs(e.target.value), min: 1000, max: 15000, placeholder: "4000", helperText: "How long this slide shows before auto-advancing. Default: 4000 ms." })] }), _jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-4", children: [_jsx(Heading, { level: 3, className: "text-base font-semibold", children: "Background" }), _jsx(BackgroundEditor, { value: background, onChange: setBackground, prefix: "slide" })] }), _jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-4", children: [_jsx(Heading, { level: 3, className: "text-base font-semibold", children: "Overlay text (optional)" }), _jsx(Text, { className: "text-sm text-zinc-500", children: "Centred text layered over the background. Leave blank to use cards only." }), _jsx(Input, { label: "Heading", value: overlayTitle, onChange: (e) => setOverlayTitle(e.target.value), placeholder: "India's #1 Collectibles Marketplace" }), _jsx(Input, { label: "Subtitle", value: overlaySubtitle, onChange: (e) => setOverlaySubtitle(e.target.value), placeholder: "Pok\u00E9mon TCG \u00B7 Hot Wheels \u00B7 Beyblade X" }), _jsx(Input, { label: "Description", value: overlayDesc, onChange: (e) => setOverlayDesc(e.target.value), placeholder: "One sentence description..." }), _jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-800 p-3 space-y-2", children: [_jsx(Text, { className: "text-sm font-medium", children: "CTA button" }), _jsx(Input, { label: "Button text", value: overlayBtnText, onChange: (e) => setOverlayBtnText(e.target.value), placeholder: "Shop Now" }), _jsx(Input, { label: "Button link", value: overlayBtnLink, onChange: (e) => setOverlayBtnLink(e.target.value), placeholder: "/products" }), _jsx(Select, { label: "Variant", value: overlayBtnVariant, onChange: (e) => setOverlayBtnVariant(e.target.value), options: VARIANT_OPTIONS.filter((v) => ["primary", "secondary", "outline"].includes(v.value)) }), _jsx(Toggle, { label: "Open in new tab", checked: overlayBtnNewTab, onChange: setOverlayBtnNewTab })] })] }), _jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-800 p-4 space-y-4", children: [_jsxs(Row, { className: "justify-between items-center", children: [_jsx(Heading, { level: 3, className: "text-base font-semibold", children: "Cards (0\u20132)" }), cards.length < 2 && (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => {
+                                            const usedZones = cards.map((c) => c.zone);
+                                            const freeZone = [1, 2, 3, 4, 5, 6].find((z) => !usedZones.includes(z)) ?? 1;
+                                            setCards([...cards, makeCard(freeZone)]);
+                                        }, children: "+ Add card" }))] }), cards.length === 0 && (_jsx(Text, { className: "text-sm text-zinc-400", children: "No cards \u2014 the overlay text covers the whole slide." })), cards.map((card, i) => (_jsx(CardEditor, { card: card, index: i, otherZones: occupiedZones.filter((z) => z !== card.zone), onChange: (updated) => setCards(cards.map((c, ci) => (ci === i ? updated : c))), onRemove: () => setCards(cards.filter((_, ci) => ci !== i)) }, card.id)))] }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !title || saveMutation.isPending, children: isEdit ? "Save changes" : "Create slide" }), onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, children: "Cancel" })), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => {
+                                    if (confirm("Delete this slide? This cannot be undone."))
+                                        deleteMutation.mutate();
+                                }, children: "Delete slide" }))] })] }, "slide-form"),
+        ] }));
+}

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

@@ -1,40 +1,175 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
-import { HOMEPAGE_ENDPOINTS } from "../../../constants/api-endpoints";
+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 { ListingToolbar, ListingViewShell, Pagination } from "../../../ui";
+import { ADMIN_ENDPOINTS, HOMEPAGE_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useAdminListingData, } from "../hooks/useAdminListingData";
-import { AdminListingScaffold } from "./AdminListingScaffold";
+import { DataTable } from "./DataTable";
+import { RowActionMenu } from "../../../ui/components/RowActionMenu";
+import { apiClient } from "../../../http";
+const PAGE_SIZE = 50;
+const FILTER_KEYS = ["active"];
+const DEFAULT_SORT = "order";
 export function AdminCarouselView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+    const [draggingId, setDraggingId] = useState(null);
+    const [localRows, setLocalRows] = useState([]);
+    const queryClient = useQueryClient();
+    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") || activeFilterCount > 0;
+    const activeRaw = table.get("active");
+    const filterParts = [];
+    if (activeRaw === "true")
+        filterParts.push("active==true");
+    else if (activeRaw === "false")
+        filterParts.push("active==false");
+    const filters = filterParts.join(",") || undefined;
+    const { rows: fetchedRows, total, isLoading, errorMessage } = useAdminListingData({
         queryKey: ["admin", "carousel", "listing"],
         endpoint: `${HOMEPAGE_ENDPOINTS.CAROUSEL}?includeInactive=true`,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        filters,
+        q: table.get("q") || undefined,
         mapRows: (response) => {
-            const sourceItems = Array.isArray(response.data)
-                ? response.data
-                : response.items;
-            return toRecordArray(sourceItems).map((item, index) => {
-                const orderValue = typeof item.order === "number" ? String(item.order) : "-";
-                const mediaType = toStringValue(item.media?.type, "image");
-                const linkUrl = toStringValue(item.link?.url, "no-link");
+            const sourceItems = Array.isArray(response.data) ? response.data : response.items;
+            return toRecordArray(sourceItems)
+                .sort((a, b) => (a.order ?? 0) - (b.order ?? 0))
+                .map((item, index) => {
+                const bg = item.background;
+                const legacyMedia = item.media;
+                const thumbnailUrl = toStringValue(bg?.url, "") || toStringValue(legacyMedia?.url, "") || "";
+                const orderValue = typeof item.order === "number" ? item.order : index + 1;
+                const height = toStringValue(item.settings?.height, "—");
                 return {
                     id: toStringValue(item.id, `slide-${index}`),
                     primary: toStringValue(item.title, `Carousel slide ${index + 1}`),
-                    secondary: `Order: ${orderValue} · Media: ${mediaType} · Link: ${linkUrl}`,
-                    status: typeof item.active === "boolean"
-                        ? item.active
-                            ? "Active"
-                            : "Inactive"
-                        : toStringValue(item.status, "Inactive"),
+                    secondary: `Order: ${orderValue} · Height: ${height} · ${item.active ? "Active" : "Inactive"}`,
+                    status: typeof item.active === "boolean" ? (item.active ? "Active" : "Inactive") : "Inactive",
                     updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                    order: orderValue,
+                    thumbnailUrl,
                 };
             });
         },
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     });
+    React.useEffect(() => {
+        setLocalRows(fetchedRows);
+    }, [fetchedRows]);
+    const reorderMutation = useMutation({
+        mutationFn: (ids) => apiClient.post(ADMIN_ENDPOINTS.CAROUSEL_REORDER, { slideIds: ids }),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["admin", "carousel", "listing"] });
+        },
+    });
+    const deleteMutation = useMutation({
+        mutationFn: (id) => apiClient.delete(ADMIN_ENDPOINTS.CAROUSEL_BY_ID(id)),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["admin", "carousel", "listing"] });
+        },
+    });
+    const handleDragStart = (id) => setDraggingId(id);
+    const handleDrop = (targetId) => {
+        if (!draggingId || draggingId === targetId) {
+            setDraggingId(null);
+            return;
+        }
+        const from = localRows.findIndex((r) => r.id === draggingId);
+        const to = localRows.findIndex((r) => r.id === targetId);
+        if (from === -1 || to === -1) {
+            setDraggingId(null);
+            return;
+        }
+        const next = [...localRows];
+        const [moved] = next.splice(from, 1);
+        next.splice(to, 0, moved);
+        setLocalRows(next);
+        setDraggingId(null);
+        reorderMutation.mutate(next.map((r) => r.id));
+    };
+    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: "Homepage Carousel", subtitle: "Manage hero slide ordering, activation state, and destination links in one listing workflow.", actionLabel: "New slide", searchPlaceholder: "Search slide titles or link URLs", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No carousel slides found", resultSummary: `Showing ${rows.length} of ${total} slides` }));
+    const displayRows = (localRows.length > 0 ? localRows : fetchedRows).map((row) => ({
+        ...row,
+        secondary: (_jsxs("div", { className: "flex items-center gap-3", children: [row.thumbnailUrl && (_jsx("img", { src: row.thumbnailUrl, alt: "", className: "w-14 h-9 object-cover rounded flex-shrink-0 bg-zinc-200 dark:bg-zinc-800" })), _jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400 truncate", children: row.secondary })] })),
+    }));
+    const columns = [
+        {
+            key: "drag",
+            header: "",
+            render: (row) => (_jsx("div", { draggable: true, onDragStart: () => handleDragStart(row.id), onDragOver: (e) => e.preventDefault(), onDrop: () => handleDrop(row.id), className: "cursor-grab active:cursor-grabbing text-zinc-400 px-1 select-none", title: "Drag to reorder", children: "\u283F" })),
+        },
+        {
+            key: "primary",
+            header: "Title",
+            render: (row) => _jsx("span", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: row.primary }),
+        },
+        {
+            key: "secondary",
+            header: "Details",
+            render: (row) => row.secondary,
+        },
+        {
+            key: "status",
+            header: "Status",
+            render: (row) => (_jsx("span", { className: `inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${row.status === "Active" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300" : "bg-zinc-100 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-400"}`, children: row.status })),
+        },
+        {
+            key: "updatedAt",
+            header: "Updated",
+            render: (row) => _jsx("span", { className: "text-sm text-zinc-500", children: row.updatedAt }),
+        },
+        {
+            key: "actions",
+            header: "",
+            render: (row) => (_jsx(RowActionMenu, { actions: [
+                    { label: "Edit", onClick: () => { window.location.href = `/admin/carousel/${row.id}/edit`; } },
+                    {
+                        label: "Delete",
+                        destructive: true,
+                        onClick: () => {
+                            if (confirm("Delete this carousel slide? This cannot be undone.")) {
+                                deleteMutation.mutate(row.id);
+                            }
+                        },
+                    },
+                ] })),
+        },
+    ];
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search slide titles", onSearchChange: setSearchInput, onSearchCommit: commitSearch, 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: displayRows, columns: columns, isLoading: isLoading, emptyLabel: "No carousel slides \u2014 use 'New slide' to add one", getRowHref: (row) => `/admin/carousel/${row.id}/edit` })] }), 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, active: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.active || "") === 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/AdminCartsView.d.ts

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

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

@@ -0,0 +1,82 @@
+"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 = ["type"];
+const DEFAULT_SORT = "-updatedAt";
+const SORT_OPTIONS = [
+    { value: "-updatedAt", label: "Recently updated" },
+    { value: "updatedAt", label: "Oldest" },
+];
+const TYPE_OPTIONS = ["All", "guest", "auth"];
+export function AdminCartsView({ 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 typeRaw = table.get("type");
+    const filters = typeRaw && typeRaw !== "All" ? `type==${typeRaw}` : undefined;
+    const { rows, total, isLoading, errorMessage } = useAdminListingData({
+        queryKey: ["admin", "carts", "listing"],
+        endpoint: ADMIN_ENDPOINTS.ADMIN_CARTS,
+        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) => {
+            const isGuest = !item.userId;
+            const itemCount = Array.isArray(item.items) ? item.items.length : 0;
+            const sessionShort = toStringValue(item.sessionId, "").slice(0, 8);
+            return {
+                id: toStringValue(item.id, `cart-${index}`),
+                primary: isGuest
+                    ? `Guest · ${sessionShort || "—"}`
+                    : toStringValue(item.userId, `user-${index}`),
+                secondary: `${itemCount} item${itemCount !== 1 ? "s" : ""}`,
+                status: isGuest ? "Guest" : "Authenticated",
+                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 by user ID or session", 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 carts 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: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: TYPE_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "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})` : ""] }) })] })] }))] }));
+}

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

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