@mohasinac/appkit 2.8.2 → 2.8.4

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

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useCallback, useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button, ConfirmDeleteModal, FilterChipGroup, ListingLayout, RowActionMenu, useToast } from "../../../ui";
@@ -55,11 +57,11 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
         searchPlaceholder: "Search by email or source",
         emptyLabel: "No subscribers found",
         filterKeys: ["status"],
-        defaultSort: "-subscribedAt",
+        defaultSort: sortBy("subscribedAt", "DESC"),
         queryKey: ["admin", "newsletter", "listing"],
         endpoint: ADMIN_ENDPOINTS.NEWSLETTER,
         sortOptions: [
-            { value: "-subscribedAt", label: "Newest" },
+            { value: sortBy("subscribedAt", "DESC"), label: "Newest" },
             { value: "subscribedAt", label: "Oldest" },
         ],
         mapRows: (response) => toRecordArray(response.subscribers).map((item, index) => ({
@@ -79,7 +81,7 @@ export function AdminNewsletterView({ children, onBulkUnsubscribe, ...props }) {
                 return response.meta.total;
             return mappedRows.length;
         },
-        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        buildFilters: (state) => state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined,
         toolbarExtra: (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: ACTIONS.ADMIN["export-csv"].label })),
         buildBulkActions: onBulkUnsubscribe
             ? (selection) => [

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

@@ -1,8 +1,10 @@
 "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, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { ConfirmDeleteModal, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
+import { ConfirmDeleteModal, Div, ListingLayout, RowActionMenu, Text, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../products/constants/action-defs";
@@ -50,12 +52,12 @@ export function AdminNotificationsView({ children, ...props }) {
         searchPlaceholder: "Search by title or user ID",
         emptyLabel: "No notifications found",
         filterKeys: ["type"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "notifications", "listing"],
         endpoint: ADMIN_ENDPOINTS.ADMIN_NOTIFICATIONS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `notif-${index}`),
@@ -68,7 +70,7 @@ export function AdminNotificationsView({ children, ...props }) {
             type: toStringValue(item.type, ""),
         })),
         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,
         buildBulkActions: (selection) => [
             {
                 id: ROW_ACTION_ID.MARK_READ,
@@ -94,7 +96,7 @@ export function AdminNotificationsView({ children, ...props }) {
                     onClick: () => setDeleteTarget(row),
                 },
             ] })),
