@mohasinac/appkit 2.8.2 → 2.8.4

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

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useCallback } from "react";
 import { useQueryClient } from "@tanstack/react-query";
 import { Div, FilterChipGroup, ListingLayout, Text, useToast } from "../../../ui";
@@ -47,12 +49,12 @@ export function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...pro
         searchPlaceholder: "Search codes, campaigns, or seller scopes",
         emptyLabel: "No coupons found",
         filterKeys: ["type"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "coupons", "listing"],
         endpoint: ADMIN_ENDPOINTS.COUPONS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
             { value: "code", label: "Code A–Z" },
         ],
         hideTableView: true,
@@ -61,7 +63,7 @@ export function AdminCouponsView({ children, onBulkArchive, onBulkDelete, ...pro
             raw: item,
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (state) => state.type && state.type !== "All" ? `type==${state.type}` : undefined,
+        buildFilters: (state) => state.type && state.type !== "All" ? sieveFilter("type", SIEVE_OP.EQ, state.type) : undefined,
         primaryAction: {
             label: "Add Coupon",
             onClick: ({ openCreatePanel }) => openCreatePanel(),

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * AdminDigitalCodesView — admin browse of digital-code listings (W1-29).
  */
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -14,12 +15,12 @@ const ADMIN_DIGITAL_CODES_CONFIG = {
     searchPlaceholder: "Search digital code listings",
     emptyLabel: "No digital code listings",
     filterKeys: [],
-    defaultSort: "-createdAt",
+    defaultSort: sortBy("createdAt", "DESC"),
     queryKey: ["admin", "digital-codes", "listing"],
     endpoint: ADMIN_ENDPOINTS.PRODUCTS,
     sortOptions: [
-        { value: "-createdAt", label: "Newest" },
-        { value: "createdAt", label: "Oldest" },
+        { value: sortBy("createdAt", "DESC"), label: "Newest" },
+        { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         { value: "title", label: "Title A–Z" },
     ],
     mapRows: (response) => toRecordArray(response.items).map((item, index) => {

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

@@ -2,10 +2,13 @@
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, ConfirmDeleteModal, Form, FormActions, Select, SideDrawer, Text, useToast } from "../../../ui";
+import { Button, ConfirmDeleteModal, Div, Form, FormActions, Label, Select, SideDrawer, Span, Text, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { PERMISSION_GROUPS, } from "../../auth/permissions/constants";
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 // --- Helpers -----------------------------------------------------------------
 const GROUP_OPTIONS = [
     { label: "Content Moderator", value: "content_moderator" },
@@ -70,12 +73,12 @@ function formatPermLabel(perm) {
         .replace(/\b\w/g, (c) => c.toUpperCase());
 }
 function PermissionDomainsPanel({ permissions, togglePerm }) {
-    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsxs("span", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: ["Permissions", _jsxs("span", { className: "ml-2 text-xs font-normal text-zinc-500 dark:text-zinc-400", children: ["(", permissions.size, " selected)"] })] }), _jsx("div", { className: "rounded-xl border border-zinc-200 dark:border-slate-700 divide-y divide-zinc-100 dark:divide-slate-700 max-h-[42vh] overflow-y-auto", children: PERMISSION_DOMAINS.map((domain) => {
+    return (_jsxs(Div, { className: "flex flex-col gap-2", children: [_jsxs(Span, { size: "sm", weight: "medium", className: "text-zinc-700 dark:text-zinc-300", children: ["Permissions", _jsxs(Span, { size: "xs", weight: "normal", className: "ml-2 text-zinc-500 dark:text-zinc-400", children: ["(", permissions.size, " selected)"] })] }), _jsx(Div, { className: `rounded-xl border border-zinc-200 dark:border-slate-700 divide-y divide-zinc-100 dark:divide-slate-700 max-h-[42vh] ${__O.yAuto}`, children: PERMISSION_DOMAINS.map((domain) => {
                     const domainPerms = getPermissionsForDomain(domain.prefix);
                     if (domainPerms.length === 0)
                         return null;
                     const checked = domainPerms.filter((p) => permissions.has(p)).length;
-                    return (_jsxs("details", { className: "group", children: [_jsxs("summary", { className: "flex cursor-pointer items-center justify-between px-3 py-2 text-xs font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400 select-none hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx("span", { children: domain.label }), _jsxs("span", { className: "text-xs font-normal normal-case text-zinc-400 dark:text-zinc-400", children: [checked, "/", domainPerms.length] })] }), _jsx("div", { className: "grid grid-cols-2 gap-x-2 gap-y-1.5 px-3 py-2.5 bg-zinc-50/60 dark:bg-slate-800/40", children: domainPerms.map((perm) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-xs text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "checkbox", checked: permissions.has(perm), onChange: () => togglePerm(perm), className: "h-3.5 w-3.5 rounded border-zinc-300 dark:border-slate-600 accent-primary" }), formatPermLabel(perm)] }, perm))) })] }, domain.prefix));
+                    return (_jsxs("details", { className: "group", children: [_jsxs("summary", { className: "flex cursor-pointer items-center justify-between px-3 py-2 font-semibold uppercase tracking-wide text-zinc-600 dark:text-zinc-400 select-none hover:bg-zinc-50 dark:hover:bg-slate-800 transition-colors", children: [_jsx(Span, { size: "xs", children: domain.label }), _jsxs(Span, { size: "xs", weight: "normal", className: "normal-case text-zinc-400 dark:text-zinc-400", children: [checked, "/", domainPerms.length] })] }), _jsx(Div, { className: "grid grid-cols-2 gap-x-2 gap-y-1.5 px-3 py-2.5 bg-zinc-50/60 dark:bg-slate-800/40", children: domainPerms.map((perm) => (_jsxs("label", { className: "flex items-center gap-2 cursor-pointer text-xs text-zinc-700 dark:text-zinc-300", children: [_jsx("input", { type: "checkbox", checked: permissions.has(perm), onChange: () => togglePerm(perm), className: "h-3.5 w-3.5 rounded border-zinc-300 dark:border-slate-600 accent-primary" }), formatPermLabel(perm)] }, perm))) })] }, domain.prefix));
                 }) })] }));
 }
 // --- Component ---------------------------------------------------------------
@@ -167,5 +170,5 @@ export function AdminEmployeeEditorView({ open, onClose, mode, userId, displayNa
         else
             updateMutation.mutate();
     };
-    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: mode === "invite" ? "Invite Employee" : `Edit — ${displayName ?? "Employee"}`, children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-5 p-4", children: [mode === "invite" && (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Email address" }), _jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "employee@example.com", className: "rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary/60 transition" })] })), _jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Permission group" }), _jsx(Select, { value: group, onChange: (e) => applyGroupPreset(e.target.value), options: GROUP_OPTIONS }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Selecting a group auto-fills the permissions below. You can still customise individual permissions." })] }), _jsx(PermissionDomainsPanel, { permissions: permissions, togglePerm: togglePerm }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", variant: "primary", disabled: isBusy, isLoading: isBusy, children: mode === "invite" ? "Send Invite" : "Save" }), mode === "edit" && userId && (_jsx(Button, { type: "button", variant: "danger", disabled: isBusy, onClick: () => setRevokeOpen(true), children: "Revoke Access" }))] })] }) }), mode === "edit" && (_jsx(ConfirmDeleteModal, { isOpen: revokeOpen, onClose: () => setRevokeOpen(false), onConfirm: () => revokeMutation.mutate(), isDeleting: revokeMutation.isPending, title: "Revoke employee access?", message: `${displayName ?? "This employee"} will lose admin panel access immediately. Their user account remains active — only their role is reset to user.`, confirmText: "Revoke Access", variant: "danger" }))] }));
+    return (_jsxs(_Fragment, { children: [_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: mode === "invite" ? "Invite Employee" : `Edit — ${displayName ?? "Employee"}`, children: _jsxs(Form, { onSubmit: handleSubmit, className: "flex flex-col gap-5 p-4", children: [mode === "invite" && (_jsxs(Div, { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Email address" }), _jsx("input", { type: "email", required: true, value: email, onChange: (e) => setEmail(e.target.value), placeholder: "employee@example.com", className: "rounded-lg border border-zinc-300 dark:border-slate-600 bg-white dark:bg-slate-800 px-3 py-2 text-sm text-zinc-900 dark:text-zinc-100 placeholder-zinc-400 focus:outline-none focus:ring-2 focus:ring-primary/60 transition" })] })), _jsxs(Div, { className: "flex flex-col gap-1.5", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Permission group" }), _jsx(Select, { value: group, onChange: (e) => applyGroupPreset(e.target.value), options: GROUP_OPTIONS }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Selecting a group auto-fills the permissions below. You can still customise individual permissions." })] }), _jsx(PermissionDomainsPanel, { permissions: permissions, togglePerm: togglePerm }), _jsxs(FormActions, { children: [_jsx(Button, { type: "submit", variant: "primary", disabled: isBusy, isLoading: isBusy, children: mode === "invite" ? "Send Invite" : "Save" }), mode === "edit" && userId && (_jsx(Button, { type: "button", variant: "danger", disabled: isBusy, onClick: () => setRevokeOpen(true), children: "Revoke Access" }))] })] }) }), mode === "edit" && (_jsx(ConfirmDeleteModal, { isOpen: revokeOpen, onClose: () => setRevokeOpen(false), onConfirm: () => revokeMutation.mutate(), isDeleting: revokeMutation.isPending, title: "Revoke employee access?", message: `${displayName ?? "This employee"} will lose admin panel access immediately. Their user account remains active — only their role is reset to user.`, confirmText: "Revoke Access", variant: "danger" }))] }));
 }

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

@@ -2,10 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, ConfirmDeleteModal, Form, Input, RichTextEditor, Select, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
+import { Button, ConfirmDeleteModal, Div, Form, Input, RichTextEditor, Select, StackedViewShell, TagInput, Text, Toggle, useToast } from "../../../ui";
 import { FieldInput, FormShellContext, useFormShellState } from "../../../ui/forms";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 // --- Constants ---------------------------------------------------------------
 const CATEGORY_OPTIONS = [
     { label: "Shipping", value: "shipping" },
@@ -126,9 +132,9 @@ export function AdminFaqEditorView({ faqId, onSaved, onDeleted, embedded, ...res
                 }, className: "space-y-5", children: [_jsx(FieldInput, { name: "question", label: "Question", value: question, onChange: (v) => handleQuestionChange(v), required: true, placeholder: "e.g. How does bidding work on LetItRip?" }), _jsx(Input, { label: "Slug", value: slug, onChange: (e) => {
                             setSlug(e.target.value);
                             setSlugManual(true);
-                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs("div", { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs("div", { className: "space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs("div", { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete FAQ" }))] })] }, "faq-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete FAQ", message: "Delete this FAQ? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
+                        }, placeholder: "faq-how-does-bidding-work", helperText: "Auto-generated from question. Must start with 'faq-'." }), _jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Answer" }), _jsx(RichTextEditor, { value: answer, onChange: setAnswer, placeholder: "Write a clear, helpful answer...", minHeightClassName: "min-h-[200px]" })] }), _jsxs(Div, { className: "grid grid-cols-2 gap-4", children: [_jsx(Select, { label: "Category", options: CATEGORY_OPTIONS, value: category, onValueChange: setCategory }), _jsx(Input, { label: "Display order", value: String(order), onChange: (e) => setOrder(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Lower = shown first within category." })] }), _jsx(Input, { label: "Priority", value: String(priority), onChange: (e) => setPriority(parseInt(e.target.value, 10) || 0), type: "number", min: 0, helperText: "Higher priority FAQs appear first in search results." }), _jsx(TagInput, { label: "Tags", value: tags, onChange: setTags, placeholder: "e.g. shipping, pokemon, returns" }), _jsxs(Div, { className: `space-y-3 rounded-lg border border-zinc-200 dark:border-zinc-700 ${__P.p4}`, children: [_jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Visibility" }), _jsx(Toggle, { label: "Active (visible to users)", checked: isActive, onChange: setIsActive }), _jsx(Toggle, { label: "Pinned (always shown at top)", checked: isPinned, onChange: setIsPinned }), _jsx(Toggle, { label: "Show on homepage FAQ section", checked: showOnHomepage, onChange: setShowOnHomepage }), _jsx(Toggle, { label: "Show in footer FAQ links", checked: showInFooter, onChange: setShowInFooter })] }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !canSave || isSubmitting, children: isEdit ? "Save changes" : "Create FAQ" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete FAQ" }))] })] }, "faq-form"), deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete FAQ", message: "Delete this FAQ? This cannot be undone.", onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }))] }));
     if (embedded) {
-        return _jsx("div", { className: "overflow-y-auto p-4", children: formSection });
+        return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formSection });
     }
     return (_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit FAQ" : "New FAQ", sections: [formSection] }));
 }

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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useMemo } from "react";
-import { Heading, ListingLayout, Span, Text } from "../../../ui";
+import { Div, Heading, ListingLayout, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { buildBulkAction } from "../../../_internal/shared/actions/bulk-helpers";
@@ -13,13 +15,13 @@ const COLUMNS = [
         key: "primary",
         header: "Question",
         sortable: true,
-        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+        render: (row) => (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
     },
     {
         key: "status",
         header: "Status",
         className: "w-32",
-        render: (row) => (_jsx(Span, { className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-xs font-medium text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
+        render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex rounded-full bg-primary-50 px-2.5 py-1 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", children: row.status })),
     },
     {
         key: "updatedAt",
@@ -35,12 +37,12 @@ export function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props
         searchPlaceholder: "Search questions, categories, or tokens",
         emptyLabel: "No FAQs found",
         filterKeys: ["isActive"],
-        defaultSort: "priority",
+        defaultSort: sortBy("priority", "ASC"),
         queryKey: ["admin", "faqs", "listing"],
         endpoint: ADMIN_ENDPOINTS.FAQS,
         sortOptions: [
             { value: "priority", label: "Priority" },
-            { value: "-createdAt", label: "Newest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
             { value: "question", label: "Question A–Z" },
         ],
         columns: COLUMNS,
@@ -56,7 +58,7 @@ export function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-        buildFilters: (state) => state.isActive ? `isActive==${state.isActive}` : undefined,
+        buildFilters: (state) => state.isActive ? sieveFilter("isActive", SIEVE_OP.EQ, state.isActive) : undefined,
         primaryAction: {
             label: "Add FAQ",
             onClick: ({ openCreatePanel }) => openCreatePanel(),
@@ -79,7 +81,7 @@ export function AdminFaqsView({ children, onBulkArchive, onBulkDelete, ...props
                 ]
                 : []),
         ],
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs("div", { className: "space-y-2", children: [_jsx(Text, { 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: [
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsxs(Div, { className: "space-y-2", children: [_jsx(Text, { 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: "Published", value: "true" },
                         { label: "Draft", value: "false" },

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

@@ -7,6 +7,12 @@ import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ERROR_MESSAGES } from "../../../errors/messages";
 import { PRODUCT_FEATURE_CATEGORY_OPTIONS, PRODUCT_FEATURE_DEFAULT_DISPLAY_ORDER, PRODUCT_FEATURE_ICON_COLOR_OPTIONS, PRODUCT_FEATURE_PRODUCT_TYPE_OPTIONS, PRODUCT_FEATURE_SCOPE_OPTIONS, } from "../../products/constants/product-features.constants";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 const PILL_BASE_CLASS = "inline-flex items-center gap-1.5 rounded-full border px-3 py-1.5 text-xs font-medium cursor-pointer transition-colors";
 const PILL_CHECKED_CLASS = "bg-primary text-white border-primary";
 const PILL_UNCHECKED_CLASS = "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800";
@@ -142,7 +148,7 @@ export function AdminFeatureEditorView({ featureId, fixedScope, fixedStoreId, em
                             }) })] }), !fixedScope && (_jsx(Select, { label: "Scope", value: scope, onChange: (e) => setScope(e.target.value), options: PRODUCT_FEATURE_SCOPE_OPTIONS })), scope === "store" && !fixedStoreId && (_jsx(Select, { label: "Store", value: storeId, onChange: (e) => setStoreId(e.target.value), options: storeOptions, required: true, helperText: "Store-scope features are visible only on this store's listings." })), _jsx(Toggle, { label: "Active", checked: isActive, onChange: setIsActive }), _jsxs(Div, { className: "flex gap-3 pt-2", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: isDisabled, children: isEdit ? "Save changes" : "Create feature" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteConfirmOpen(true), children: "Delete" }))] })] }) }, "feature-form"));
     const deleteModal = deleteConfirmOpen && (_jsx(ConfirmDeleteModal, { isOpen: true, title: "Delete Feature", message: DELETE_CONFIRM_TEXT, onConfirm: () => { deleteMutation.mutate(); setDeleteConfirmOpen(false); }, onClose: () => setDeleteConfirmOpen(false), isDeleting: deleteMutation.isPending }));
     if (embedded) {
-        return _jsxs(Div, { className: "overflow-y-auto p-4", children: [formSection, deleteModal] });
+        return _jsxs(Div, { className: `${__O.yAuto} ${__P.p4}`, children: [formSection, deleteModal] });
     }
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Feature" : "New Feature", sections: [formSection] }), deleteModal] }));
 }

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

