@mohasinac/appkit 2.8.9 → 3.0.0

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

@@ -1,9 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 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 { useQueryClient } from "@tanstack/react-query";
 import { Button, FilterChipGroup, Form, FormActions, Input, ListingLayout, Modal, RowActionMenu, useToast, } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ADMIN_PAYOUT_STATUS_TABS } from "../constants/filter-tabs";
@@ -17,7 +18,7 @@ export function AdminPayoutsView({ children, ...props }) {
     const [transactionId, setTransactionId] = useState("");
     const toast = useToast();
     const queryClient = useQueryClient();
-    const markPaid = useMutation({
+    const markPaid = useApiMutation({
         mutationFn: () => {
             if (!selectedPayoutId)
                 throw new Error("No payout selected");
@@ -39,6 +40,7 @@ export function AdminPayoutsView({ children, ...props }) {
     });
     const handleExportCsv = async () => {
         try {
+            // audit-form-mutation-hook-ok: CSV download — returns binary blob, not a form submit
             const res = await fetch(ADMIN_ENDPOINTS.PAYOUTS_EXPORT);
             if (!res.ok)
                 throw new Error("Export failed");
@@ -105,8 +107,8 @@ export function AdminPayoutsView({ children, ...props }) {
             ] })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PAYOUT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
-    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(Modal, { isOpen: markPaidOpen, onClose: closePaidModal, title: "Mark payout as paid", children: _jsxs(Form, { className: "space-y-4", onSubmit: (e) => {
+    return (_jsxs(_Fragment, { children: [_jsx(DataListingView, { config: config }), _jsx(Modal, { isOpen: markPaidOpen, onClose: closePaidModal, title: "Mark payout as paid", children: _jsxs(Form, { onSubmit: (e) => {
                         e.preventDefault();
                         markPaid.mutate();
-                    }, children: [_jsx(Input, { label: "Transaction / reference ID", value: transactionId, onChange: (e) => setTransactionId(e.target.value), placeholder: "UTR, UPI ref, or bank transfer ID (optional)" }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: closePaidModal, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: markPaid.isPending, children: markPaid.isPending ? "Saving..." : "Confirm paid" })] })] }) })] }));
+                    }, spacing: "md", children: [_jsx(Input, { label: "Transaction / reference ID", value: transactionId, onChange: (e) => setTransactionId(e.target.value), placeholder: "UTR, UPI ref, or bank transfer ID (optional)" }), _jsxs(FormActions, { align: "right", children: [_jsx(Button, { type: "button", variant: "outline", onClick: closePaidModal, children: "Cancel" }), _jsx(Button, { type: "submit", variant: "primary", disabled: markPaid.isPending, children: markPaid.isPending ? "Saving..." : "Confirm paid" })] })] }) })] }));
 }

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

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React from "react";
 import { Pencil } from "lucide-react";
-import { Badge, Button, Div, FilterChipGroup, ListingLayout, Span, Text } from "../../../ui";
+import { Badge, Button, FilterChipGroup, ListingLayout, Span, Text, TextLink } 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";
@@ -24,7 +24,7 @@ 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(Stack, { gap: "xs", children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] line-clamp-1", weight: "semibold", children: row.primary }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "xs", children: row.storeName })] })),
     },
     {
         key: "entryFee",
@@ -102,7 +102,7 @@ export function AdminPrizeDrawsView({ children, ...props }) {
                 onClick: () => selection.clearSelection(),
             },
         ],
-        renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsx("a", { href: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)), "aria-label": "Edit", children: _jsx(Pencil, { className: "w-4 h-4" }) }) })),
+        renderRowActions: (row) => (_jsx(Button, { variant: "ghost", size: "sm", asChild: true, children: _jsx(TextLink, { href: String(ROUTES.ADMIN.PRIZE_DRAWS_EDIT(row.id)), "aria-label": "Edit", children: _jsx(Pencil, { className: "w-4 h-4" }) }) })),
         renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(FilterChipGroup, { label: "Status", tabs: ADMIN_PRODUCT_STATUS_TABS, value: pendingFilters.status ?? "", onChange: (id) => setPendingFilters((p) => ({ ...p, status: id })) })),
     };
     return _jsx(DataListingView, { config: config });

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