-        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: "Type" }), _jsx("div", { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
+        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: "Type" }), _jsx(Div, { className: "flex flex-wrap gap-2", children: NOTIF_TYPES.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, type: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.type || "All") === opt
                             ? "bg-primary text-white border-primary"
                             : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] })),
     };

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Form, FormActions, Input, Select, SideDrawer, useToast, } from "../../../ui";
+import { Button, Div, Form, FormActions, Input, Label, Select, SideDrawer, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const STATUS_OPTIONS = [
@@ -70,5 +70,5 @@ export function AdminOrderEditorView({ open, onClose, orderId, orderLabel, curre
     return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: orderLabel ? `Order: ${orderLabel}` : "Update Order", children: _jsxs(Form, { onSubmit: (e) => {
                 e.preventDefault();
                 saveMutation.mutate();
-            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
+            }, className: "space-y-4 p-4", children: [_jsx(Select, { label: "Order status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsx(Input, { label: "Tracking number (optional)", value: trackingNumber, onChange: (e) => setTrackingNumber(e.target.value), placeholder: "e.g. DEL1234567890IN" }), _jsx(Select, { label: "Carrier (optional)", options: CARRIER_OPTIONS, value: carrier, onValueChange: setCarrier }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Internal note (optional)" }), _jsx("textarea", { value: notes, onChange: (e) => setNotes(e.target.value), rows: 3, placeholder: "Reason for status change, escalation notes\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), (status === "refunded" || status === "return_requested") && (_jsx(Input, { label: "Refund amount \u20B9 (optional)", type: "number", min: "0", step: "0.01", value: refundAmount, onChange: (e) => setRefundAmount(e.target.value), placeholder: "e.g. 499.00" })), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "submit", isLoading: saveMutation.isPending, disabled: !orderId || saveMutation.isPending, children: "Save changes" })] })] }) }));
 }

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

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
 import { FilterChipGroup, ListingLayout, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
@@ -33,12 +35,12 @@ export function AdminOrdersView({ children, ...props }) {
         searchPlaceholder: "Search orders, buyers, or tracking IDs",
         emptyLabel: "No orders found",
         filterKeys: ["status"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "orders", "listing"],
         endpoint: ADMIN_ENDPOINTS.ORDERS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
         mapRows: (response) => toRecordArray(response.orders).map((item, index) => ({
             id: toStringValue(item.id, `order-${index}`),
@@ -51,7 +53,7 @@ export function AdminOrdersView({ children, ...props }) {
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-        buildFilters: (f) => (f.status && f.status !== "All" ? `status==${f.status}` : undefined),
+        buildFilters: (f) => (f.status && f.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, f.status) : undefined),
         buildBulkActions: (selection) => [
             {
                 id: "mark-shipped",

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

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
+import { Div, Heading, Nav, Text, Span, Button, Row } from "@mohasinac/appkit/ui";
 import { ChevronRight } from "lucide-react";
+const __P = {
+    p6: "p-6",
+};
 export function AdminPageHeader({ title, subtitle, description, badge, breadcrumb, actionLabel, onAction, actionIcon, actionDisabled = false, className = "", themeConfig = {
     gradient: "bg-blue-50",
     titleClass: "text-3xl font-bold",
     subtitleClass: "text-lg text-gray-700",
     spacingClass: "space-y-1",
 }, }) {
-    return (_jsxs("div", { className: `${themeConfig.gradient} p-6 ${className}`, "data-section": "adminpageheader-div-253", children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { className: "text-zinc-700 dark:text-zinc-200 font-medium", children: crumb.label }))] }, index))) })), _jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", "data-section": "adminpageheader-div-254", children: [_jsxs("div", { className: themeConfig.spacingClass, "data-section": "adminpageheader-div-255", children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
+    return (_jsxs(Div, { className: `${themeConfig.gradient} ${__P.p6} ${className}`, children: [breadcrumb && breadcrumb.length > 0 && (_jsx(Nav, { "aria-label": "Breadcrumb", className: "mb-3 flex items-center gap-1 text-sm text-zinc-500 dark:text-zinc-400", children: breadcrumb.map((crumb, index) => (_jsxs(Span, { className: "flex items-center gap-1", children: [index > 0 && _jsx(ChevronRight, { className: "w-3 h-3 flex-shrink-0" }), crumb.href && themeConfig.TextLink ? (_jsx(themeConfig.TextLink, { href: crumb.href, className: "hover:text-zinc-700 dark:hover:text-zinc-200 transition-colors", children: crumb.label })) : (_jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-200", children: crumb.label }))] }, index))) })), _jsxs(Div, { className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4", children: [_jsxs(Div, { className: themeConfig.spacingClass, children: [_jsxs(Row, { gap: "sm", wrap: true, children: [_jsx(Heading, { level: 2, className: themeConfig.titleClass, children: title }), badge && _jsx(Span, { className: "flex-shrink-0", children: badge })] }), subtitle && (_jsx(Text, { className: themeConfig.subtitleClass, children: subtitle })), description && (_jsx(Text, { className: "text-sm text-zinc-500 dark:text-zinc-400 mt-1", children: description }))] }), actionLabel && onAction && (_jsxs(Button, { variant: "primary", onClick: onAction, disabled: actionDisabled, className: "flex-shrink-0", children: [actionIcon, actionLabel] }))] })] }));
 }

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

@@ -1,5 +1,7 @@
 "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, { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, useToast, } from "../../../ui";
@@ -65,13 +67,13 @@ export function AdminPayoutsView({ children, ...props }) {
         searchPlaceholder: "Search stores, payout IDs, or order groups",
         emptyLabel: "No payouts found",
         filterKeys: ["status"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "payouts", "listing"],
         endpoint: ADMIN_ENDPOINTS.PAYOUTS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
-            { value: "-amount", label: "Highest amount" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: sortBy("amount", "DESC"), label: "Highest amount" },
         ],
         mapRows: (response) => toRecordArray(response.payouts).map((item, index) => ({
             id: toStringValue(item.id, `payout-${index}`),
@@ -81,7 +83,7 @@ export function AdminPayoutsView({ children, ...props }) {
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
         })),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
-        buildFilters: (state) => state.status && state.status !== "All" ? `status==${state.status}` : undefined,
+        buildFilters: (state) => state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : undefined,
         toolbarExtra: (_jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: handleExportCsv, children: ACTIONS.ADMIN["export-csv"].label })),
         buildBulkActions: (selection) => [
             {

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

@@ -1,8 +1,10 @@
 "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 from "react";
 import { Pencil } from "lucide-react";
-import { Badge, Button, FilterChipGroup, ListingLayout, Text } from "../../../ui";
+import { Badge, Button, Div, FilterChipGroup, ListingLayout, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_PRODUCT_STATUS_TABS } from "../constants/filter-tabs";
@@ -22,13 +24,13 @@ const PRIZE_DRAW_COLUMNS = [
     {
         key: "primary",
         header: "Prize Draw",
-        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: row.primary }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.storeName })] })),
+        render: (row) => (_jsxs(Div, { className: "space-y-1", children: [_jsx(Text, { className: "font-semibold text-[var(--appkit-color-text)] line-clamp-1", children: row.primary }), _jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.storeName })] })),
     },
     {
         key: "entryFee",
         header: "Entry Fee",
         className: "w-28 text-right",
-        render: (row) => (_jsx("span", { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: row.entryFee })),
+        render: (row) => (_jsx(Span, { size: "sm", weight: "medium", className: "text-[var(--appkit-color-text)]", children: row.entryFee })),
     },
     {
         key: "status",
@@ -41,14 +43,14 @@ const PRIZE_DRAW_COLUMNS = [
         key: "drawDate",
         header: "Draw Date",
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.drawDate })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: row.drawDate })),
     },
     {
         key: "updatedAt",
         header: "Updated",
         sortable: true,
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-[var(--appkit-color-text-muted)]", children: row.updatedAt })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-[var(--appkit-color-text-muted)]", children: row.updatedAt })),
     },
 ];
 export function AdminPrizeDrawsView({ children, ...props }) {
@@ -61,12 +63,12 @@ export function AdminPrizeDrawsView({ children, ...props }) {
         searchPlaceholder: "Search prize draws by name or store…",
         emptyLabel: "No prize draws found",
         filterKeys: ["status"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "prize-draws", "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" },
             { value: "prizeDrawEndDate", label: "Draw Date Soon" },
         ],
@@ -88,7 +90,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
         }),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
         buildFilters: (state) => {
-            const status = state.status && state.status !== "All" ? `status==${state.status}` : null;
+            const status = state.status && state.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, state.status) : null;
             return ["listingType==prize-draw", status].filter(Boolean).join(",");
         },
         getRowHref: (row) => String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)),

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