@@ -5,6 +5,9 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Alert, Button, Div, Form, FormActions, Input, StackedViewShell, Text, Toggle, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { apiClient } from "../../../http";
+const __O = {
+    hidden: "overflow-hidden",
+};
 // Platform feature keys (flat booleans with rollout % support)
 const PLATFORM_FLAGS = [
     { key: "blog", label: "Blog Posts", desc: "Publish articles for admins / sellers" },
@@ -38,7 +41,7 @@ const CATEGORY_TYPE_FLAGS = [
 ];
 function AccordionSection({ title, defaultOpen = true, children }) {
     const [open, setOpen] = React.useState(defaultOpen);
-    return (_jsxs(Div, { className: "rounded-lg border border-zinc-200 dark:border-zinc-700 overflow-hidden", children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "w-full flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-800/60 text-left", "aria-expanded": open, children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: title }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: children }))] }));
+    return (_jsxs(Div, { className: `rounded-lg border border-zinc-200 dark:border-zinc-700 ${__O.hidden}`, children: [_jsxs("button", { type: "button", onClick: () => setOpen((v) => !v), className: "w-full flex items-center justify-between px-4 py-3 bg-zinc-50 dark:bg-zinc-800/60 text-left", "aria-expanded": open, children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: title }), _jsx("svg", { className: `h-4 w-4 text-zinc-400 transition-transform ${open ? "rotate-180" : ""}`, fill: "none", stroke: "currentColor", strokeWidth: 2, viewBox: "0 0 24 24", "aria-hidden": "true", children: _jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" }) })] }), open && (_jsx(Div, { className: "divide-y divide-zinc-100 dark:divide-zinc-800", children: children }))] }));
 }
 function FlagRow({ label, desc, checked, onChange, rollout, onRolloutChange, showRollout }) {
     return (_jsxs(Div, { surface: "default", padding: "inline", className: "flex items-center justify-between gap-4", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Toggle, { checked: checked, onChange: onChange, label: label }), _jsx(Text, { className: "mt-0.5 ml-10 text-xs text-zinc-400 dark:text-zinc-400 truncate", children: desc })] }), showRollout && (_jsxs(Div, { className: "flex flex-col gap-1 w-28 shrink-0", children: [_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: "Rollout %" }), _jsx(Input, { type: "number", min: 0, max: 100, value: rollout ?? 100, onChange: (e) => onRolloutChange?.(Math.min(100, Math.max(0, Number(e.target.value)))), disabled: !checked, className: "w-full" })] }))] }));

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { useRouter, useSearchParams, usePathname } from "next/navigation";
 import { ListingLayout, Row } from "../../../ui";
