@mohasinac/appkit 4.61.0 → 4.62.0

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { normalizeError } from "../../../errors/normalize.js";
-import { useApiMutation } from "@mohasinac/appkit/client";
+import { useApiMutation, sortBy, sieveFilter, SIEVE_OP } from "@mohasinac/appkit/client";
 import React from "react";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect.js";
 import { CategoryInlineSelect } from "../../seller/components/CategoryInlineSelect.js";
-import { Button, Checkbox, Div, Input, Modal, PaginatedSelect, Row, Select, Stack, Text, Textarea, useToast } from "../../../ui/index.js";
+import { Badge, Button, Checkbox, ConfirmDeleteModal, Div, FilterChipGroup, Input, PaginatedSelect, Row, Select, SideDrawer, Span, Stack, Text, Textarea, Toggle, useToast } from "../../../ui/index.js";
 import { ICON_KEY_OPTIONS } from "./sections/icon-options.js";
 import { FormErrorSummary, applyZodIssues } from "../../../ui/forms/index.js";
 import { homepageSectionFormSchema, } from "../schemas/homepage-section-form.js";
@@ -16,10 +16,16 @@ import { apiClient } from "../../../http/index.js";
 import { ADMIN_ENDPOINTS } from "../../../constants/index.js";
 import { ROUTES } from "../../../next/routing/route-map.js";
 import { useAdminSectionsListing } from "../hooks/useAdminSectionsListing.js";
-import { DataTable } from "./DataTable.js";
+import { toRecordArray, toRelativeDate } from "../hooks/useAdminListingData.js";
+import { useOptimisticRowFlag } from "../hooks/useOptimisticRowFlag.js";
+import { DataListingView } from "./DataListingView.js";
+import { QuickEditMenu } from "./QuickEditMenu.js";
+import { ALL_TAB } from "../constants/filter-tabs.js";
+import { ACTIONS } from "../../../_internal/shared/actions/action-registry.js";
 import { templatesForType, templateById, profileById, } from "./sections/sectionTemplates.js";
 import { SECTION_TYPE_OPTIONS, SUPPORTED_TYPED_BUILDERS, RESOURCE_SORT_OPTIONS, FAQ_CATEGORY_OPTIONS, DEFAULT_PRODUCTS_BUILDER, DEFAULT_AUCTIONS_BUILDER, DEFAULT_STATS_BUILDER, DEFAULT_PRE_ORDERS_BUILDER, DEFAULT_STORES_BUILDER, DEFAULT_EVENTS_BUILDER, DEFAULT_SOCIAL_FEED_BUILDER, DEFAULT_WELCOME_BUILDER, DEFAULT_TRUST_INDICATORS_BUILDER, DEFAULT_CATEGORIES_BUILDER, DEFAULT_BRANDS_BUILDER, DEFAULT_BANNER_BUILDER, DEFAULT_FEATURES_BUILDER, DEFAULT_REVIEWS_BUILDER, DEFAULT_WHATSAPP_BUILDER, DEFAULT_FAQ_BUILDER, DEFAULT_BLOG_BUILDER, DEFAULT_NEWSLETTER_BUILDER, DEFAULT_CAROUSEL_BUILDER, DEFAULT_CUSTOM_CARDS_BUILDER, DEFAULT_GOOGLE_REVIEWS_BUILDER, DEFAULT_FEATURED_BUNDLES_BUILDER, DEFAULT_PRIZE_DRAWS_BUILDER, DEFAULT_EVENT_RAFFLES_BUILDER, DEFAULT_COLLECTION_CARDS_BUILDER, } from "./sections/adminSectionsTypes.js";
 import { toStringValue, buildProductsConfig, buildAuctionsConfig, buildStatsConfig, buildPreOrdersConfig, buildStoresConfig, buildEventsConfig, buildSocialFeedConfig, buildWelcomeConfig, buildTrustIndicatorsConfig, buildCategoriesConfig, buildBrandsConfig, buildBannerConfig, buildFeaturesConfig, buildReviewsConfig, buildWhatsAppConfig, buildFAQConfig, buildBlogConfig, buildNewsletterConfig, buildCarouselConfig, buildCustomCardsConfig, buildGoogleReviewsConfig, buildFeaturedBundlesConfig, buildPrizeDrawsConfig, buildEventRafflesConfig, buildCollectionCardsConfig, parseProductsBuilder, parseAuctionsBuilder, parseStatsBuilder, parsePreOrdersBuilder, parseStoresBuilder, parseEventsBuilder, parseSocialFeedBuilder, parseWelcomeBuilder, parseTrustIndicatorsBuilder, parseCategoriesBuilder, parseBrandsBuilder, parseBannerBuilder, parseFeaturesBuilder, parseReviewsBuilder, parseWhatsAppBuilder, parseFAQBuilder, parseBlogBuilder, parseNewsletterBuilder, parseCarouselBuilder, parseCustomCardsBuilder, parseGoogleReviewsBuilder, parseFeaturedBundlesBuilder, parsePrizeDrawsBuilder, parseEventRafflesBuilder, parseCollectionCardsBuilder } from "./sections/adminSectionsBuildParse.js";
