@mohasinac/appkit 2.3.1 → 2.4.0

package/dist/features/seller/components/SellerCouponEditorView.js

@@ -0,0 +1,67 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Badge, Button, Div, Heading, Input, Row, Select, Stack, Text } from "../../../ui";
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+const TYPE_OPTIONS = [
+    { value: "percentage", label: "Percentage off (e.g. 10%)" },
+    { value: "fixed", label: "Fixed amount off (e.g. ₹50)" },
+    { value: "free_shipping", label: "Free shipping" },
+];
+const EMPTY_DRAFT = {
+    code: "",
+    type: "percentage",
+    value: "",
+    minPurchase: "",
+    maxDiscount: "",
+    totalLimit: "",
+    perUserLimit: "",
+    startDate: "",
+    endDate: "",
+    isActive: true,
+};
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function SellerCouponEditorView({ couponId, initial, onSave, onCancel, }) {
+    const [draft, setDraft] = useState({ ...EMPTY_DRAFT, ...initial });
+    const [saving, setSaving] = useState(false);
+    const [error, setError] = useState(null);
+    const set = (key, value) => setDraft((d) => ({ ...d, [key]: value }));
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        if (!draft.code.trim()) {
+            setError("Coupon code is required");
+            return;
+        }
+        if (draft.type !== "free_shipping" && !draft.value) {
+            setError("Discount value is required");
+            return;
+        }
+        if (!draft.startDate || !draft.endDate) {
+            setError("Start and end dates are required");
+            return;
+        }
+        if (draft.startDate > draft.endDate) {
+            setError("Start date must be before end date");
+            return;
+        }
+        setError(null);
+        setSaving(true);
+        try {
+            await onSave(draft, couponId);
+        }
+        catch (err) {
+            setError(err.message ?? "Failed to save coupon");
+        }
+        finally {
+            setSaving(false);
+        }
+    };
+    const isEdit = Boolean(couponId);
+    return (_jsx("form", { onSubmit: handleSubmit, noValidate: true, children: _jsxs(Stack, { gap: "none", className: "max-w-lg mx-auto", children: [_jsx(Div, { className: "border-b border-[var(--appkit-color-border,#e5e7eb)] dark:border-[var(--appkit-color-border-dark,#374151)] px-6 py-5", children: _jsxs(Row, { className: "items-center justify-between gap-3", children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-[var(--appkit-color-text-primary)]", children: isEdit ? "Edit Coupon" : "Create Coupon" }), isEdit && (_jsx(Badge, { variant: draft.isActive ? "success" : "default", children: draft.isActive ? "Active" : "Inactive" }))] }) }), _jsxs(Stack, { gap: "5", className: "px-6 py-6", children: [error && (_jsx(Div, { className: "rounded-lg border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", children: error })), _jsx(Input, { label: "Coupon Code", value: draft.code, onChange: (e) => set("code", e.target.value.toUpperCase().replace(/\s+/g, "")), placeholder: "e.g. WELCOME10", required: true, disabled: isEdit, helperText: isEdit ? "Code cannot be changed after creation" : "Customers enter this at checkout" }), _jsx(Select, { label: "Discount Type", value: draft.type, options: TYPE_OPTIONS, onChange: (e) => set("type", e.target.value) }), draft.type !== "free_shipping" && (_jsx(Input, { label: draft.type === "percentage" ? "Discount Percentage (%)" : "Discount Amount (₹)", type: "number", min: 1, max: draft.type === "percentage" ? 100 : undefined, value: draft.value, onChange: (e) => set("value", e.target.value), placeholder: draft.type === "percentage" ? "e.g. 10" : "e.g. 50", required: true, helperText: draft.type === "percentage"
+                                ? "Enter a value between 1 and 100"
+                                : "Fixed rupee discount applied to the order" })), draft.type === "percentage" && (_jsx(Input, { label: "Max Discount Cap (\u20B9, optional)", type: "number", min: 0, value: draft.maxDiscount, onChange: (e) => set("maxDiscount", e.target.value), placeholder: "Leave blank for no cap", helperText: "Maximum rupee discount regardless of percentage" })), _jsx(Input, { label: "Minimum Order Amount (\u20B9, optional)", type: "number", min: 0, value: draft.minPurchase, onChange: (e) => set("minPurchase", e.target.value), placeholder: "Leave blank for no minimum" }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "font-medium text-[var(--appkit-color-text-secondary)] mb-3", children: "Usage Limits" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Input, { label: "Total Uses", type: "number", min: 0, value: draft.totalLimit, onChange: (e) => set("totalLimit", e.target.value), placeholder: "0 = unlimited" }), _jsx(Input, { label: "Per Customer", type: "number", min: 0, value: draft.perUserLimit, onChange: (e) => set("perUserLimit", e.target.value), placeholder: "0 = unlimited" })] })] }), _jsxs(Div, { children: [_jsx(Text, { size: "sm", className: "font-medium text-[var(--appkit-color-text-secondary)] mb-3", children: "Validity Period" }), _jsxs("div", { className: "grid grid-cols-2 gap-3", children: [_jsx(Input, { label: "Start Date", type: "date", value: draft.startDate, onChange: (e) => set("startDate", e.target.value), required: true }), _jsx(Input, { label: "End Date", type: "date", value: draft.endDate, onChange: (e) => set("endDate", e.target.value), required: true })] })] }), _jsx(Div, { className: "flex items-center gap-3 rounded-lg border border-[var(--appkit-color-border)] dark:border-[var(--appkit-color-border-dark)] px-4 py-3", children: _jsxs("label", { className: "flex items-center gap-3 cursor-pointer w-full", children: [_jsx("input", { type: "checkbox", checked: draft.isActive, onChange: (e) => set("isActive", e.target.checked), className: "h-4 w-4 rounded border-zinc-300 dark:border-slate-600 text-[var(--appkit-color-primary)] focus:ring-[var(--appkit-color-primary)]" }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx(Text, { size: "sm", className: "font-medium text-[var(--appkit-color-text-primary)]", children: "Active" }), _jsx(Text, { size: "xs", className: "text-[var(--appkit-color-text-secondary)]", children: "Customers can apply this coupon at checkout" })] })] }) })] }), _jsx(Div, { className: "border-t border-[var(--appkit-color-border)] dark:border-[var(--appkit-color-border-dark)] px-6 py-4", children: _jsxs(Row, { className: "items-center justify-end gap-3", children: [onCancel && (_jsx(Button, { type: "button", variant: "outline", onClick: onCancel, disabled: saving, children: "Cancel" })), _jsx(Button, { type: "submit", isLoading: saving, disabled: saving, children: isEdit ? "Save Changes" : "Create Coupon" })] }) })] }) }));
+}