@@ -44,15 +45,15 @@ export function AdminFeaturesView({ children, ...props }) {
         searchPlaceholder: "Search features by label",
         emptyLabel: "No features found",
         filterKeys: [],
-        defaultSort: "displayOrder",
+        defaultSort: sortBy("displayOrder", "ASC"),
         pageSize: PAGE_SIZE,
         queryKey: ["admin", "features", "listing", scopeFilter],
         endpoint: `${ADMIN_ENDPOINTS.PRODUCT_FEATURES}?scope=${scopeFilter}`,
         sortOptions: [
-            { value: "displayOrder", label: "Display order" },
+            { value: sortBy("displayOrder", "ASC"), label: "Display order" },
             { value: "label", label: "Label A–Z" },
-            { value: "-label", label: "Label Z–A" },
-            { value: "-createdAt", label: "Newest" },
+            { value: sortBy("label", "DESC"), label: "Label Z–A" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
         ],
         mapRows: (response) => toRecordArray(response.items).map(mapFeatureRow),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Button } from "@mohasinac/appkit/ui";
+import { Button, Div } from "@mohasinac/appkit/ui";
 export function AdminFilterBar({ children, columns = 3, className = "", withCard = true, deferred = false, onApply, onReset, pendingCount = 0, labels = { apply: "Apply", reset: "Reset" }, themeConfig = { cardPadding: "p-4", flexEnd: "flex justify-end" }, }) {
     const gridCols = {
         1: "grid-cols-1",
@@ -7,7 +7,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4",
         4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-4",
     };
-    const innerContent = (_jsxs(_Fragment, { children: [_jsx("div", { className: `grid ${gridCols[columns]} gap-4`, "data-section": "adminfilterbar-div-249", children: children }), deferred && (_jsxs("div", { className: `${themeConfig.flexEnd} gap-2 mt-3`, "data-section": "adminfilterbar-div-250", children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
+    const innerContent = (_jsxs(_Fragment, { children: [_jsx(Div, { className: `grid ${gridCols[columns]} gap-4`, children: children }), deferred && (_jsxs(Div, { className: `${themeConfig.flexEnd} gap-2 mt-3`, children: [pendingCount > 0 && (_jsx(Button, { variant: "ghost", size: "sm", onClick: onReset, children: labels.reset })), _jsx(Button, { variant: "primary", size: "sm", onClick: onApply, children: pendingCount > 0
                             ? `${labels.applyCount || labels.apply} (${pendingCount})`
                             : labels.apply })] }))] }));
     // If Card component is provided in config, use it; otherwise wrap in plain div
@@ -15,7 +15,7 @@ export function AdminFilterBar({ children, columns = 3, className = "", withCard
         return (_jsx(themeConfig.Card, { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
     }
     if (!withCard)
-        return _jsx("div", { className: className, "data-section": "adminfilterbar-div-251", children: innerContent });
+        return _jsx(Div, { className: className, children: innerContent });
     // Fallback: render as plain div if no Card provided but withCard=true
-    return (_jsx("div", { className: `${themeConfig.cardPadding} ${className}`, "data-section": "adminfilterbar-div-252", children: innerContent }));
+    return (_jsx(Div, { className: `${themeConfig.cardPadding} ${className}`, children: innerContent }));
 }

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

@@ -1,43 +1,79 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * AdminGroupedListingsView — admin moderation view for grouped product listings.
  * W1-29 — pairs with the new GET /api/admin/grouped-listings endpoint.
  */
-import React from "react";
+import { sortBy } from "@mohasinac/appkit";
+import React, { useState } from "react";
 import { ListingLayout } from "../../../ui";
+import { Button, Row, SideDrawer, Stack, Text, useToast, } from "../../../ui";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
 import { DataListingView } from "./DataListingView";
-const ADMIN_GROUPED_LISTINGS_CONFIG = {
-    portal: "admin",
-    title: "Grouped Listings",
-    searchPlaceholder: "Search grouped listings by title or seller",
-    emptyLabel: "No grouped listings",
-    filterKeys: [],
-    defaultSort: "-createdAt",
-    queryKey: ["admin", "grouped-listings"],
-    endpoint: "/api/admin/grouped-listings",
-    sortOptions: [
-        { value: "-createdAt", label: "Newest" },
-        { value: "createdAt", label: "Oldest" },
-        { value: "title", label: "Title A–Z" },
-    ],
-    mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
-        id: toStringValue(item.id, `grouped-listing-${index}`),
-        primary: toStringValue(item.title ?? item.name, "Untitled group"),
-        secondary: [
-            toStringValue(item.storeName ?? item.storeId, "Unknown store"),
-            `${Array.isArray(item.productIds) ? item.productIds.length : 0} items`,
-        ].join(" · "),
-        status: toStringValue(item.isActive === false ? "inactive" : "active", "active"),
-        updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-    })),
-    getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
-    buildFilters: () => "",
-};
+import { ProductInlineSelect } from "../../seller/components/ProductInlineSelect";
+import { apiClient } from "../../../http";
+import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+function ReassignProductsDrawer({ state, onClose, onSaved, }) {
+    const [productIds, setProductIds] = useState(state.currentProductIds);
+    const [saving, setSaving] = useState(false);
+    const { showToast } = useToast();
+    const handleSave = async () => {
+        setSaving(true);
+        try {
+            await apiClient.patch(ADMIN_ENDPOINTS.GROUPED_LISTING_BY_ID(state.groupId), { productIds });
+            showToast("Products reassigned.", "success");
+            onSaved();
+            onClose();
+        }
+        catch {
+            showToast("Failed to save changes.", "error");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    return (_jsxs(Stack, { gap: "md", padding: "md", children: [_jsxs(Text, { size: "sm", color: "muted", children: ["Select products to include in \u201C", state.groupTitle, "\u201D. Changes replace the current list."] }), _jsx(ProductInlineSelect, { scope: "admin", multiple: true, value: productIds, onChange: setProductIds, placeholder: "Search products to add\u2026" }), _jsxs(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { variant: "outline", onClick: onClose, disabled: saving, children: "Cancel" }), _jsxs(Button, { variant: "primary", onClick: handleSave, disabled: saving, isLoading: saving, children: ["Save (", productIds.length, " product", productIds.length !== 1 ? "s" : "", ")"] })] })] }));
+}
 export function AdminGroupedListingsView({ children, ...props }) {
+    const [reassign, setReassign] = useState(null);
+    const [refreshKey, setRefreshKey] = useState(0);
+    const config = React.useMemo(() => ({
+        portal: "admin",
+        title: "Grouped Listings",
+        searchPlaceholder: "Search grouped listings by title or seller",
+        emptyLabel: "No grouped listings",
+        filterKeys: [],
+        defaultSort: sortBy("createdAt", "DESC"),
+        queryKey: ["admin", "grouped-listings", refreshKey],
+        endpoint: ADMIN_ENDPOINTS.GROUPED_LISTINGS,
+        sortOptions: [
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: "title", label: "Title A–Z" },
+        ],
+        mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
+            id: toStringValue(item.id, `grouped-listing-${index}`),
+            primary: toStringValue(item.title ?? item.name, "Untitled group"),
+            secondary: [
+                toStringValue(item.storeName ?? item.storeId, "Unknown store"),
+                `${Array.isArray(item.productIds) ? item.productIds.length : 0} items`,
+            ].join(" · "),
+            status: toStringValue(item.isActive === false ? "inactive" : "active", "active"),
+            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            _raw: item,
+        })),
+        getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
+        buildFilters: () => "",
+        renderRowActions: (row) => (_jsx(Button, { size: "sm", variant: "outline", onClick: () => setReassign({
+                groupId: row.id,
+                groupTitle: row.primary,
+                currentProductIds: Array.isArray(row._raw?.productIds)
+                    ? (row._raw?.productIds ?? []).map(String)
+                    : [],
+            }), children: "Reassign products" })),
+    }), [refreshKey]);
     if (React.Children.count(children) > 0) {
         return (_jsx(ListingLayout, { portal: "admin", ...props, children: children }));
     }
-    return _jsx(DataListingView, { config: ADMIN_GROUPED_LISTINGS_CONFIG });
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(SideDrawer, { isOpen: reassign !== null, onClose: () => setReassign(null), title: reassign ? `Reassign products — ${reassign.groupTitle}` : "Reassign products", children: reassign && (_jsx(ReassignProductsDrawer, { state: reassign, onClose: () => setReassign(null), onSaved: () => setRefreshKey((k) => k + 1) })) })] }));
 }

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