+import { toUserMessage } from "../../../errors/error-display-map.js";
 const __P = {
     p3: "p-[var(--appkit-space-3)]",
     p4: "p-[var(--appkit-space-4)]",
@@ -35,12 +41,28 @@ const LBL_SCROLL_INTERVAL = "Scroll interval (ms)";
 const LBL_VIEW_MORE = "View all link label";
 const PH_VIEW_MORE = "View all →";
 const HELP_VIEW_MORE = "Leave blank to use the default label.";
-export function AdminSectionsView({ children }) {
-    const hasChildren = React.Children.count(children) > 0;
+/**
+ * The homepage-section editor: the envelope, 25 typed builders and the raw
+ * JSON fallback.
+ *
+ * 🛑 THIS IS A SEPARATE COMPONENT FOR A MECHANICAL REASON, NOT FOR TIDINESS.
+ * `usePanelUrlSync` lives inside `useAdminListing` inside `DataListingView`,
+ * so the id of the row whose pencil was clicked is only readable inside the
+ * `renderEditor(ctx)` callback. The hydrate effect below must run in a
+ * component body, so the editor has to BE a component.
+ *
+ * 🛑 The caller MUST pass `key={ctx.editId ?? "create"}`. `isCreateOpen ||
+ * isEditOpen` is a single boolean, so clicking row B's pencil while row A's
+ * drawer is open does NOT unmount this component — `editId` simply changes.
+ * Without the key, `hydratedRef` below sees "already hydrated" and the admin
+ * edits B's record with A's values, then saves it. Silent cross-record
+ * corruption, no error anywhere. The remount the key forces is also what
+ * resets the 24 non-matching builders and `selectedTemplateId`, which the old
+ * single-component version had to do by hand and did not.
+ */
+function SectionEditorPanel({ sectionId, section, siblingSections, isSectionsLoading, onDone, }) {
+    const isCreate = !sectionId;
     const queryClient = useQueryClient();
-    const [isModalOpen, setIsModalOpen] = React.useState(false);
-    const [mode, setMode] = React.useState("create");
-    const [selectedSectionId, setSelectedSectionId] = React.useState("");
     const [sectionType, setSectionType] = React.useState("products");
     /*
      * D1 — which template the admin picked, or "" for the type's defaults.
@@ -51,7 +73,19 @@ export function AdminSectionsView({ children }) {
     const [selectedTemplateId, setSelectedTemplateId] = React.useState("");
     const [enabled, setEnabled] = React.useState(true);
     const [order, setOrder] = React.useState("");
-    const [configJson, setConfigJson] = React.useState("{}");
+    /*
+     * The RAW textarea contents — meaningful only for a section type with no
+     * typed builder. For a typed builder `configJson` below is DERIVED from
+     * `typedConfig`, because the textarea is `readOnly` in that case and was
+     * therefore never an input: it is a preview.
+     *
+     * 🛑 This used to be plain state written by an effect on `typedConfig`,
+     * which ran AFTER the hydrate effect and overwrote the stored document with
+     * a builder-generated config on every open. Deriving removes the race by
+     * construction rather than by ordering, and removes a second render per
+     * builder keystroke.
+     */
+    const [rawConfigJson, setRawConfigJson] = React.useState("{}");
     const [productsBuilder, setProductsBuilder] = React.useState(DEFAULT_PRODUCTS_BUILDER);
     const [auctionsBuilder, setAuctionsBuilder] = React.useState(DEFAULT_AUCTIONS_BUILDER);
     const [statsBuilder, setStatsBuilder] = React.useState(DEFAULT_STATS_BUILDER);
@@ -77,16 +111,9 @@ export function AdminSectionsView({ children }) {
     const [prizeDrawsBuilder, setPrizeDrawsBuilder] = React.useState(DEFAULT_PRIZE_DRAWS_BUILDER);
     const [eventRafflesBuilder, setEventRafflesBuilder] = React.useState(DEFAULT_EVENT_RAFFLES_BUILDER);
     const [collectionCardsBuilder, setCollectionCardsBuilder] = React.useState(DEFAULT_COLLECTION_CARDS_BUILDER);
-    const [reorderDraft, setReorderDraft] = React.useState([]);
-    const [reorderServerSnapshot, setReorderServerSnapshot] = React.useState([]);
-    const [reorderUndoStack, setReorderUndoStack] = React.useState([]);
-    const [dragIndex, setDragIndex] = React.useState(null);
     const toast = useToast();
     const isTypedBuilder = SUPPORTED_TYPED_BUILDERS.includes(sectionType);
-    const { sections, isLoading, errorMessage } = useAdminSectionsListing({
-        page: 1,
-        pageSize: 50,
-    });
+    const duplicateOfType = React.useMemo(() => (isCreate ? siblingSections.find((s) => s.type === sectionType) : undefined), [isCreate, siblingSections, sectionType]);
     const categoriesQuery = useQuery({
         queryKey: ["admin", "sections", "categories", "options"],
         queryFn: () => apiClient.get(`${ADMIN_ENDPOINTS.CATEGORIES}?page=1&pageSize=100&sorts=name`),
@@ -165,25 +192,15 @@ export function AdminSectionsView({ children }) {
         eventRafflesBuilder,
         collectionCardsBuilder,
     ]);
-    React.useEffect(() => {
-        if (!typedConfig) {
-            return;
-        }
-        setConfigJson(JSON.stringify(typedConfig, null, 2));
-    }, [typedConfig]);
-    React.useEffect(() => {
-        const sorted = [...sections]
-            .sort((a, b) => a.order - b.order)
-            .map((section) => ({
-            id: section.id,
-            type: section.type,
-            order: section.order,
-        }));
-        const normalized = normalizeOrder(sorted);
-        setReorderDraft(normalized);
-        setReorderServerSnapshot(normalized);
-        setReorderUndoStack([]);
-    }, [sections]);
+    /**
+     * What the Generated-config preview shows and what the save sends.
+     *
+     * Derived for a typed builder, raw state otherwise. `typedConfig` is null
+     * for the three types with no builder (`how-it-works`, `testimonials`,
+     * `promo-grid`), which is the same set `isTypedBuilder` is false for — so
+     * the two branches agree and neither can strand the other.
+     */
+    const configJson = React.useMemo(() => (isTypedBuilder && typedConfig ? JSON.stringify(typedConfig, null, 2) : rawConfigJson), [isTypedBuilder, typedConfig, rawConfigJson]);
     const saveSection = useApiMutation({
         errorMessage: "Failed to save section.",
         mutationFn: async () => {
@@ -195,7 +212,7 @@ export function AdminSectionsView({ children }) {
                 void normalizeError(_err);
                 throw new Error("Config must be valid JSON.");
             }
-            if (mode === "create") {
+            if (isCreate) {
                 await apiClient.post(ADMIN_ENDPOINTS.SECTIONS, {
                     type: sectionType,
                     enabled,
@@ -204,9 +221,17 @@ export function AdminSectionsView({ children }) {
                 });
                 return;
             }
-            if (!selectedSectionId) {
-                throw new Error("Select a section to update.");
-            }
+            /*
+             * `config` is sent unconditionally and that is deliberate. The
+             * repository MERGES it (`{...existing.config, ...data.config}`), which
+             * costs one extra read — the price of a guaranteed-correct write. A
+             * "diff and skip" would save that read and silently drop an admin's
+             * edit whenever the comparison was wrong, which is the worse failure.
+             *
+             * The reads worth saving are the per-ROW ones, and those already omit
+             * `config`: the enable/disable toggle and the reorder save both send a
+             * single scalar and short-circuit the merge.
+             */
             const payload = {
                 enabled,
                 config: parsedConfig,
@@ -214,44 +239,39 @@ export function AdminSectionsView({ children }) {
             if (order.trim()) {
                 payload.order = Number(order);
             }
-            await apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${selectedSectionId}`, payload);
-        },
-        onSuccess: async () => {
-            await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
-            // Public-facing useHomepageSections() reads under a separate key.
-            await queryClient.invalidateQueries({ queryKey: ["homepage-sections"] });
-            toast.showToast(mode === "create" ? "Section created." : "Section updated.", "success");
-            setIsModalOpen(false);
-        },
-    });
-    const reorderSections = useApiMutation({
-        errorMessage: "Failed to reorder sections.",
-        mutationFn: async () => {
-            await Promise.all(reorderDraft.map((item) => apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${item.id}`, {
-                order: item.order,
-            })));
+            await apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${sectionId}`, payload);
         },
         onSuccess: async () => {
             await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
             // Public-facing useHomepageSections() reads under a separate key.
             await queryClient.invalidateQueries({ queryKey: ["homepage-sections"] });
-            setReorderServerSnapshot(cloneReorderItems(reorderDraft));
-            setReorderUndoStack([]);
-            toast.showToast("Section order updated.", "success");
+            toast.showToast(isCreate ? "Section created." : "Section updated.", "success");
+            onDone();
         },
     });
+    /**
+     * Hydrate the builders from the stored document — ONCE per mounted record.
+     *
+     * 🛑 `hydratedRef` is not an optimisation. The old deps included the whole
+     * `sections` array, which is a fresh identity after every refetch — and with
+     * `refetchOnWindowFocus` plus a 30s `staleTime`, alt-tabbing away mid-edit
+     * and coming back re-ran this and silently reverted every builder change the
+     * admin had made. No error, no prompt, just their work gone.
+     *
+     * The ref is only correct because the caller remounts on `editId` (see the
+     * 🛑 on this component). Ref and key are a pair; neither works alone.
+     */
+    const hydratedRef = React.useRef(false);
     React.useEffect(() => {
-        if (mode !== "edit" || !selectedSectionId)
-            return;
-        const selected = sections.find((section) => section.id === selectedSectionId);
-        if (!selected)
+        if (!section || hydratedRef.current)
             return;
-        setSectionType(selected.type);
-        setEnabled(Boolean(selected.enabled));
-        setOrder(String(selected.order ?? ""));
-        const selectedConfig = (selected.config ?? {});
-        setConfigJson(JSON.stringify(selectedConfig, null, 2));
-        switch (selected.type) {
+        hydratedRef.current = true;
+        setSectionType(section.type);
+        setEnabled(Boolean(section.enabled));
+        setOrder(String(section.order ?? ""));
+        const selectedConfig = (section.config ?? {});
+        setRawConfigJson(JSON.stringify(selectedConfig, null, 2));
+        switch (section.type) {
             case "products":
                 setProductsBuilder(parseProductsBuilder(selectedConfig));
                 break;
@@ -328,7 +348,7 @@ export function AdminSectionsView({ children }) {
                 setCollectionCardsBuilder(parseCollectionCardsBuilder(selectedConfig));
                 break;
         }
-    }, [mode, sections, selectedSectionId]);
+    }, [section]);
     /**
      * D1 — set the builder for one section type, from a TEMPLATE or from the
      * type's default.
@@ -434,11 +454,11 @@ export function AdminSectionsView({ children }) {
      * template rather than its own 25-arm switch.
      */
     React.useEffect(() => {
-        if (!isModalOpen || mode !== "create")
+        if (!isCreate)
             return;
         applyBuilderFor(sectionType);
         setSelectedTemplateId("");
-    }, [isModalOpen, mode, sectionType, applyBuilderFor]);
+    }, [isCreate, sectionType, applyBuilderFor]);
     function toggleCategorySelection(ids, categoryId, checked) {
         if (checked) {
             if (ids.includes(categoryId)) {
@@ -448,90 +468,6 @@ export function AdminSectionsView({ children }) {
         }
         return ids.filter((id) => id !== categoryId);
     }
-    function normalizeOrder(items) {
-        return items.map((item, index) => ({ ...item, order: index + 1 }));
-    }
-    function cloneReorderItems(items) {
-        return items.map((item) => ({ ...item }));
-    }
-    function isSameReorder(a, b) {
-        if (a.length !== b.length) {
-            return false;
-        }
-        return a.every((item, index) => {
-            const other = b[index];
-            return Boolean(other) && item.id === other.id && item.order === other.order;
-        });
-    }
-    function pushUndoSnapshot(snapshot) {
-        setReorderUndoStack((history) => [cloneReorderItems(snapshot), ...history].slice(0, 30));
-    }
-    function applyReorderChange(transform) {
-        setReorderDraft((prev) => {
-            const next = transform(prev);
-            if (isSameReorder(prev, next)) {
-                return prev;
-            }
-            pushUndoSnapshot(prev);
-            return next;
-        });
-    }
-    function moveReorderItem(index, direction) {
-        const targetIndex = index + direction;
-        if (targetIndex < 0 || targetIndex >= reorderDraft.length) {
-            return;
-        }
-        applyReorderChange((prev) => {
-            const next = [...prev];
-            const [item] = next.splice(index, 1);
-            next.splice(targetIndex, 0, item);
-            return normalizeOrder(next);
-        });
-    }
-    function updateReorderItemOrder(index, nextOrder) {
-        applyReorderChange((prev) => {
-            const clamped = Math.min(Math.max(1, nextOrder), prev.length);
-            const currentIndex = index;
-            const sorted = [...prev];
-            const [item] = sorted.splice(currentIndex, 1);
-            sorted.splice(clamped - 1, 0, item);
-            return normalizeOrder(sorted);
-        });
-    }
-    function moveItemToIndex(fromIndex, toIndex) {
-        if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0) {
-            return;
-        }
-        applyReorderChange((prev) => {
-            if (fromIndex >= prev.length || toIndex >= prev.length) {
-                return prev;
-            }
-            const next = [...prev];
-            const [item] = next.splice(fromIndex, 1);
-            next.splice(toIndex, 0, item);
-            return normalizeOrder(next);
-        });
-    }
-    function handleReorderDrop(targetIndex) {
-        if (dragIndex !== null) {
-            moveItemToIndex(dragIndex, targetIndex);
-        }
-        setDragIndex(null);
-    }
-    function reindexDraft() {
-        applyReorderChange((prev) => normalizeOrder(prev));
-    }
-    function resetToServerOrder() {
-        applyReorderChange(() => cloneReorderItems(reorderServerSnapshot));
-    }
-    function undoReorderChange() {
-        if (reorderUndoStack.length === 0) {
-            return;
-        }
-        const [latest, ...rest] = reorderUndoStack;
-        setReorderUndoStack(rest);
-        setReorderDraft(cloneReorderItems(latest));
-    }
     function renderProductsCategorySelectors() {
         return (_jsxs(Stack, { gap: "sm", children: [_jsx(Text, { className: "tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Category selectors" }), categoriesQuery.isLoading ? (_jsx(Text, { size: "sm", color: "muted", children: "Loading categories..." })) : categoryOptions.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No categories available." })) : (_jsx(Div, { layout: "grid", gap: "2", className: "grid-cols-1 sm:grid-cols-2", children: categoryOptions.map((category) => (_jsx(Checkbox, { checked: productsBuilder.selectedCategoryIds.includes(category.id), label: category.name, onChange: (event) => setProductsBuilder((prev) => ({
                             ...prev,
@@ -968,22 +904,6 @@ export function AdminSectionsView({ children }) {
             default: return null;
         }
     }
-    // React.useMemo must run unconditionally on every render — it was
-    // previously declared after the `hasChildren` early return below, which
-    // skips the hook call in passthrough mode, violating the Rules of Hooks.
-    const sectionOrderMap = React.useMemo(() => {
-        return new Map(sections.map((section) => [section.id, section.order]));
-    }, [sections]);
-    // Map sections data to listing rows
-    const rows = sections.map((section) => ({
-        id: section.id,
-        primary: section.type.charAt(0).toUpperCase() + section.type.slice(1).replace(/-/g, " "),
-        secondary: `Order: ${section.order} • ${section.enabled ? "Enabled" : "Disabled"}`,
-        status: section.enabled ? "Active" : "Inactive",
-        updatedAt: new Date(section.updatedAt).toLocaleDateString(),
-    }));
-    const hasReorderChanges = reorderDraft.some((item) => sectionOrderMap.get(item.id) !== item.order);
-    const canUndoReorderChanges = reorderUndoStack.length > 0;
     /**
      * The modal's fields, as three hand-written sections.
      *
@@ -1004,21 +924,12 @@ export function AdminSectionsView({ children }) {
             label: "Section",
             required: true,
             fields: ["sectionType", "order", "enabled"],
-            render: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Select, { label: "Mode", value: mode, onValueChange: (value) => setMode(value), options: [
-                            { label: "Create new section", value: "create" },
-                            { label: "Edit existing section", value: "edit" },
-                        ] }), mode === "edit" ? (_jsx(Select, { label: "Section", value: selectedSectionId, onValueChange: setSelectedSectionId, placeholder: "Select section", options: sections.map((section) => ({
-                            label: `${section.type} (#${section.order})`,
-                            value: section.id,
-                        })) })) : null, _jsx(Select, { label: "Section type", value: sectionType, onValueChange: (value) => {
-                            setSectionType(value);
-                            if (mode === "create") {
-                                setSelectedSectionId("");
-                            }
-                        }, options: SECTION_TYPE_OPTIONS.map((type) => ({
+            render: () => (_jsxs(Stack, { gap: "md", children: [_jsx(Select, { label: "Section type", value: sectionType, onValueChange: (value) => setSectionType(value), options: SECTION_TYPE_OPTIONS.map((type) => ({
                             label: type,
                             value: type,
-                        })), disabled: mode === "edit" }), mode === "create" && templatesForType(sectionType).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Start from a template", value: selectedTemplateId, onValueChange: (value) => {
+                        })), disabled: !isCreate, helperText: isCreate
+                            ? undefined
+                            : "A section's type is fixed — its config has a different shape per type." }), isCreate && duplicateOfType && (_jsxs(Text, { size: "xs", color: "warning", children: ["A ", sectionType, " section already exists on this surface (#", duplicateOfType.order, "). Every enabled section is rendered, so a second one shows this type twice."] })), isCreate && templatesForType(sectionType).length > 0 && (_jsxs(_Fragment, { children: [_jsx(Select, { label: "Start from a template", value: selectedTemplateId, onValueChange: (value) => {
                                     setSelectedTemplateId(value);
                                     // "" means the type's own defaults — `applyBuilderFor` takes
                                     // no template and behaves exactly as the reset effect does.
@@ -1032,7 +943,9 @@ export function AdminSectionsView({ children }) {
                                     return null;
                                 const p = profileById(t.sourceProfileId);
                                 return (_jsxs(Div, { surface: "muted", padding: "sm", rounded: "md", children: [t.notes && _jsx(Text, { size: "xs", color: "muted", children: t.notes }), p && (_jsxs(Text, { size: "xs", color: "faint", children: [p.label, " \u00B7 ", p.platform, " \u00B7 ", p.measured.products.toLocaleString(), " products \u00B7", " ", Math.round(p.measured.soldOutShare * 100), "% sold out", p.measured.uniqueInternalLinks ? ` · ${p.measured.uniqueInternalLinks} internal links` : ""] }))] }));
-                            })()] })), _jsx(Input, { label: "Order", type: "number", value: order, onChange: (event) => setOrder(event.target.value), placeholder: "Leave empty to auto-place" }), _jsx(Select, { label: "Enabled", value: enabled ? "true" : "false", onValueChange: (value) => setEnabled(value === "true"), options: [
+                            })()] })), _jsx(Input, { label: "Order", type: "number", value: order, onChange: (event) => setOrder(event.target.value), placeholder: isCreate ? "Leave empty to auto-place" : "Leave empty to keep the current order", helperText: isCreate
+                            ? undefined
+                            : "Reorder sections in the toolbar is the easier way to move several at once." }), _jsx(Select, { label: "Enabled", value: enabled ? "true" : "false", onValueChange: (value) => setEnabled(value === "true"), options: [
                             { label: "Enabled", value: "true" },
                             { label: "Disabled", value: "false" },
                         ] })] })),
@@ -1047,13 +960,21 @@ export function AdminSectionsView({ children }) {
             id: "config",
             label: isTypedBuilder ? "Generated config" : "Section config (JSON)",
             fields: ["configJson"],
-            render: () => (_jsx(Textarea, { label: isTypedBuilder ? "Generated config (JSON preview)" : "Section config (JSON)", value: configJson, onChange: (event) => setConfigJson(event.target.value), rows: 10, readOnly: isTypedBuilder, helperText: isTypedBuilder
-                    ? "This JSON is generated from typed controls above."
+            render: () => (_jsx(Textarea, { label: isTypedBuilder ? "Generated config (JSON preview)" : "Section config (JSON)", value: configJson, onChange: (event) => setRawConfigJson(event.target.value), rows: 10, readOnly: isTypedBuilder, helperText: isTypedBuilder
+                    ? "Generated from the typed controls above. It shows only the keys those controls know about — any other key already stored on this section is preserved on save and simply isn't shown here."
                     : "Provide section config JSON for this section type." })),
         },
+        /*
+         * `selectedTemplateId` and `applyBuilderFor` are read by the template
+         * picker and were both missing from this list. The notes panel under the
+         * picker refreshed anyway — but only by ACCIDENT, because picking a
+         * template also mutates builder state, which changes `configJson`, which
+         * is in the list. Naming them makes the panel's correctness depend on the
+         * thing it actually reads.
+         */
     ], [
-        mode, selectedSectionId, sections, sectionType, order, enabled,
-        isTypedBuilder, configJson, renderTypedBuilder,
+        isCreate, sectionType, order, enabled, duplicateOfType, selectedTemplateId,
+        applyBuilderFor, isTypedBuilder, configJson, renderTypedBuilder,
     ]);
     /** What the nav and the error summary key on. */
     const draft = React.useMemo(() => ({ sectionType, order, enabled, configJson }), [sectionType, order, enabled, configJson]);
@@ -1064,44 +985,385 @@ export function AdminSectionsView({ children }) {
         fieldToSectionIndex: nav.fieldToSectionIndex,
     });
     /*
-     * Passthrough mode (detail view).
+     * A deep link (`?panel=edit&id=…`) can name a section that no longer
+     * exists — the delete confirm may have been accepted in another tab while
+     * this URL sat in history. Say so, rather than rendering a form bound to
+     * nothing and letting Save create a section the admin meant to edit.
+     */
+    if (sectionId && !section && !isSectionsLoading) {
+        return (_jsxs(Stack, { gap: "md", padding: "md", children: [_jsx(Text, { size: "sm", color: "muted", children: "This section no longer exists \u2014 it may have been deleted." }), _jsx(Row, { children: _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: onDone, children: "Close" }) })] }));
+    }
+    return (_jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: modalSections, values: draft, 
+                /*
+                 * Each control writes through its own setter — `setSectionType`,
+                 * `setOrder`, `setEnabled` — and several do more than store a value.
+                 * So this routes nothing generically.
+                 */
+                onChange: () => undefined, onSubmit: () => {
+                    form.clearErrors();
+                    const parsed = homepageSectionFormSchema.safeParse(draft);
+                    if (!parsed.success) {
+                        applyZodIssues(parsed.error.issues, form.setFieldError);
+                        return;
+                    }
+                    saveSection.mutate();
+                }, onValidationChange: () => form.validate(draft), schema: homepageSectionFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: saveSection.isPending
+                    ? "Saving..."
+                    : isCreate
+                        ? "Create section"
+                        : "Update section", cancelLabel: "Cancel", onCancel: onDone, isLoading: saveSection.isPending })] }));
+}
+/*
+ * 🛑 Not registered in `filter-tabs.ts`. `audit-filter-tab-enums` cross-checks
+ * chip ids against a backing STRING enum, and `enabled` is a boolean — the
+ * same out-of-scope category as ADMIN_CART_OWNERSHIP_TABS.
+ */
+const SECTION_ENABLED_TABS = [
+    ALL_TAB,
+    { id: "true", label: "Enabled" },
+    { id: "false", label: "Disabled" },
+];
+/** Reorder renumbers 1..N GLOBALLY — see the full-set query in the component. */
+function normalizeOrder(items) {
+    return items.map((item, index) => ({ ...item, order: index + 1 }));
+}
+function cloneReorderItems(items) {
+    return items.map((item) => ({ ...item }));
+}
+function isSameReorder(a, b) {
+    if (a.length !== b.length)
+        return false;
+    return a.every((item, index) => {
+        const other = b[index];
+        return Boolean(other) && item.id === other.id && item.order === other.order;
+    });
+}
+/**
+ * The homepage/surface sections listing.
+ *
+ * Was a bare `<DataTable rows>` with no `columns`, no `renderRowActions`, no
+ * `onRowClick` and no `rowHrefTemplate` — so `isInteractive` was false and
+ * every row was inert, including the blank avatar circles that come from
+ * `buildDefaultColumns(undefined)`. The only way to edit a section was a
+ * toolbar button, a "Mode" dropdown, and a second dropdown to re-find the row
+ * you had just clicked past.
+ */
+export function AdminSectionsView({ children }) {
+    const hasChildren = React.Children.count(children) > 0;
+    const queryClient = useQueryClient();
+    const toast = useToast();
+    const [reorderOpen, setReorderOpen] = React.useState(false);
+    const [reorderDraft, setReorderDraft] = React.useState([]);
+    const [reorderServerSnapshot, setReorderServerSnapshot] = React.useState([]);
+    const [reorderUndoStack, setReorderUndoStack] = React.useState([]);
+    const [dragIndex, setDragIndex] = React.useState(null);
+    const [deleteTargetId, setDeleteTargetId] = React.useState(null);
+    /*
+     * 🛑 `config` is deliberately omitted from the PATCH:
+     * `HomepageSectionsRepository.update` short-circuits its merge READ when
+     * `data.config` is absent, so an enable/disable costs one write and no read.
      *
-     * 🛑 The short-circuit sits HERE, after every hook, rather than ~170 lines
-     * up where it used to. Four hooks had accumulated below it — `modalSections`,
-     * `draft`, `nav`, `form` — so passing children skipped all four and the hook
-     * ORDER changed between the two render paths, which is how React ends up
-     * reading one hook's state out of another's slot. The comment on
-     * `sectionOrderMap` above is the record of this same bug being fixed once
-     * already, one hook at a time.
+     * The optimistic/rollback logic lives in the shared hook — see its header
+     * for why a rollback must DELETE the override key rather than write back a
+     * captured value, and why the key is cleared on success too.
+     */
+    const enabledFlag = useOptimisticRowFlag({
+        mutate: (id, next) => apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${id}`, { enabled: next }),
+        // The public homepage reads under a key of its own; both must be busted.
+        invalidate: [["admin", "sections", "listing"], ["homepage-sections"]],
+        successMessage: (next) => (next ? "Section enabled." : "Section disabled."),
+        errorMessage: "Failed to update section.",
+    });
+    /*
+     * The reorder panel needs EVERY section, not the current page.
+     * `normalizeOrder` assigns `index + 1` globally, so feeding it the
+     * DataListingView rows — which are paginated, filtered and sortable — would
+     * renumber a partial set 1..N and PATCH wrong orders onto real rows.
+     */
+    const { sections, total, isLoading } = useAdminSectionsListing({ page: 1, pageSize: 50 });
+    const isReorderTruncated = total > sections.length;
+    const sectionOrderMap = React.useMemo(() => new Map(sections.map((section) => [section.id, section.order])), [sections]);
+    React.useEffect(() => {
+        const sorted = [...sections]
+            .sort((a, b) => a.order - b.order)
+            .map((section) => ({ id: section.id, type: section.type, order: section.order }));
+        setReorderDraft(normalizeOrder(sorted));
+        /*
+         * 🛑 The RAW server orders, not the normalized ones.
+         *
+         * Orders can legitimately have a gap — a delete leaves one — and
+         * snapshotting the normalized list claims the server holds 1..N when it
+         * does not. "Reset to server" would then reset to an order the server
+         * never had, and `hasReorderChanges` (which compares against the real
+         * `sectionOrderMap`) could not agree with it. Unreachable while every row
+         * was 1..N; reachable the moment delete shipped.
+         */
+        setReorderServerSnapshot(sorted);
+        setReorderUndoStack([]);
+    }, [sections]);
+    const invalidateSections = React.useCallback(async () => {
+        try {
+            await queryClient.invalidateQueries({ queryKey: ["admin", "sections", "listing"] });
+            // Public-facing useHomepageSections() reads under a separate key.
+            await queryClient.invalidateQueries({ queryKey: ["homepage-sections"] });
+        }
+        catch (err) {
+            /*
+             * A refetch that fails after a SUCCESSFUL write is not a failed write,
+             * so this must not raise — doing so would report "Failed to delete
+             * section" for a section that is gone. The list is stale rather than
+             * wrong, and says so.
+             */
+            const normalized = normalizeError(err);
+            toast.showToast(toUserMessage(normalized.code, undefined, { fallback: "Saved, but the list could not refresh. Reload to see it." }), "warning");
+        }
+    }, [queryClient, toast]);
+    const deleteSection = useApiMutation({
+        errorMessage: "Failed to delete section.",
+        mutationFn: async (id) => {
+            await apiClient.delete(`${ADMIN_ENDPOINTS.SECTIONS}/${id}`);
+        },
+        onSuccess: async () => {
+            await invalidateSections();
+            toast.showToast("Section deleted.", "success");
+        },
+    });
+    const reorderSections = useApiMutation({
+        errorMessage: "Failed to reorder sections.",
+        mutationFn: async () => {
+            await Promise.all(reorderDraft.map((item) => apiClient.patch(`${ADMIN_ENDPOINTS.SECTIONS}/${item.id}`, { order: item.order })));
+        },
+        onSuccess: async () => {
+            await invalidateSections();
+            setReorderServerSnapshot(cloneReorderItems(reorderDraft));
+            setReorderUndoStack([]);
+            toast.showToast("Section order updated.", "success");
+        },
+    });
+    const pushUndoSnapshot = React.useCallback((snapshot) => {
+        setReorderUndoStack((history) => [cloneReorderItems(snapshot), ...history].slice(0, 30));
+    }, []);
+    const applyReorderChange = React.useCallback((transform) => {
+        setReorderDraft((prev) => {
+            const next = transform(prev);
+            if (isSameReorder(prev, next))
+                return prev;
+            pushUndoSnapshot(prev);
+            return next;
+        });
+    }, [pushUndoSnapshot]);
+    function moveReorderItem(index, direction) {
+        const targetIndex = index + direction;
+        if (targetIndex < 0 || targetIndex >= reorderDraft.length)
+            return;
+        applyReorderChange((prev) => {
+            const next = [...prev];
+            const [item] = next.splice(index, 1);
+            next.splice(targetIndex, 0, item);
+            return normalizeOrder(next);
+        });
+    }
+    function updateReorderItemOrder(index, nextOrder) {
+        applyReorderChange((prev) => {
+            const clamped = Math.min(Math.max(1, nextOrder), prev.length);
+            const sorted = [...prev];
+            const [item] = sorted.splice(index, 1);
+            sorted.splice(clamped - 1, 0, item);
+            return normalizeOrder(sorted);
+        });
+    }
+    function moveItemToIndex(fromIndex, toIndex) {
+        if (fromIndex === toIndex || fromIndex < 0 || toIndex < 0)
+            return;
+        applyReorderChange((prev) => {
+            if (fromIndex >= prev.length || toIndex >= prev.length)
+                return prev;
+            const next = [...prev];
+            const [item] = next.splice(fromIndex, 1);
+            next.splice(toIndex, 0, item);
+            return normalizeOrder(next);
+        });
+    }
+    function handleReorderDrop(targetIndex) {
+        if (dragIndex !== null)
+            moveItemToIndex(dragIndex, targetIndex);
+        setDragIndex(null);
+    }
+    function reindexDraft() {
+        applyReorderChange((prev) => normalizeOrder(prev));
+    }
+    function resetToServerOrder() {
+        applyReorderChange(() => cloneReorderItems(reorderServerSnapshot));
+    }
+    function undoReorderChange() {
+        if (reorderUndoStack.length === 0)
+            return;
+        const [latest, ...rest] = reorderUndoStack;
+        setReorderUndoStack(rest);
+        setReorderDraft(cloneReorderItems(latest));
+    }
+    const hasReorderChanges = reorderDraft.some((item) => sectionOrderMap.get(item.id) !== item.order);
+    const canUndoReorderChanges = reorderUndoStack.length > 0;
+    const config = {
+        portal: "admin",
+        title: "Homepage Sections",
+        subtitle: "The blocks that make up the homepage, in order.",
+        // Search intentionally absent: this endpoint does not read `q`, and the
+        // repository's sieveQuery has no text-search concept at all, so the box
+        // would accept typing and change nothing — audit-listing-search-capability
+        // tracks it.
+        emptyLabel: "No sections yet",
+        queryKey: ["admin", "sections", "listing"],
+        endpoint: ADMIN_ENDPOINTS.SECTIONS,
+        pageSize: 50,
+        initialView: "table",
+        filterKeys: ["enabled"],
+        defaultSort: sortBy("order", "ASC"),
+        /*
+         * 🛑 TWO options, and the omissions are measured rather than lazy.
+         *
+         * The ONLY composite index on `homepageSections` is (enabled ASC, order
+         * ASC). `canFilter`/`canSort` in SIEVE_FIELDS govern whether sievejs
+         * BUILDS a clause; the index governs whether Firestore SERVES it:
+         *
+         *   • "Type A–Z" — `type` is canSort:false and sieve runs with
+         *     throwExceptions:false, so the clause is dropped SILENTLY. The
+         *     dropdown would change and the list would not (Root Cause #62).
+         *   • "-updatedAt" / "-createdAt" — these ARE canSort:true, so they look
+         *     safe. They work alone and FAILED_PRECONDITION the moment the
+         *     Enabled filter is also active, because no (enabled, updatedAt)
+         *     index exists. A sort that breaks only in combination is worse than
+         *     one that is absent. Add the index first if either is wanted.
+         */
+        sortOptions: [
+            { value: sortBy("order", "ASC"), label: "Display order" },
+            { value: sortBy("order"), label: "Display order (last first)" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => {
+            const id = toStringValue(item.id, `section-${index}`);
+            const type = toStringValue(item.type, "unknown");
+            const surface = toStringValue(item.surface, "homepage");
+            const enabled = enabledFlag.resolve(id, Boolean(item.enabled));
+            return {
+                id,
+                primary: type.charAt(0).toUpperCase() + type.slice(1).replace(/-/g, " "),
+                /*
+                 * The ID, not "Order: N • Enabled" — both of those are their own
+                 * columns now, and the id is the only thing that distinguishes two
+                 * sections of the SAME type, a state the id generator's timestamp
+                 * suffix makes reachable. `surface` shows only when it is not the
+                 * default, so a homepage row carries no redundant word.
+                 */
+                secondary: surface === "homepage" ? id : `${id} · ${surface}`,
+                status: enabled ? "Active" : "Inactive",
+                // Not `new Date(...).toLocaleDateString()`: that yields "Invalid
+                // Date" on a Firestore {toDate()} shape.
+                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                enabled,
+                order: typeof item.order === "number" ? item.order : 0,
+            };
+        }),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        /*
+         * The explicit "true"/"false" test is load-bearing. Anything else yields
+         * NO clause, so a hand-typed `?enabled=banana` shows every row — rather
+         * than a clause that matches nothing and renders as a confident empty
+         * list, which is the shape that reads as an answer.
+         */
+        buildFilters: (state) => state.enabled === "true" || state.enabled === "false"
+            ? sieveFilter("enabled", SIEVE_OP.EQ, state.enabled === "true")
+            : undefined,
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: SECTION_ENABLED_TABS, value: pendingFilters.enabled ?? "", onChange: (id) => setPendingFilters((prev) => ({ ...prev, enabled: id })) })),
+        columns: [
+            {
+                key: "primary",
+                header: "Section",
+                render: (row) => (_jsxs(Stack, { gap: "none", className: "min-w-0", children: [_jsx(Text, { weight: "medium", color: "primary", className: "truncate", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", family: "mono", className: "truncate", children: row.secondary })] })),
+            },
+            {
+                key: "order",
+                header: "Order",
+                className: "w-20",
+                render: (row) => _jsx(Span, { size: "sm", color: "muted", numeric: true, children: String(row.order) }),
+            },
+            {
+                key: "status",
+                header: "Status",
+                className: "w-28",
+                render: (row) => (_jsx(Badge, { variant: row.enabled ? "active" : "inactive", size: "xs", children: row.enabled ? "Enabled" : "Disabled" })),
+            },
+            {
+                key: "updatedAt",
+                header: "Updated",
+                className: "w-32",
+                render: (row) => _jsx(Span, { size: "sm", color: "muted", children: row.updatedAt }),
+            },
+        ],
+        /*
+         * 🛑 The toggle lives HERE and not in a column, on purpose.
+         *
+         * `initialView` only applies to an admin with no saved view preference,
+         * and DataListingView suppresses the table entirely below `md` — so a
+         * column-only control is invisible to anyone on a phone and to anyone
+         * whose stored preference is the card view. `renderRowActions` renders
+         * inside an already-click-stopped container in all three renderers (table
+         * cell, list card, grid card), so unlike a normal column cell it needs no
+         * stopPropagation wrapper of its own.
+         *
+         * `ariaLabel` carries the record name because a page of 28 switches that
+         * all announce "Toggle" names nothing.
+         */
+        renderRowActions: (row) => (_jsxs(_Fragment, { children: [_jsx(Toggle, { size: "sm", checked: row.enabled, ariaLabel: row.enabled
+                        ? `${ACTIONS.ADMIN["disable-section"].label} ${row.primary}`
+                        : `${ACTIONS.ADMIN["enable-section"].label} ${row.primary}`, onChange: (next) => {
+                        void enabledFlag.set(row.id, next);
+                    } }), _jsx(QuickEditMenu, { actions: [
+                        {
+                            label: ACTIONS.ADMIN["delete-section"].label,
+                            destructive: true,
+                            onClick: () => setDeleteTargetId(row.id),
+                        },
+                    ] })] })),
+        primaryAction: {
+            label: "Add Section",
+            onClick: ({ openCreatePanel }) => openCreatePanel(),
+        },
+        toolbarExtra: (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => setReorderOpen(true), children: "Reorder sections" })),
+        /*
+         * 🛑 `key` is REQUIRED — see the comment on SectionEditorPanel. Without it,
+         * clicking row B's pencil while row A's drawer is open edits B's record
+         * with A's values.
+         *
+         * No `onRowClick`: declaring one would OVERRIDE DataListingView's default,
+         * which already opens this editor. `renderEditor` alone is what makes the
+         * rows clickable and injects the per-row pencil.
+         */
+        renderEditor: ({ editId, closePanel }) => (_jsx(SectionEditorPanel, { sectionId: editId ?? undefined, 
+            /*
+             * From the parent's own full-set query, NOT from the mapped listing
+             * rows: a `?panel=edit&id=…` deep link to a row that is filtered out
+             * or on another page must still resolve, and the row shape has
+             * already dropped `config`.
+             */
+            section: editId ? sections.find((s) => s.id === editId) : undefined, siblingSections: sections, isSectionsLoading: isLoading, onDone: closePanel }, editId ?? "create")),
+        resolveEditorTitle: ({ isCreate }) => isCreate ? "Add Homepage Section" : "Edit Homepage Section",
+    };
+    /*
+     * Passthrough mode (detail view).
      *
-     * Moving the RETURN rather than the hooks is deliberate and costs nothing:
-     * a hook must run on every render either way, so hoisting four declarations
-     * past 170 lines of dependent state would do identical work with far more
-     * room to reorder something by accident. `useFormShellState` claims no
-     * bottom bar — `useFormBottomActions` lives in `SectionForm` — so running it
-     * here has no side effect on the detail view below.
+     * 🛑 Still below every hook. The list it guards shrank a lot when the editor
+     * moved into its own component — `modalSections`, `draft`, `nav` and `form`
+     * all left — but the reason the return sits here is unchanged, and the
+     * remaining hooks are no less order-sensitive: a short-circuit above them
+     * skips their calls in passthrough mode, so the hook ORDER differs between
+     * the two render paths and React reads one hook's state out of another's
+     * slot. That bug has now been fixed here twice.
      */
     if (hasChildren) {
         return _jsx(_Fragment, { children: children });
     }
-    return (_jsxs(_Fragment, { children: [_jsxs(Div, { paddingX: "x-sm-md", padding: "y-md", children: [_jsxs(Row, { className: "mb-4", align: "center", justify: "between", gap: "3", children: [_jsxs(Div, { children: [_jsx(Text, { size: "base", weight: "semibold", color: "primary", children: "Homepage Sections" }), _jsx(Text, { size: "sm", color: "muted", children: "Manage homepage sections and their display order" })] }), _jsx(Row, { align: "center", gap: "sm", children: _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => setIsModalOpen(true), children: "Manage Sections" }) })] }), errorMessage && (_jsx(Div, { textSize: "sm", className: "mb-4 border border-error/20", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No sections found" })] }), _jsxs(Stack, { className: `mt-4 ${__P.p4}`, gap: "3", rounded: "xl", surface: "default", border: "default", children: [_jsxs(Row, { align: "center", justify: "between", gap: "3", children: [_jsx(Text, { size: "sm", weight: "semibold", color: "primary", children: "Reorder Sections" }), _jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending, children: reorderSections.isPending ? "Saving order..." : "Save order" })] })] }), reorderDraft.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No sections to reorder." })) : (_jsx(Stack, { gap: "sm", children: reorderDraft.map((item, index) => (_jsxs(Div, { layout: "grid", gap: "2", align: "center", className: "grid-cols-[auto_1fr_auto_auto_auto]", rounded: "md", padding: "xs", border: "default", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => handleReorderDrop(index), onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "\u2261" }), _jsxs(Text, { size: "sm", color: "primary", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))) }))] }), _jsx(Modal, { isOpen: isModalOpen, onClose: () => setIsModalOpen(false), title: "Manage Homepage Section", size: "lg", children: _jsxs(FormShellContext.Provider, { value: form.shellCtx, children: [_jsx(FormErrorSummary, {}), _jsx(SectionForm, { sections: modalSections, values: draft, 
-                            /*
-                             * Each control writes through its own setter — `setMode`,
-                             * `setSectionType`, `setOrder` — and several of them do more than
-                             * store a value (choosing a type in create mode also clears the
-                             * selected section). So this routes nothing generically.
-                             */
-                            onChange: () => undefined, onSubmit: () => {
-                                form.clearErrors();
-                                const parsed = homepageSectionFormSchema.safeParse(draft);
-                                if (!parsed.success) {
-                                    applyZodIssues(parsed.error.issues, form.setFieldError);
-                                    return;
-                                }
-                                saveSection.mutate();
-                            }, onValidationChange: () => form.validate(draft), schema: homepageSectionFormSchema, openIds: nav.openIds, onOpenChange: nav.setOpenIds, submitLabel: saveSection.isPending
-                                ? "Saving..."
-                                : mode === "create"
-                                    ? "Create section"
-                                    : "Update section", cancelLabel: "Cancel", onCancel: () => setIsModalOpen(false), isLoading: saveSection.isPending })] }) })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: reorderOpen, onClose: () => setReorderOpen(false), title: "Reorder sections", footer: _jsxs(Row, { align: "center", justify: "end", gap: "sm", wrap: true, children: [_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: reindexDraft, disabled: reorderSections.isPending || reorderDraft.length === 0, children: "Reindex 1..N" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: undoReorderChange, disabled: reorderSections.isPending || !canUndoReorderChanges, children: "Undo unsaved" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: resetToServerOrder, disabled: reorderSections.isPending || !hasReorderChanges, children: "Reset to server" }), _jsx(Button, { type: "button", variant: "primary", size: "sm", onClick: () => reorderSections.mutate(), disabled: !hasReorderChanges || reorderSections.isPending || isReorderTruncated, children: reorderSections.isPending ? "Saving order..." : "Save order" })] }), children: _jsxs(Stack, { gap: "sm", children: [isReorderTruncated && (_jsxs(Div, { textSize: "sm", color: "error", surface: "danger-surface", padding: "inline", rounded: "xl", children: ["Showing ", sections.length, " of ", total, " sections. Saving a partial set would renumber the rest, so Save order is disabled."] })), reorderDraft.length === 0 ? (_jsx(Text, { size: "sm", color: "muted", children: "No sections to reorder." })) : (reorderDraft.map((item, index) => (_jsxs(Div, { layout: "grid", gap: "2", align: "center", className: "grid-cols-[auto_1fr_auto_auto_auto]", rounded: "md", padding: "xs", border: "default", draggable: true, onDragStart: () => setDragIndex(index), onDragOver: (event) => event.preventDefault(), onDrop: () => handleReorderDrop(index), onDragEnd: () => setDragIndex(null), children: [_jsx(Text, { size: "sm", weight: "semibold", color: "muted", children: "\u2261" }), _jsxs(Text, { size: "sm", color: "primary", children: [item.type, " #", item.order] }), _jsx(Input, { type: "number", min: 1, max: reorderDraft.length, value: String(item.order), "aria-label": `Order for ${item.type}`, onChange: (event) => updateReorderItemOrder(index, Number(event.target.value) || 1), className: "w-24" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, -1), disabled: index === 0, children: "Up" }), _jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => moveReorderItem(index, 1), disabled: index === reorderDraft.length - 1, children: "Down" })] }, `reorder-${item.id}`))))] }) }), deleteTargetId && (_jsx(ConfirmDeleteModal, { isOpen: true, title: ACTIONS.ADMIN["delete-section"].confirmation?.title, message: ACTIONS.ADMIN["delete-section"].confirmation?.body, confirmText: ACTIONS.ADMIN["delete-section"].confirmation?.confirmLabel, isDeleting: deleteSection.isPending, onConfirm: () => {
+                    deleteSection.mutate(deleteTargetId);
+                    setDeleteTargetId(null);
+                }, onClose: () => setDeleteTargetId(null) }))] }));
 }