@@ -1,7 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Row } from "@mohasinac/appkit/ui";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation, useQuery } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 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";
@@ -116,7 +118,7 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
             sellerName: option?.meta?.storeName ?? undefined,
         }));
     };
-    const saveMutation = useMutation({
+    const saveMutation = useApiMutation({
         mutationFn: async () => {
             const payload = applyMode(product, mode);
             if (isEdit) {
@@ -136,7 +138,7 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
             showToast(err?.message ?? "Failed to save product.", "error");
         },
     });
-    const deleteMutation = useMutation({
+    const deleteMutation = useApiMutation({
         mutationFn: () => apiClient.delete(ADMIN_ENDPOINTS.PRODUCT_BY_ID(productId)),
         onSuccess: () => {
             showToast("Product deleted.", "success");
@@ -148,16 +150,16 @@ export function AdminProductEditorView({ productId, onSaved, onDeleted, embedded
         },
     });
     const isSubmitting = saveMutation.isPending || productQuery.isLoading;
-    const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", className: "space-y-3", children: [_jsx(Text, { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: isEdit ? product.status ?? "—" : "New" }), _jsx(Button, { type: "submit", form: "product-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] }));
+    const actionSidebar = (_jsxs(Card, { variant: "outlined", padding: "md", spacing: "sm", children: [_jsx(Text, { className: "tracking-widest", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Status" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: isEdit ? product.status ?? "—" : "New" }), _jsx(Button, { type: "submit", form: "product-editor-form", className: "w-full", isLoading: isSubmitting, disabled: !product.title || isSubmitting, children: isEdit ? "Save changes" : "Create product" }), isEdit && (_jsx(Button, { type: "button", variant: "danger", className: "w-full", isLoading: deleteMutation.isPending, onClick: () => setDeleteOpen(true), children: "Delete product" }))] }));
     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
+        }, spacing: "lg", children: [_jsxs(Card, { variant: "outlined", padding: "lg", children: [_jsx(Text, { className: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", 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: "tracking-widest mb-4", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Classification" }), _jsxs(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", 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, 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"));
+                                    : 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, { size: "sm", weight: "medium", color: "primary", 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, { size: "sm", weight: "medium", color: "primary", 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(Row, { gap: "3", className: "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: `${__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, { layout: "grid", gap: "6", lgAlign: "start", className: "lg:grid-cols-[1fr_280px]", 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,9 +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 { normalizeError } from "../../../errors/normalize";
+import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
-import { Div, ListingLayout, Span, Text, Toggle, useToast } from "../../../ui";
+import { 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";
@@ -34,21 +35,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(Stack, { gap: "xs", children: [_jsx(Text, { weight: "semibold", color: "primary", children: row.primary }), _jsx(Text, { size: "xs", color: "muted", children: row.secondary })] })),
         },
         {
             key: "status",
             header: "Status",
             sortable: true,
             className: "w-36",
-            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 })),
+            render: (row) => (_jsx(Span, { size: "xs", weight: "medium", className: "inline-flex bg-primary-50 text-primary-800 dark:bg-secondary-900/30 dark:text-secondary-300", rounded: "full", padding: "pill-sm-tall", children: row.status })),
         },
         {
             key: "updatedAt",
             header: "Updated",
             sortable: true,
             className: "w-36",
-            render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-600 dark:text-zinc-300", children: row.updatedAt })),
+            render: (row) => (_jsx(Span, { size: "sm", color: "muted", children: row.updatedAt })),
         },
     ];
 }
@@ -62,11 +63,14 @@ export function AdminProductsView({ children, ...props }) {
             await apiClient.patch(ADMIN_ENDPOINTS.PRODUCT_BY_ID(id), { [field]: value });
         }
         catch (err) {
+            void normalizeError(err);
             setOverrides((o) => ({ ...o, [id]: { ...o[id], [field]: prev } }));
             showToast(err?.message ?? "Failed to update product.", "error");
         }
     }, [showToast, overrides]);
-    const handleQuickEdit = useCallback(async (id, values) => {
+    const handleQuickEdit = useCallback(
+    // audit-unknown-ok: QuickEditMenu values passthrough
+    async (id, values) => {
         const prev = overrides[id];
         setOverrides((o) => ({ ...o, [id]: { ...o[id], ...values } }));
         try {

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import { sortBy } from "@mohasinac/appkit";
 import { useState } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQueryClient } from "@tanstack/react-query";
 import { ConfirmDeleteModal, RowActionMenu, useToast } from "../../../ui";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 import { ACTIONS } from "../../../_internal/shared/actions/action-registry";
@@ -15,7 +16,7 @@ export function AdminReturnRequestsView(_props) {
     const [approveOpen, setApproveOpen] = useState(false);
     const [rejectOpen, setRejectOpen] = useState(false);
     const [selectedRow, setSelectedRow] = useState(null);
-    const approveMutation = useMutation({
+    const approveMutation = useApiMutation({
         mutationFn: async (orderId) => {
             await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "refunded" });
         },
@@ -30,7 +31,7 @@ export function AdminReturnRequestsView(_props) {
             showToast(err?.message ?? "Failed to approve return.", "error");
         },
     });
-    const rejectMutation = useMutation({
+    const rejectMutation = useApiMutation({
         mutationFn: async (orderId) => {
             await apiClient.patch(ADMIN_ENDPOINTS.ORDER_BY_ID(orderId), { status: "delivered" });
         },

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
+import { useApiMutation } from "@mohasinac/appkit/client";
+import { Row, SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState, useCallback } from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Div, FilterChipGroup, Label, ListingLayout, Modal, RowActionMenu, useToast } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, 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";
@@ -20,7 +21,7 @@ export function AdminReviewsView({ children, ...props }) {
     const [replyOpen, setReplyOpen] = useState(false);
     const [replyTarget, setReplyTarget] = useState(null);
     const [replyText, setReplyText] = useState("");
-    const patchMutation = useMutation({
+    const patchMutation = useApiMutation({
         mutationFn: async ({ id, payload }) => {
             await apiClient.patch(ADMIN_ENDPOINTS.REVIEW_BY_ID(id), payload);
         },
@@ -32,7 +33,7 @@ export function AdminReviewsView({ children, ...props }) {
             showToast(err?.message ?? "Failed to update review.", "error");
         },
     });
-    const replyMutation = useMutation({
+    const replyMutation = useApiMutation({
         mutationFn: async () => {
             await apiClient.patch(ADMIN_ENDPOINTS.REVIEW_BY_ID(replyTarget.id), { adminReply: replyText });
         },
@@ -153,7 +154,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(Stack, { gap: "md", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Label, { size: "sm", weight: "medium", color: "primary", 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(Row, { justify: "end", gap: "sm", children: [_jsx(Button, { variant: "secondary", onClick: () => {
                                         setReplyOpen(false);
                                         setReplyText("");
                                         setReplyTarget(null);

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

@@ -1,8 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useApiMutation } from "@mohasinac/appkit/client";
 import React from "react";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { Button, Code, Div, FormActions, Label, Select, SideDrawer, Span, Text, useToast, } from "../../../ui";
+import { useQueryClient } from "@tanstack/react-query";
+import { Button, Code, Div, FormActions, HorizontalRule, Label, Row, Select, SideDrawer, Span, Stack, Text, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
 import { ADMIN_ENDPOINTS } from "../../../constants/api-endpoints";
 const __P = {
@@ -33,7 +34,7 @@ export function AdminScammerEditorView({ open, onClose, scammerId, displayNames
             setNote(verificationNote ?? "");
         }
     }, [open, currentStatus, verificationNote]);
-    const updateMutation = useMutation({
+    const updateMutation = useApiMutation({
         mutationFn: async () => {
             await apiClient.patch(ADMIN_ENDPOINTS.SCAMMER_BY_ID(scammerId), {
                 status,
@@ -49,7 +50,7 @@ export function AdminScammerEditorView({ open, onClose, scammerId, displayNames
             showToast(err?.message ?? "Failed to update profile.", "error");
         },
     });
-    const deleteMutation = useMutation({
+    const deleteMutation = useApiMutation({
         mutationFn: async () => {
             await apiClient.delete(ADMIN_ENDPOINTS.SCAMMER_BY_ID(scammerId));
         },
@@ -62,5 +63,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.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" })] })] }) }));
+    return (_jsx(SideDrawer, { isOpen: open, onClose: onClose, title: displayNames.length > 0 ? displayNames[0] : "Scammer Profile", children: _jsxs(Stack, { className: `${__P.p4}`, gap: "md", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Span, { size: "xs", weight: "medium", className: `inline-flex ${STATUS_COLOR[currentStatus ?? "pending_review"] ?? STATUS_COLOR.pending_review}`, rounded: "full", padding: "pill-sm-tall", children: (currentStatus ?? "pending_review").replace(/_/g, " ") }), scamType && (_jsx(Span, { size: "xs", rounded: "full", padding: "pill-sm-tall", surface: "subtle", color: "muted", children: scamType.replace(/_/g, " ") }))] }), displayNames.length > 0 && (_jsxs(Div, { children: [_jsx(Text, { className: "mb-1 tracking-wide", color: "muted", size: "xs", weight: "semibold", transform: "uppercase", children: "Names / Aliases" }), _jsx(Row, { wrap: true, gap: "xs", children: displayNames.map((name, i) => (_jsx(Span, { size: "xs", rounded: "full", surface: "subtle", padding: "pill-sm", children: name }, i))) })] })), (phones.length > 0 || upiIds.length > 0) && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [phones.length > 0 && (_jsxs(Div, { className: "mb-2", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Phone numbers" }), _jsx(Row, { wrap: true, gap: "xs", children: phones.map((p, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: p }, i))) })] })), upiIds.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "UPI IDs" }), _jsx(Row, { wrap: true, gap: "xs", children: upiIds.map((u, i) => (_jsx(Code, { size: "xs", rounded: "default", padding: "sm", surface: "subtle", children: u }, i))) })] }))] })), description && (_jsxs(Div, { className: `${__P.p3}`, rounded: "lg", surface: "muted", border: "default", children: [_jsx(Text, { className: CLS_SECTION_LABEL, children: "Description" }), _jsx(Text, { className: "whitespace-pre-wrap", color: "primary", size: "sm", children: description })] })), _jsxs(Div, { textSize: "xs", color: "muted", children: ["Reported by:", " ", _jsx(Span, { weight: "medium", color: "muted", children: reportedByAnon ? "Anonymous" : (reportedBy ?? "Unknown") })] }), _jsx(HorizontalRule, { tone: "subtle", spacing: "comfortable" }), _jsx(Select, { label: "Status", options: STATUS_OPTIONS, value: status, onValueChange: setStatus }), _jsxs(Stack, { gap: "xs", children: [_jsx(Label, { className: "uppercase tracking-wide", color: "muted", size: "xs", weight: "semibold", 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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { sieveFilter, SIEVE_OP } from "@mohasinac/appkit";
 import { sortBy } from "@mohasinac/appkit";
 import React, { useState } from "react";
-import { Div, FilterChipGroup, ListingLayout, RowActionMenu, Span, Text } from "../../../ui";
+import { FilterChipGroup, ListingLayout, RowActionMenu, Span, Stack, 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";
@@ -20,19 +20,19 @@ 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(Stack, { gap: "none", className: "", children: [_jsx(Text, { weight: "medium", color: "primary", children: row.primary }), row.secondary ? (_jsx(Text, { size: "xs", color: "muted", children: row.secondary })) : null] })),
     },
     {
         key: "status",
         header: "Status",
         className: "w-36",
-        render: (row) => (_jsx("span", { className: `inline-flex rounded-full px-2.5 py-1 text-xs font-medium ${STATUS_BADGE[row.status] ?? STATUS_BADGE.pending_review}`, children: row.status.replace(/_/g, " ") })),
+        render: (row) => (_jsx(Span, { className: `inline-flex ${STATUS_BADGE[row.status] ?? STATUS_BADGE.pending_review}`, size: "xs", weight: "medium", rounded: "full", padding: "pill-sm-tall", children: row.status.replace(/_/g, " ") })),
     },
     {
         key: "updatedAt",
         header: "Updated",
         className: "w-32",
-        render: (row) => (_jsx(Span, { size: "sm", className: "text-zinc-500 dark:text-zinc-400", children: row.updatedAt })),
+        render: (row) => (_jsx(Span, { size: "sm", color: "muted", children: row.updatedAt })),
     },
 ];
 export function AdminScammersView({ children, ...props }) {