@@ -2,6 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Users, Package, Store, ShoppingBag, FileText, Settings, Shield, BarChart2, AlertTriangle, BookOpen, } from "lucide-react";
 import { Div, Heading, Text, Section, Alert } from "../../../ui";
 import { ROUTES } from "../../../next/routing/route-map";
+const CLS_WARN_PANEL = "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-6";
+const CLS_WARN_HEAD = "font-semibold text-amber-800 dark:text-amber-300 mb-1";
+const CLS_WARN_BODY = "text-sm text-amber-700 dark:text-amber-400";
 const GUIDE_CARDS = [
     {
         Icon: Users,
@@ -75,5 +78,5 @@ export function AdminGuideHubView({ permissions = [], isFullAdmin = false }) {
                         background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 60%,var(--appkit-color-secondary-400,#7c3aed) 100%)",
                     }, children: [_jsxs(Div, { className: "flex items-center gap-3 mb-3", children: [_jsx(Div, { className: "flex-shrink-0 w-10 h-10 rounded-xl bg-white/20 flex items-center justify-center", children: _jsx(BookOpen, { className: "w-5 h-5 text-white" }) }), _jsx(Text, { className: "text-sm font-semibold text-white/80 uppercase tracking-widest", children: "Admin & Employee Guide" })] }), _jsx(Heading, { level: 1, className: "text-2xl md:text-3xl font-bold text-white mb-2", children: "LetItRip Internal Guide" }), _jsx(Text, { className: "text-white/80 text-base", children: "Everything you need to operate and manage LetItRip \u2014 India's largest collectibles marketplace." })] }) }), _jsx(Alert, { variant: "info", compact: true, children: "These guides describe expected platform behaviour. Real access to each section is enforced independently by the permission system \u2014 this page is reference only." }), !hasAny && (_jsx(Alert, { variant: "info", title: "Limited access", children: "Your permission set doesn't include read access to any admin sections yet. Contact your admin to request the permissions you need." })), hasAny && (_jsxs(Section, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text)] mb-4", children: "Guides" }), _jsx(Div, { className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3", children: visibleCards.map(({ Icon, title, description, href }) => (_jsxs("a", { href: href, className: "group flex flex-col gap-3 rounded-xl border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)] p-5 hover:border-[var(--appkit-color-primary)] hover:shadow-md transition-all", children: [_jsxs(Div, { className: "flex items-center gap-3", children: [_jsx(Div, { className: "flex-shrink-0 w-9 h-9 rounded-lg flex items-center justify-center", style: {
                                                 background: "linear-gradient(135deg,var(--appkit-color-primary-700,#4f46e5) 0%,var(--appkit-color-cobalt,#2563eb) 100%)",
-                                            }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: "rounded-2xl border border-amber-200 bg-warning-surface dark:border-amber-800 p-6", children: _jsxs(Div, { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: "font-semibold text-amber-800 dark:text-amber-300 mb-1", children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: "text-sm text-amber-700 dark:text-amber-400", children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
+                                            }, children: _jsx(Icon, { className: "w-4 h-4 text-white" }) }), _jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] group-hover:text-[var(--appkit-color-primary)] transition-colors", children: title })] }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] leading-relaxed", children: description }), _jsx(Text, { className: "text-xs font-medium text-[var(--appkit-color-primary)] mt-auto", children: "Read guide \u2192" })] }, title))) })] })), _jsx(Section, { className: CLS_WARN_PANEL, children: _jsxs(Div, { className: "flex items-start gap-3", children: [_jsx(AlertTriangle, { className: "w-5 h-5 text-warning flex-shrink-0 mt-0.5" }), _jsxs(Div, { children: [_jsx(Text, { className: CLS_WARN_HEAD, children: "Remember: with great access comes responsibility" }), _jsx(Text, { className: CLS_WARN_BODY, children: "Admin actions are logged. Never access user PII (email, phone) without a legitimate support reason. Never grant capabilities or permissions without documented approval. When in doubt, escalate to a senior admin." })] })] }) })] }));
 }

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