package/dist/features/seller/components/SellerCouponsView.d.ts

@@ -1,6 +1,8 @@
-import React from "react";
 import type { ListingViewShellProps } from "../../../ui";
 export interface SellerCouponsViewProps extends ListingViewShellProps {
-    renderHeader?: (onAdd: () => void) => React.ReactNode;
+    onCreateClick?: () => void;
+    onEditClick?: (couponId: string) => void;
+    onToggle?: (couponId: string, currentlyActive: boolean) => Promise<void>;
+    onDelete?: (couponId: string) => Promise<void>;
 }
-export declare function SellerCouponsView({ renderHeader, children, ...props }: SellerCouponsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerCouponsView({ onCreateClick, onEditClick, onToggle, onDelete, children, ...props }: SellerCouponsViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/SellerCouponsView.js

@@ -1,29 +1,151 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X, Plus, ToggleLeft, ToggleRight, Trash2, Pencil } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Badge, Button, Div, ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
-export function SellerCouponsView({ renderHeader, children, ...props }) {
+import { DataTable } from "../../admin/components/DataTable";
+// ---------------------------------------------------------------------------
+// Config
+// ---------------------------------------------------------------------------
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["isActive"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+    { value: "code", label: "Code A–Z" },
+];
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+function formatDiscount(item) {
+    const type = String(item.type ?? "");
+    const discount = item.discount;
+    const val = Number(discount?.value ?? 0);
+    if (type === "percentage")
+        return `${val}% off`;
+    if (type === "fixed")
+        return `₹${(val / 100).toFixed(0)} off`;
+    if (type === "free_shipping")
+        return "Free shipping";
+    return `${val} off`;
+}
+function getValidityEnd(item) {
+    const validity = item.validity;
+    return validity?.endDate ?? item.expiresAt;
+}
+function getIsActive(item) {
+    const validity = item.validity;
+    return Boolean(validity?.isActive ?? item.isActive);
+}
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+export function SellerCouponsView({ onCreateClick, onEditClick, onToggle, onDelete, children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
-    const { rows, total, isLoading, errorMessage } = useSellerListingData({
+    const [togglingId, setTogglingId] = useState(null);
+    const [deletingId, setDeletingId] = useState(null);
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const commitSearch = useCallback(() => { table.set("q", searchInput.trim()); }, [searchInput, table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
+    const isActiveRaw = table.get("isActive");
+    const filters = isActiveRaw ? `isActive==${isActiveRaw}` : undefined;
+    const { rows, total, isLoading, errorMessage, refetch } = useSellerListingData({
         queryKey: ["seller", "coupons", "listing"],
         endpoint: SELLER_ENDPOINTS.COUPONS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
         mapRows: (response) => toRecordArray(response.coupons).map((item, index) => ({
             id: toStringValue(item.id, `coupon-${index}`),
-            primary: toStringValue(item.code, "Untitled coupon"),
-            secondary: [
-                toStringValue(item.discountType === "percentage" ? `${item.discountValue}%` : `₹${item.discountValue}`, "No discount"),
-                `Expires: ${toRelativeDate(item.expiresAt)}`,
-            ].join(" · "),
-            status: item.isActive ? "Active" : "Inactive",
+            primary: toStringValue(item.code, "Untitled"),
+            secondary: `${formatDiscount(item)} · Expires ${toRelativeDate(getValidityEnd(item))}`,
+            status: getIsActive(item) ? "Active" : "Inactive",
             updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+            isActive: getIsActive(item),
         })),
         getTotal: (response, mappedRows) => typeof response.total === "number" ? response.total : mappedRows.length,
     });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
+    const columns = [
+        {
+            key: "primary",
+            header: "Code",
+            render: (row) => (_jsxs("div", { className: "space-y-0.5", children: [_jsx("p", { className: "font-mono font-semibold text-zinc-900 dark:text-zinc-100", children: row.primary }), _jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.secondary })] })),
+        },
+        {
+            key: "status",
+            header: "Status",
+            className: "w-28",
+            render: (row) => (_jsx(Badge, { variant: row.isActive ? "success" : "default", children: row.status })),
+        },
+        {
+            key: "updatedAt",
+            header: "Updated",
+            className: "w-28",
+            render: (row) => _jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: row.updatedAt }),
+        },
+    ];
+    const renderRowActions = useCallback((row) => (_jsxs("div", { className: "flex items-center gap-1.5 justify-end", children: [onEditClick && (_jsx("button", { type: "button", onClick: () => onEditClick(row.id), title: "Edit", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 hover:text-zinc-700 dark:hover:text-zinc-300 transition-colors", children: _jsx(Pencil, { className: "h-4 w-4" }) })), onToggle && (_jsx("button", { type: "button", onClick: async () => {
+                    setTogglingId(row.id);
+                    try {
+                        await onToggle(row.id, row.isActive);
+                        await refetch?.();
+                    }
+                    finally {
+                        setTogglingId(null);
+                    }
+                }, disabled: togglingId === row.id, title: row.isActive ? "Deactivate" : "Activate", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors disabled:opacity-50", children: row.isActive
+                    ? _jsx(ToggleRight, { className: "h-4 w-4 text-green-600 dark:text-green-400" })
+                    : _jsx(ToggleLeft, { className: "h-4 w-4" }) })), onDelete && (_jsx("button", { type: "button", onClick: async () => {
+                    if (!confirm(`Delete coupon "${row.primary}"? This cannot be undone.`))
+                        return;
+                    setDeletingId(row.id);
+                    try {
+                        await onDelete(row.id);
+                        await refetch?.();
+                    }
+                    finally {
+                        setDeletingId(null);
+                    }
+                }, disabled: deletingId === row.id, title: "Delete", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-red-50 dark:hover:bg-red-950/40 hover:text-red-600 dark:hover:text-red-400 transition-colors disabled:opacity-50", children: _jsx(Trash2, { className: "h-4 w-4" }) }))] })), [onEditClick, onToggle, onDelete, togglingId, deletingId, refetch]);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "seller", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "seller", ...props, title: "Coupons", subtitle: "Create and manage discount codes for your customers", actionLabel: "New Coupon", searchPlaceholder: "Search coupons by code", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No coupons found", resultSummary: `Showing ${rows.length} of ${total} coupons` }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search by coupon code", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState, extra: onCreateClick
+                    ? (_jsxs(Button, { size: "sm", onClick: onCreateClick, className: "flex items-center gap-1.5", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { children: "Add Coupon" })] }))
+                    : undefined }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx(Div, { className: "mb-4 rounded-xl border border-red-200 bg-red-50 dark:bg-red-950/40 dark:border-red-900/60 px-4 py-3 text-sm text-red-700 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, columns: columns, isLoading: isLoading, emptyLabel: "No coupons found \u2014 create your first coupon", renderRowActions: renderRowActions })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: [{ label: "All", value: "" }, { label: "Active", value: "true" }, { label: "Inactive", value: "false" }].map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, isActive: opt.value })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.isActive || "") === opt.value
+                                                    ? "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]"
+                                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt.label }, opt.label))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-[var(--appkit-color-primary)] py-2.5 text-sm font-semibold text-white transition-colors active:scale-[0.98]", children: ["Apply", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

package/dist/features/seller/components/SellerCreateProductView.d.ts

@@ -1,11 +1,5 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface SellerCreateProductViewProps extends Omit<StackedViewShellProps, "sections"> {
-    labels?: {
-        title?: string;
-        submitButton?: string;
-    };
-    renderForm?: (isLoading: boolean) => React.ReactNode;
-    isLoading?: boolean;
+import type { SellerProductShellProps, ProductListingMode } from "./SellerProductShell";
+export interface SellerCreateProductViewProps extends Omit<SellerProductShellProps, "mode"> {
+    listingType?: ProductListingMode;
 }
-export declare function SellerCreateProductView({ labels, renderForm, isLoading, ...rest }: SellerCreateProductViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerCreateProductView(props: SellerCreateProductViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/SellerCreateProductView.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StackedViewShell } from "../../../ui";
-export function SellerCreateProductView({ labels = {}, renderForm, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "seller", ...rest, title: labels.title, sections: [renderForm?.(isLoading)] }));
+import { SellerProductShell } from "./SellerProductShell";
+export function SellerCreateProductView(props) {
+    return _jsx(SellerProductShell, { mode: "create", ...props });
 }

package/dist/features/seller/components/SellerEditProductView.d.ts

@@ -1,11 +1,5 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface SellerEditProductViewProps extends Omit<StackedViewShellProps, "sections"> {
-    labels?: {
-        title?: string;
-        submitButton?: string;
-    };
-    renderForm?: (isLoading: boolean) => React.ReactNode;
-    isLoading?: boolean;
+import type { SellerProductShellProps, ProductListingMode } from "./SellerProductShell";
+export interface SellerEditProductViewProps extends Omit<SellerProductShellProps, "mode"> {
+    listingType?: ProductListingMode;
 }
-export declare function SellerEditProductView({ labels, renderForm, isLoading, ...rest }: SellerEditProductViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerEditProductView(props: SellerEditProductViewProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/SellerEditProductView.js

@@ -1,5 +1,6 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { StackedViewShell } from "../../../ui";
-export function SellerEditProductView({ labels = {}, renderForm, isLoading = false, ...rest }) {
-    return (_jsx(StackedViewShell, { portal: "seller", ...rest, title: labels.title, sections: [renderForm?.(isLoading)] }));
+import { SellerProductShell } from "./SellerProductShell";
+export function SellerEditProductView(props) {
+    return _jsx(SellerProductShell, { mode: "edit", ...props });
 }

package/dist/features/seller/components/SellerOffersPanel.d.ts

@@ -0,0 +1,20 @@
+export type SellerOfferAction = {
+    action: "accept";
+    offerId: string;
+    sellerNote?: string;
+} | {
+    action: "decline";
+    offerId: string;
+    sellerNote?: string;
+} | {
+    action: "counter";
+    offerId: string;
+    counterAmount: number;
+    sellerNote?: string;
+};
+export interface SellerOffersPanelProps {
+    fetchEndpoint?: string;
+    onRespond: (input: SellerOfferAction) => Promise<void>;
+    className?: string;
+}
+export declare function SellerOffersPanel({ fetchEndpoint, onRespond, className, }: SellerOffersPanelProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/seller/components/SellerOffersPanel.js

@@ -0,0 +1,138 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState, useTransition } from "react";
+import { Alert, Badge, Button, Div, Heading, Input, Spinner, Text } from "../../../ui";
+function formatRupees(amount) {
+    if (amount === undefined || amount === null)
+        return "—";
+    return `₹${amount.toLocaleString("en-IN")}`;
+}
+function relativeTime(date) {
+    if (!date)
+        return "";
+    const d = date instanceof Date ? date : new Date(date);
+    const diff = Date.now() - d.getTime();
+    const mins = Math.floor(diff / 60000);
+    if (mins < 60)
+        return `${mins}m ago`;
+    const hrs = Math.floor(diff / 3600000);
+    if (hrs < 24)
+        return `${hrs}h ago`;
+    return `${Math.floor(diff / 86400000)}d ago`;
+}
+function expiresIn(expiresAt) {
+    if (!expiresAt)
+        return "";
+    const exp = expiresAt instanceof Date ? expiresAt : new Date(expiresAt);
+    const diff = exp.getTime() - Date.now();
+    if (diff <= 0)
+        return "Expired";
+    const hrs = Math.floor(diff / 3600000);
+    if (hrs < 1)
+        return "< 1h left";
+    if (hrs < 24)
+        return `${hrs}h left`;
+    return `${Math.floor(diff / 86400000)}d left`;
+}
+function statusVariant(status) {
+    switch (status) {
+        case "pending": return "warning";
+        case "accepted": return "success";
+        case "declined": return "danger";
+        case "countered": return "info";
+        case "expired": return "default";
+        case "withdrawn": return "default";
+        case "paid": return "success";
+        default: return "default";
+    }
+}
+function OfferCard({ offer, onRespond, onUpdate }) {
+    const [uiState, setUiState] = useState("idle");
+    const [counterInput, setCounterInput] = useState("");
+    const [sellerNote, setSellerNote] = useState("");
+    const [error, setError] = useState("");
+    const [isPending, startTransition] = useTransition();
+    const isPendingOffer = offer.status === "pending";
+    function submit(action) {
+        setError("");
+        startTransition(async () => {
+            try {
+                await onRespond(action);
+                onUpdate(offer.id, {
+                    status: action.action === "accept"
+                        ? "accepted"
+                        : action.action === "decline"
+                            ? "declined"
+                            : "countered",
+                });
+                setUiState("idle");
+            }
+            catch (err) {
+                setError(err instanceof Error ? err.message : "Something went wrong.");
+            }
+        });
+    }
+    function handleAccept() {
+        submit({ action: "accept", offerId: offer.id, sellerNote: sellerNote || undefined });
+    }
+    function handleDecline() {
+        submit({ action: "decline", offerId: offer.id, sellerNote: sellerNote || undefined });
+    }
+    function handleCounter() {
+        const amount = parseInt(counterInput, 10);
+        if (!amount || amount <= 0) {
+            setError("Enter a valid counter amount.");
+            return;
+        }
+        if (amount >= offer.listedPrice) {
+            setError("Counter must be below the listed price.");
+            return;
+        }
+        if (amount === offer.offerAmount) {
+            setError("Counter must differ from the buyer's offer.");
+            return;
+        }
+        submit({ action: "counter", offerId: offer.id, counterAmount: amount, sellerNote: sellerNote || undefined });
+    }
+    return (_jsxs(Div, { className: "rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 p-4 space-y-3", children: [_jsxs(Div, { className: "flex items-start justify-between gap-2 flex-wrap", children: [_jsxs(Div, { className: "min-w-0", children: [_jsx(Text, { className: "font-semibold text-sm text-zinc-900 dark:text-zinc-100 truncate", children: offer.productTitle ?? "Unknown Product" }), _jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 mt-0.5", children: [relativeTime(offer.createdAt), " \u00B7 ", isPendingOffer ? expiresIn(offer.expiresAt) : ""] })] }), _jsx(Badge, { variant: statusVariant(offer.status), className: "shrink-0 capitalize text-xs", children: offer.status })] }), _jsxs(Div, { className: "flex gap-4 flex-wrap", children: [_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 uppercase tracking-wide", children: "Listed" }), _jsx(Text, { className: "text-sm font-medium text-zinc-700 dark:text-zinc-300", children: formatRupees(offer.listedPrice) })] }), _jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 uppercase tracking-wide", children: "Offered" }), _jsx(Text, { className: "text-sm font-semibold text-zinc-900 dark:text-zinc-100", children: formatRupees(offer.offerAmount) })] }), offer.counterAmount != null && (_jsxs(Div, { children: [_jsx(Text, { className: "text-xs text-zinc-400 dark:text-zinc-500 uppercase tracking-wide", children: "Your Counter" }), _jsx(Text, { className: "text-sm font-medium text-blue-600 dark:text-blue-400", children: formatRupees(offer.counterAmount) })] }))] }), offer.buyerNote && (_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400 italic", children: ["\"", offer.buyerNote, "\""] })), isPendingOffer && uiState === "idle" && (_jsxs(Div, { className: "flex gap-2 flex-wrap", children: [_jsx(Button, { size: "sm", variant: "primary", onClick: () => setUiState("accepting"), disabled: isPending, children: "Accept" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setUiState("countering"), disabled: isPending, className: "border border-zinc-300 dark:border-zinc-600", children: "Counter" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setUiState("declining"), disabled: isPending, className: "text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800", children: "Decline" })] })), uiState === "accepting" && (_jsxs(Div, { className: "space-y-2", children: [_jsx(Input, { placeholder: "Optional note to buyer", value: sellerNote, onChange: (e) => setSellerNote(e.target.value), disabled: isPending }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "primary", onClick: handleAccept, disabled: isPending, children: isPending ? "Accepting…" : "Confirm Accept" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setUiState("idle"), disabled: isPending, children: "Cancel" })] })] })), uiState === "declining" && (_jsxs(Div, { className: "space-y-2", children: [_jsx(Input, { placeholder: "Optional note to buyer", value: sellerNote, onChange: (e) => setSellerNote(e.target.value), disabled: isPending }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "ghost", onClick: handleDecline, disabled: isPending, className: "text-red-600 dark:text-red-400 border border-red-200 dark:border-red-800", children: isPending ? "Declining…" : "Confirm Decline" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setUiState("idle"), disabled: isPending, children: "Cancel" })] })] })), uiState === "countering" && (_jsxs(Div, { className: "space-y-2", children: [_jsxs(Text, { className: "text-xs text-zinc-500 dark:text-zinc-400", children: ["Suggest a price between the buyer's offer (", formatRupees(offer.offerAmount), ") and your listed price (", formatRupees(offer.listedPrice), ")."] }), _jsx(Input, { type: "number", placeholder: "Your counter amount (\u20B9)", value: counterInput, onChange: (e) => setCounterInput(e.target.value), disabled: isPending }), _jsx(Input, { placeholder: "Optional note to buyer", value: sellerNote, onChange: (e) => setSellerNote(e.target.value), disabled: isPending }), _jsxs(Div, { className: "flex gap-2", children: [_jsx(Button, { size: "sm", variant: "secondary", onClick: handleCounter, disabled: isPending, children: isPending ? "Sending…" : "Send Counter" }), _jsx(Button, { size: "sm", variant: "ghost", onClick: () => setUiState("idle"), disabled: isPending, children: "Cancel" })] })] })), error && _jsx(Alert, { variant: "error", children: _jsx(Text, { className: "text-xs", children: error }) })] }));
+}
+export function SellerOffersPanel({ fetchEndpoint = "/api/store/offers", onRespond, className = "", }) {
+    const [offers, setOffers] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [fetchError, setFetchError] = useState("");
+    const [statusFilter, setStatusFilter] = useState("all");
+    const loadOffers = useCallback(async () => {
+        setLoading(true);
+        setFetchError("");
+        try {
+            const url = statusFilter === "all"
+                ? fetchEndpoint
+                : `${fetchEndpoint}?status=${statusFilter}`;
+            const res = await fetch(url);
+            if (!res.ok)
+                throw new Error(`Error ${res.status}`);
+            const json = (await res.json());
+            setOffers(json.items ?? json.offers ?? []);
+        }
+        catch (err) {
+            setFetchError(err instanceof Error ? err.message : "Failed to load offers.");
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [fetchEndpoint, statusFilter]);
+    useEffect(() => { void loadOffers(); }, [loadOffers]);
+    function handleUpdate(id, patch) {
+        setOffers((prev) => prev.map((o) => (o.id === id ? { ...o, ...patch } : o)));
+    }
+    const STATUS_FILTERS = [
+        { value: "all", label: "All" },
+        { value: "pending", label: "Pending" },
+        { value: "countered", label: "Countered" },
+        { value: "accepted", label: "Accepted" },
+        { value: "declined", label: "Declined" },
+        { value: "expired", label: "Expired" },
+    ];
+    const pending = offers.filter((o) => o.status === "pending").length;
+    return (_jsxs(Div, { className: `space-y-4 ${className}`, children: [_jsxs(Div, { className: "flex items-center justify-between flex-wrap gap-2", children: [_jsxs(Div, { children: [_jsx(Heading, { level: 2, className: "text-lg font-semibold text-zinc-900 dark:text-zinc-100", children: "Offers Received" }), pending > 0 && (_jsxs(Text, { className: "text-xs text-amber-600 dark:text-amber-400 mt-0.5", children: [pending, " pending offer", pending > 1 ? "s" : "", " awaiting your response"] }))] }), _jsx(Button, { size: "sm", variant: "ghost", onClick: loadOffers, disabled: loading, className: "border border-zinc-300 dark:border-zinc-600 text-xs", children: loading ? "Refreshing…" : "Refresh" })] }), _jsx(Div, { className: "flex gap-1 flex-wrap", children: STATUS_FILTERS.map((f) => (_jsx(Button, { size: "sm", variant: statusFilter === f.value ? "primary" : "ghost", onClick: () => setStatusFilter(f.value), className: "text-xs px-2 py-1", children: f.label }, f.value))) }), fetchError && _jsx(Alert, { variant: "error", children: _jsx(Text, { className: "text-sm", children: fetchError }) }), loading && (_jsx(Div, { className: "flex justify-center py-12", children: _jsx(Spinner, { size: "lg" }) })), !loading && offers.length === 0 && (_jsx(Div, { className: "text-center py-12", children: _jsx(Text, { className: "text-zinc-400 dark:text-zinc-500 text-sm", children: "No offers found" }) })), !loading && offers.length > 0 && (_jsx(Div, { className: "space-y-3", children: offers.map((offer) => (_jsx(OfferCard, { offer: offer, onRespond: onRespond, onUpdate: handleUpdate }, offer.id))) }))] }));
+}

package/dist/features/seller/components/SellerOffersView.js

@@ -1,15 +1,62 @@
 "use client";
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from "react";
-import { ListingViewShell } from "../../../ui";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useState, useCallback } from "react";
+import { X } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { ListingToolbar, Pagination, ListingViewShell } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
 import { toRecordArray, toRelativeDate, toRupees, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
+import { DataTable } from "../../admin/components/DataTable";
+const PAGE_SIZE = 25;
+const FILTER_KEYS = ["status"];
+const DEFAULT_SORT = "-createdAt";
+const SORT_OPTIONS = [
+    { value: "-createdAt", label: "Newest" },
+    { value: "createdAt", label: "Oldest" },
+];
+const STATUS_OPTIONS = ["All", "pending", "accepted", "rejected", "expired"];
 export function SellerOffersView({ children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [pendingFilters, setPendingFilters] = useState(() => Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+    const openFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, table.get(k)])));
+        setFilterOpen(true);
+    }, [table]);
+    const applyFilters = useCallback(() => {
+        const updates = { page: "1" };
+        for (const k of FILTER_KEYS)
+            updates[k] = pendingFilters[k] ?? "";
+        table.setMany(updates);
+        setFilterOpen(false);
+    }, [pendingFilters, table]);
+    const clearFilters = useCallback(() => {
+        setPendingFilters(Object.fromEntries(FILTER_KEYS.map((k) => [k, ""])));
+    }, []);
+    const resetAll = useCallback(() => {
+        const updates = { q: "", sort: "" };
+        for (const k of FILTER_KEYS)
+            updates[k] = "";
+        table.setMany(updates);
+        setSearchInput("");
+    }, [table]);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+    }, [searchInput, table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || activeFilterCount > 0;
+    const statusRaw = table.get("status");
+    const filters = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
     const { rows, total, isLoading, errorMessage } = useSellerListingData({
         queryKey: ["seller", "offers", "listing"],
         endpoint: SELLER_ENDPOINTS.OFFERS,
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
         mapRows: (response) => toRecordArray(response.offers).map((item, index) => ({
             id: toStringValue(item.id, `offer-${index}`),
             primary: toStringValue(item.productTitle ?? item.title, "Untitled product"),
@@ -22,8 +69,12 @@ export function SellerOffersView({ children, ...props }) {
         })),
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
     });
+    const currentPage = table.getNumber("page", 1);
+    const totalPages = Math.ceil(total / PAGE_SIZE);
     if (hasChildren) {
         return _jsx(ListingViewShell, { portal: "seller", ...props, children: children });
     }
-    return (_jsx(AdminListingScaffold, { portal: "seller", ...props, title: "Offers Received", subtitle: "Negotiate and accept buyer offers on your products", actionLabel: "", searchPlaceholder: "Search offers by product or buyer name", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No offers received", resultSummary: `Showing ${rows.length} of ${total} offers` }));
+    return (_jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search offers by product or buyer name", onSearchChange: setSearchInput, onSearchCommit: commitSearch, sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => { table.set("sort", v); table.setPage(1); }, hideViewToggle: true, onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx("div", { className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 flex justify-center bg-white/95 dark:bg-slate-900/95 backdrop-blur-sm border-b border-zinc-200 dark:border-slate-700 px-3 py-1.5", children: _jsx(Pagination, { currentPage: currentPage, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsxs("div", { className: "py-4 px-3 sm:px-4", children: [errorMessage && (_jsx("div", { className: "mb-4 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200", children: errorMessage })), _jsx(DataTable, { rows: rows, isLoading: isLoading, emptyLabel: "No offers received" })] }), filterOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-40 bg-black/40", "aria-hidden": "true", onClick: () => setFilterOpen(false) }), _jsxs("div", { className: "fixed inset-y-0 left-0 z-50 flex w-80 flex-col bg-white dark:bg-slate-900 shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-zinc-900 dark:text-zinc-100", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-zinc-500 hover:text-rose-500 dark:text-zinc-400 transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-zinc-500 hover:bg-zinc-100 dark:hover:bg-slate-800 transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] })] }), _jsx("div", { className: "flex-1 overflow-y-auto px-4 py-4 space-y-5", children: _jsxs("div", { className: "space-y-2", children: [_jsx("p", { className: "text-xs font-semibold uppercase tracking-widest text-zinc-500 dark:text-zinc-400", children: "Status" }), _jsx("div", { className: "flex flex-wrap gap-2", children: STATUS_OPTIONS.map((opt) => (_jsx("button", { type: "button", onClick: () => setPendingFilters((p) => ({ ...p, status: opt === "All" ? "" : opt })), className: `rounded-full px-3 py-1 text-xs font-medium border transition-colors ${(pendingFilters.status || "All") === opt
+                                                    ? "bg-primary text-white border-primary"
+                                                    : "border-zinc-300 dark:border-slate-600 text-zinc-700 dark:text-zinc-300 hover:bg-zinc-50 dark:hover:bg-slate-800"}`, children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-zinc-200 dark:border-slate-700 px-4 py-3.5", children: _jsxs("button", { type: "button", onClick: applyFilters, className: "w-full rounded-lg bg-primary py-2.5 text-sm font-semibold text-white hover:bg-primary-600 transition-colors active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }));
 }

package/dist/features/seller/components/SellerOrdersView.d.ts

@@ -1,4 +1,5 @@
 import type { ListingViewShellProps } from "../../../ui";
 export interface SellerOrdersViewProps extends ListingViewShellProps {
+    orderDetailApiBase?: string;
 }
-export declare function SellerOrdersView({ children, ...props }: SellerOrdersViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerOrdersView({ orderDetailApiBase, children, ...props }: SellerOrdersViewProps): import("react/jsx-runtime").JSX.Element;