@@ -2,14 +2,21 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQuery } from "@tanstack/react-query";
-import { Button, Card, CardBody, ConfirmDeleteModal, PaginatedSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
+import { Button, Card, CardBody, ConfirmDeleteModal, Div, PaginatedSelect, Form, Stack, StackedViewShell, Tabs, TabsContent, TabsList, TabsTrigger, Text, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ProductForm } from "../../products/components/ProductForm";
 import { normalizeListingType } from "../../products/utils/listing-type";
 import { GroupSettingsPanel } from "../../products/components/GroupSettingsPanel";
+import { GroupInlineSelect } from "../../seller/components/GroupInlineSelect";
 import { CategoryQuickCreateForm } from "./CategoryQuickCreateForm";
 import { BrandQuickCreateForm } from "./BrandQuickCreateForm";
+const __P = {
+    p4: "p-4",
+};
+const __O = {
+    yAuto: "overflow-y-auto",
+};
 function modeFromProduct(product) {
     const lt = normalizeListingType(product);
     if (lt === "auction")
@@ -145,12 +152,12 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
     const formContent = (_jsxs(Form, { id: "product-editor-form", onSubmit: (e) => {
             e.preventDefault();
             saveMutation.mutate();
-        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs("div", { className: "space-y-4", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(PaginatedSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
+        }, className: "space-y-6", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Listing Type" }), _jsxs(Tabs, { value: mode, onChange: handleModeChange, children: [_jsxs(TabsList, { children: [(!enabledListingTypes || enabledListingTypes.includes("standard")) && (_jsx(TabsTrigger, { value: "standard", children: "Standard" })), (!enabledListingTypes || enabledListingTypes.includes("auction")) && (_jsx(TabsTrigger, { value: "auction", children: "Auction" })), (!enabledListingTypes || enabledListingTypes.includes("pre-order")) && (_jsx(TabsTrigger, { value: "preorder", children: "Pre-order" }))] }), _jsx(TabsContent, { value: "standard" }), _jsx(TabsContent, { value: "auction" }), _jsx(TabsContent, { value: "preorder" })] })] }), _jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400 mb-4", children: "Classification" }), _jsxs(Div, { className: "space-y-4", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: "Store" }), _jsx(PaginatedSelect, { value: product.storeId ?? null, onChange: handleStoreSelect, loadOptions: loadStoreOptions, placeholder: "Search stores\u2026", searchPlaceholder: "Type store name\u2026", noResultsText: "No stores found", ariaLabel: "Store" })] }), _jsx(ProductForm, { product: product, onChange: setProduct, renderGroupSettings: isEdit && productId
                                     ? (p) => (_jsx(GroupSettingsPanel, { productId: productId, productSlug: p.slug ?? productId, groupId: p.groupId, isGroupParent: p.isGroupParent, groupParentSlug: p.groupParentSlug, groupChildSlugs: p.groupChildSlugs, groupTitle: p.groupTitle, isAuction: modeFromProduct(p) === "auction", storeProductsEndpoint: "/api/admin/products", onGroupChanged: () => productQuery.refetch() }))
-                                    : undefined, renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs("div", { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
+                                    : undefined, renderGroupJoinField: ({ label, value, onChange, disabled }) => (_jsx(GroupInlineSelect, { scope: "admin", value: value ?? "", onChange: (id) => onChange(id || undefined), disabled: disabled, label: label, placeholder: "None (standalone product)", allowCreate: false })), renderCategorySelector: ({ label, value, onChange, disabled }) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: label }), _jsx(PaginatedSelect, { value: value || null, onChange: (v) => onChange(v ?? ""), loadOptions: loadCategoryOptions, placeholder: "Search categories\u2026", searchPlaceholder: "Type category name\u2026", noResultsText: "No categories found", ariaLabel: label, disabled: disabled, createLabel: "Category", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(CategoryQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })), renderBrandSelector: (args) => (_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-sm font-medium text-zinc-900 dark:text-zinc-100", children: args.label }), _jsx(PaginatedSelect, { value: args.multi ? null : (args.value || null), onChange: (v) => args.onValueChange(v ?? ""), loadOptions: loadBrandOptions, placeholder: "Search brands\u2026", searchPlaceholder: "Type brand name\u2026", noResultsText: "No brands found", ariaLabel: args.label, disabled: args.disabled, createLabel: "Brand", renderCreateForm: ({ onCreated, onCancel }) => (_jsx(BrandQuickCreateForm, { onSaved: (id, name) => onCreated({ value: id, label: name }), onCancel: onCancel })) })] })) })] })] }), _jsxs(Div, { className: "flex gap-3 lg:hidden", children: [_jsx(Button, { type: "submit", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] })] }, "product-form"));
     if (embedded) {
-        return _jsx("div", { className: "overflow-y-auto p-4", children: formContent });
+        return _jsx(Div, { className: `${__O.yAuto} ${__P.p4}`, children: formContent });
     }
-    const twoPanel = (_jsxs("div", { className: "grid gap-6 lg:grid-cols-[1fr_280px] lg:items-start", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-0", children: formContent }), _jsx("div", { className: "hidden lg:block lg:sticky lg:top-[var(--header-height,0px)]", children: actionSidebar })] }));
+    const twoPanel = (_jsxs(Div, { className: "grid gap-6 lg:grid-cols-[1fr_280px] lg:items-start", children: [_jsx(CardBody, { className: "min-w-0 space-y-6 p-0", children: formContent }), _jsx(Div, { className: "hidden lg:block lg:sticky lg:top-[var(--header-height,0px)]", children: actionSidebar })] }));
     return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "admin", ...rest, title: isEdit ? "Edit Product" : "Create Product", sections: [twoPanel] }), _jsx(ConfirmDeleteModal, { isOpen: deleteOpen, onClose: () => setDeleteOpen(false), onConfirm: () => deleteMutation.mutate(), isDeleting: deleteMutation.isPending, title: "Delete this product?", message: "This product will be permanently removed. This action cannot be undone.", confirmText: "Delete product", variant: "danger" })] }));
 }

package/dist/features/admin/components/AdminProductsView.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, { useState, useCallback } from "react";
-import { ListingLayout, Text, Toggle, useToast } from "../../../ui";
+import { Div, ListingLayout, Span, Text, Toggle, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PRODUCT_STATUS_TABS, ADMIN_PRODUCT_LISTING_TYPE_TABS, } from "../constants/filter-tabs";
 import { toRecordArray, toRelativeDate, toStringValue, } from "../hooks/useAdminListingData";
@@ -32,21 +34,21 @@ function buildBaseColumns() {
             key: "primary",
             header: "Item",
             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",
             sortable: true,
             className: "w-36",
-            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",
             header: "Updated",
             sortable: true,
             className: "w-36",
-            render: (row) => (_jsx("span", { className: "text-sm text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
+            render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
         },
     ];
 }
@@ -99,14 +101,14 @@ export function AdminProductsView({ children, ...props }) {
         searchPlaceholder: "Search products, SKUs, or seller names",
         emptyLabel: "No products found",
         filterKeys: ["status", "type", "showSold"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "products", "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" },
-            { value: "-price", label: "Highest price" },
+            { value: sortBy("price", "DESC"), label: "Highest price" },
         ],
         columns: [...buildBaseColumns(), flagColumn],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => {
@@ -133,7 +135,7 @@ export function AdminProductsView({ children, ...props }) {
             if (state.showSold !== "true")
                 parts.push("isSold==false");
             if (state.status && state.status !== "All")
-                parts.push(`status==${state.status}`);
+                parts.push(sieveFilter("status", SIEVE_OP.EQ, state.status));
             const typeFilter = TYPE_FILTER_MAP[state.type];
             if (typeFilter)
                 parts.push(typeFilter);

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sortBy } from "@mohasinac/appkit";
 import { useState } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { ConfirmDeleteModal, RowActionMenu, useToast } from "../../../ui";
@@ -50,12 +51,12 @@ export function AdminReturnRequestsView(_props) {
         searchPlaceholder: "Search by order ID or buyer",
         emptyLabel: "No return requests",
         filterKeys: [],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "return-requests", "listing"],
         endpoint: `${ADMIN_ENDPOINTS.ORDERS}?status=return_requested`,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
         ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `order-${index}`),

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, FilterChipGroup, ListingLayout, Modal, RowActionMenu, useToast } from "../../../ui";
+import { Button, Div, FilterChipGroup, Label, ListingLayout, Modal, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ROW_ACTION_META, ROW_ACTION_ID } from "../../../features/products/constants/action-defs";
@@ -75,14 +77,14 @@ export function AdminReviewsView({ children, ...props }) {
         searchPlaceholder: "Search reviews, products, or seller names",
         emptyLabel: "No reviews found",
         filterKeys: ["status", "rating"],
-        defaultSort: "-publishedAt",
+        defaultSort: sortBy("publishedAt", "DESC"),
         queryKey: ["admin", "reviews", "listing"],
         endpoint: ADMIN_ENDPOINTS.REVIEWS,
         sortOptions: [
-            { value: "-publishedAt", label: "Newest" },
+            { value: sortBy("publishedAt", "DESC"), label: "Newest" },
             { value: "publishedAt", label: "Oldest" },
-            { value: "-rating", label: "Highest rating" },
-            { value: "rating", label: "Lowest rating" },
+            { value: sortBy("rating", "DESC"), label: "Highest rating" },
+            { value: sortBy("rating", "ASC"), label: "Lowest rating" },
         ],
         mapRows: (response) => toRecordArray(response.items).map((item, index) => ({
             id: toStringValue(item.id, `review-${index}`),
@@ -97,9 +99,9 @@ export function AdminReviewsView({ children, ...props }) {
         buildFilters: (f) => {
             const parts = [];
             if (f.status && f.status !== "All")
-                parts.push(`status==${f.status}`);
+                parts.push(sieveFilter("status", SIEVE_OP.EQ, f.status));
             if (f.rating && f.rating !== "All")
-                parts.push(`rating==${f.rating}`);
+                parts.push(sieveFilter("rating", SIEVE_OP.EQ, f.rating));
             return parts.join(",") || undefined;
         },
         buildBulkActions: (selection) => [
@@ -151,7 +153,7 @@ export function AdminReviewsView({ children, ...props }) {
                     setReplyOpen(false);
                     setReplyText("");
                     setReplyTarget(null);
-                }, title: "Reply to review", children: _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Admin reply" }), _jsx("textarea", { value: replyText, onChange: (e) => setReplyText(e.target.value), rows: 4, placeholder: "Write a public reply to this review\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), _jsxs("div", { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => {
+                }, title: "Reply to review", children: _jsxs(Div, { className: "space-y-4", children: [_jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: "Admin reply" }), _jsx("textarea", { value: replyText, onChange: (e) => setReplyText(e.target.value), rows: 4, placeholder: "Write a public reply to this review\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), _jsxs(Div, { className: "flex justify-end gap-2", children: [_jsx(Button, { variant: "secondary", onClick: () => {
                                         setReplyOpen(false);
                                         setReplyText("");
                                         setReplyTarget(null);

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

@@ -2,9 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FormActions, Select, SideDrawer, Text, useToast, } from "../../../ui";
+import { Button, Code, Div, FormActions, Label, Select, SideDrawer, Span, Text, useToast, } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
+const __P = {
+    p3: "p-3",
+    p4: "p-4",
+};
 const CLS_SECTION_LABEL = "text-xs font-medium text-zinc-500 dark:text-zinc-400 uppercase tracking-wide";
 const STATUS_OPTIONS = [
     { label: "Pending review", value: "pending_review" },
@@ -58,5 +62,5 @@ export function AdminScammerEditorView({ open, onClose, scammerId, displayNames
             showToast(err?.message ?? "Failed to delete profile.", "error");
         },
     });
-    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Div, { className: "flex flex-col gap-4 p-4", children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx("span", { className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-1 text-xs text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Names / Aliases" }), _jsx("div", { className: "flex flex-wrap gap-1", children: displayNames.map((name, i) => (_jsx("span", { className: "rounded-full bg-zinc-100 px-2.5 py-0.5 text-xs dark:bg-zinc-800", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [phones.length > 0 && (_jsxs("div", { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx("div", { className: "flex flex-wrap gap-1", children: phones.map((p, i) => (_jsx("code", { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx("div", { className: "flex flex-wrap gap-1", children: upiIds.map((u, i) => (_jsx("code", { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: "rounded-lg border border-zinc-200 bg-zinc-50 p-3 dark:border-zinc-700 dark:bg-zinc-900/40", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: description })] })), _jsxs(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Reported by:", " ", _jsx("span", { className: "font-medium text-zinc-700 dark:text-zinc-300", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx("hr", { className: "border-zinc-200 dark:border-zinc-700" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx("label", { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Verification note (internal)" }), _jsx("textarea", { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Div, { className: `flex flex-col gap-4 ${__P.p4}`, children: [_jsxs(Div, { className: "flex items-center gap-2", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex rounded-full px-2.5 py-1 ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-1 text-zinc-600 dark:bg-zinc-800 dark:text-zinc-300", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Names / Aliases" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: displayNames.map((name, i) => (_jsx(Span, { size: "xs", className: "rounded-full bg-zinc-100 px-2.5 py-0.5 dark:bg-zinc-800", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: `rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900/40`, children: [phones.length > 0 && (_jsxs(Div, { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: phones.map((p, i) => (_jsx(Code, { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx(Div, { className: "flex flex-wrap gap-1", children: upiIds.map((u, i) => (_jsx(Code, { className: "rounded bg-zinc-200 px-1.5 py-0.5 text-xs dark:bg-zinc-700", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: `rounded-lg border border-zinc-200 bg-zinc-50 ${__P.p3} dark:border-zinc-700 dark:bg-zinc-900/40`, children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap text-sm text-zinc-700 dark:text-zinc-200", children: description })] })), _jsxs(Div, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Reported by:", " ", _jsx(Span, { weight: "medium", className: "text-zinc-700 dark:text-zinc-300", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx("hr", { className: "border-zinc-200 dark:border-zinc-700" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Div, { className: "flex flex-col gap-1", children: [_jsx(Label, { className: "text-xs font-semibold uppercase tracking-wide text-zinc-500 dark:text-zinc-400", children: "Verification note (internal)" }), _jsx("textarea", { value: note, onChange: (e) => setNote(e.target.value), rows: 3, placeholder: "e.g. Verified via 3 independent reports\u2026", className: "w-full rounded-lg border border-zinc-300 dark:border-zinc-700 bg-white dark:bg-zinc-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-500" })] }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "danger", size: "sm", disabled: !scammerId, isLoading: deleteMutation.isPending, onClick: () => deleteMutation.mutate(), children: "Delete" }), _jsx(Button, { type: "button", variant: "secondary", onClick: onClose, children: "Cancel" }), _jsx(Button, { type: "button", isLoading: updateMutation.isPending, disabled: !scammerId || updateMutation.isPending, onClick: () => updateMutation.mutate(), children: "Save changes" })] })] }) }));
 }

package/dist/features/admin/components/AdminScammersView.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, { useState } from "react";
-import { FilterChipGroup, ListingLayout, RowActionMenu, Text } from "../../../ui";
+import { Div, FilterChipGroup, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
 import { ADMIN_SCAMMER_STATUS_TABS } from "../constants/filter-tabs";
@@ -18,7 +20,7 @@ const SCAMMER_COLUMNS = [
     {
         key: "primary",
         header: "Name / Aliases",
-        render: (row) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: row.primary }), row.secondary ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })) : null] })),
+        render: (row) => (_jsxs(Div, { className: "space-y-0.5", children: [_jsx(Text, { className: "font-medium text-zinc-900 dark:text-zinc-100", children: row.primary }), row.secondary ? (_jsx(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })) : null] })),
     },
     {
         key: "status",
@@ -30,7 +32,7 @@ const SCAMMER_COLUMNS = [
         key: "updatedAt",
         header: "Updated",
         className: "w-32",
-        render: (row) => (_jsx("span", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
+        render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
     },
 ];
 export function AdminScammersView({ children, ...props }) {
@@ -45,14 +47,14 @@ export function AdminScammersView({ children, ...props }) {
         searchPlaceholder: "Search by name, phone, UPI ID",
         emptyLabel: "No scammer profiles found",
         filterKeys: ["status"],
-        defaultSort: "-createdAt",
+        defaultSort: sortBy("createdAt", "DESC"),
         queryKey: ["admin", "scammers", "listing"],
         endpoint: ADMIN_ENDPOINTS.SCAMMERS,
         sortOptions: [
-            { value: "-createdAt", label: "Newest" },
-            { value: "createdAt", label: "Oldest" },
-            { value: "-views", label: "Most viewed" },
-            { value: "-incidentCount", label: "Most incidents" },
+            { value: sortBy("createdAt", "DESC"), label: "Newest" },
+            { value: sortBy("createdAt", "ASC"), label: "Oldest" },
+            { value: sortBy("views", "DESC"), label: "Most viewed" },
+            { value: sortBy("incidentCount", "DESC"), label: "Most incidents" },
         ],
         columns: SCAMMER_COLUMNS,
         mapRows: (response) => toRecordArray(response.scammers).map((item, index) => ({
@@ -80,7 +82,7 @@ export function AdminScammersView({ children, ...props }) {
                 return response.total;
             return mappedRows.length;
         },
-        buildFilters: (f) => (f.status && f.status !== "All" ? `status==${f.status}` : undefined),
+        buildFilters: (f) => (f.status && f.status !== "All" ? sieveFilter("status", SIEVE_OP.EQ, f.status) : undefined),
         renderRowActions: (row) => (_jsx(RowActionMenu, { actions: [
                 {
                     label: ACTIONS.ADMIN["review-scammer"].label,