@@ -4,6 +4,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * AdminHistoryView — read-only admin insights for the top-level `history` collection.
  * One row per user with item count + last visit. Mirrors AdminWishlistsView.
  */
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -15,12 +16,12 @@ const ADMIN_HISTORY_CONFIG = {
     searchPlaceholder: "Search by user ID",
     emptyLabel: "No user history records found",
     filterKeys: [],
-    defaultSort: "-updatedAt",
+    defaultSort: sortBy("updatedAt", "DESC"),
     queryKey: ["admin", "history", "listing"],
     endpoint: ADMIN_ENDPOINTS.ADMIN_HISTORY,
     sortOptions: [
-        { value: "-updatedAt", label: "Recently active" },
-        { value: "-itemCount", label: "Largest first" },
+        { value: sortBy("updatedAt", "DESC"), label: "Recently active" },
+        { value: sortBy("itemCount", "DESC"), label: "Largest first" },
     ],
     mapRows: (response) => toRecordArray(response.items).map((item, index) => {
         const itemCount = typeof item.itemCount === "number" ? item.itemCount : 0;

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

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 /**
  * AdminLiveView — admin browse of live-item listings (W1-29).
  */
+import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { ListingLayout } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
@@ -14,12 +15,12 @@ const ADMIN_LIVE_CONFIG = {
     searchPlaceholder: "Search live items",
     emptyLabel: "No live item listings",
     filterKeys: [],
-    defaultSort: "-createdAt",
+    defaultSort: sortBy("createdAt", "DESC"),
     queryKey: ["admin", "live-items", "listing"],
     endpoint: ADMIN_ENDPOINTS.PRODUCTS,
     sortOptions: [
-        { value: "-createdAt", label: "Newest" },
-        { value: "createdAt", label: "Oldest" },
+        { value: sortBy("createdAt", "DESC"), label: "Newest" },
+        { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         { value: "title", label: "Title A–Z" },
     ],
     mapRows: (response) => toRecordArray(response.items).map((item, index) => {

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

@@ -4,6 +4,9 @@ import React from "react";
 import { Alert, Button, Div, Input, Select, StackedViewShell, Text, useToast, } from "../../../ui";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { MediaUploadField, MediaUploadList, useMediaCleanup, useMediaUpload, } from "../../media";
+const __P = {
+    p4: "p-4",
+};
 const PREFIX_OPTIONS = [
     { value: "", label: "All" },
     { value: "products/", label: "Products" },
@@ -58,7 +61,7 @@ function MediaBrowser({ onCopy }) {
             return files;
         return files.filter((f) => f.name.toLowerCase().includes(q));
     }, [files, search]);
-    return (_jsxs(Div, { className: "space-y-3 rounded-xl border border-zinc-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-900", children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
+    return (_jsxs(Div, { className: `space-y-3 rounded-xl border border-zinc-200 bg-white ${__P.p4} dark:border-slate-700 dark:bg-slate-900`, children: [_jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: "Browse existing media" }), _jsxs(Div, { className: "flex flex-wrap items-center gap-2", children: [_jsx(Select, { value: prefix, onChange: (e) => setPrefix(e.target.value), options: PREFIX_OPTIONS, "aria-label": "Prefix filter", className: "min-w-[140px]" }), _jsx(Input, { type: "text", placeholder: "Search filename\u2026", value: search, onChange: (e) => setSearch(e.target.value), className: "flex-1 min-w-[160px]" })] }), error && (_jsx(Alert, { variant: "error", title: "Load failed", children: error })), _jsxs(Div, { className: "grid grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6", children: [filtered.map((f) => {
                         const isImage = (f.contentType ?? "").startsWith("image/");
                         return (_jsxs(Div, { className: "group rounded-lg border border-zinc-200 dark:border-slate-700 overflow-hidden bg-zinc-50 dark:bg-slate-800", children: [_jsx(Div, { className: "aspect-square flex items-center justify-center bg-zinc-100 dark:bg-slate-700 text-xs text-zinc-500 dark:text-zinc-400", children: isImage ? (
                                     // eslint-disable-next-line @next/next/no-img-element

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

@@ -2,13 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Alert, Button, ConfirmDeleteModal, RowActionMenu, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
+import { Alert, Button, ConfirmDeleteModal, Div, RowActionMenu, Span, StackedViewShell, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { AdminNavEditorView } from "./AdminNavEditorView";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
+const __O = {
+    hidden: "overflow-hidden",
+};
 function NavItemRow({ item, idx, total, reorderPending, onMoveUp, onMoveDown, onVisibilityChange, onEdit, onDelete, }) {
-    return (_jsxs("div", { className: "flex items-center gap-3 px-4 py-3 bg-white dark:bg-zinc-900", children: [_jsxs("div", { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx("button", { type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move up", children: "\u25B2" }), _jsx("button", { type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? _jsx("span", { className: "text-zinc-400 mr-1", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
+    return (_jsxs(Div, { surface: "default", className: "flex items-center gap-3 px-4 py-3", children: [_jsxs(Div, { className: "flex flex-col gap-0.5 shrink-0", children: [_jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveUp(idx), disabled: idx === 0 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move up", children: "\u25B2" }), _jsx(Button, { variant: "ghost", type: "button", onClick: () => onMoveDown(idx), disabled: idx >= total - 1 || reorderPending, className: "text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-200 disabled:opacity-30 leading-none text-xs p-0 min-h-0 h-auto rounded-none", "aria-label": "Move down", children: "\u25BC" })] }), _jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Text, { className: "text-sm font-medium text-zinc-800 dark:text-zinc-100 truncate", children: [item.parentId ? _jsx(Span, { className: "text-zinc-400 mr-1", children: "\u21B3" }) : null, item.label] }), _jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 truncate", children: item.href })] }), _jsx(Toggle, { checked: item.isVisible ?? true, onChange: (val) => onVisibilityChange(item.id, val), label: "" }), _jsx(RowActionMenu, { actions: [
                     { label: ROW_ACTION_META[ROW_ACTION_ID.EDIT].label, onClick: () => onEdit(item) },
                     { label: ROW_ACTION_META[ROW_ACTION_ID.DELETE].label, destructive: true, onClick: () => onDelete(item) },
                 ] })] }));
@@ -78,11 +81,11 @@ export function AdminNavigationView({ labels = {}, ...rest }) {
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: labels.title ?? "Navigation", sections: [
                     isLoading ? (_jsx(Alert, { variant: "info", title: "Loading", children: "Fetching nav items\u2026" }, "loading")) : null,
                     error ? (_jsx(Alert, { variant: "error", title: "Load failed", children: error instanceof Error ? error.message : "Unknown error" }, "error")) : null,
-                    _jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
+                    _jsxs(Div, { className: "flex items-center justify-between mb-4", children: [_jsxs(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400", children: [sorted.length, " nav item", sorted.length !== 1 ? "s" : ""] }), _jsx(Button, { onClick: () => {
                                     setEditing(null);
                                     setDrawerOpen(true);
                                 }, children: "+ New item" })] }, "header"),
                     sorted.length === 0 && !isLoading ? (_jsx(Text, { className: "text-sm text-zinc-400 dark:text-zinc-400 py-8 text-center", children: "No nav items yet. Click \"New item\" to add one." }, "empty")) : null,
-                    _jsx("div", { className: "divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 overflow-hidden", children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
+                    _jsx(Div, { className: `divide-y divide-zinc-200 dark:divide-zinc-700 rounded-lg border border-zinc-200 dark:border-zinc-700 ${__O.hidden}`, children: sorted.map((item, idx) => (_jsx(NavItemRow, { item: item, idx: idx, total: sorted.length, reorderPending: reorderMutation.isPending, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown, onVisibilityChange: (id, isVisible) => visibilityMutation.mutate({ id, isVisible }), onEdit: (i) => { setEditing(i); setDrawerOpen(true); }, onDelete: setDeleteTarget }, item.id))) }, "list"),
                 ] }), _jsx(AdminNavEditorView, { open: drawerOpen, onClose: () => setDrawerOpen(false), onSaved: () => queryClient.invalidateQueries({ queryKey: ["admin", "navigation"] }), item: editing, parentOptions: parentOptions }), _jsx(ConfirmDeleteModal, { isOpen: Boolean(deleteTarget), onClose: () => setDeleteTarget(null), onConfirm: () => deleteMutation.mutate(deleteTarget.id), isDeleting: deleteMutation.isPending, title: "Delete nav item", message: `Remove "${deleteTarget?.label}" from navigation? This cannot be undone.` })] }));
 }