@mohasinac/appkit 2.3.1 → 2.4.0

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

@@ -0,0 +1,179 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from "react";
+import { useRouter } from "next/navigation";
+import { FormShell, StepForm, useFormShell } from "../../shell";
+import { Alert, FormField, FormGroup, Heading, Stack, Text, Toggle, } from "../../../ui";
+import { ImageUpload, MediaUploadList, useMediaUpload } from "../../media";
+import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
+const CONDITION_OPTIONS = [
+    { value: "new", label: "New" },
+    { value: "like_new", label: "Like New" },
+    { value: "good", label: "Good" },
+    { value: "fair", label: "Fair" },
+    { value: "used", label: "Used" },
+    { value: "refurbished", label: "Refurbished" },
+];
+const PRODUCTION_STATUS_OPTIONS = [
+    { value: "upcoming", label: "Upcoming — not yet in production" },
+    { value: "in_production", label: "In Production" },
+    { value: "ready_to_ship", label: "Ready to Ship" },
+];
+function toRupees(paise) {
+    return paise != null ? String(Math.round(paise / 100)) : "";
+}
+function toPaise(rupeeStr) {
+    return Math.round((parseFloat(rupeeStr) || 0) * 100);
+}
+// ── Step 1: Basic ─────────────────────────────────────────────────────────────
+function StepBasic({ values, onChange, renderCategorySelector, renderBrandSelector, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "title", label: "Title", type: "text", value: values.title ?? "", onChange: (v) => onChange({ title: v }), placeholder: "e.g. Charizard Base Set PSA 9" }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: values.description ?? "", onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), _jsxs(FormGroup, { columns: 2, children: [renderCategorySelector ? (_jsxs("div", { children: [_jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)] mb-1", children: "Category" }), renderCategorySelector({ value: values.category ?? "", onChange: (v) => onChange({ category: v }) })] })) : (_jsx(FormField, { name: "category", label: "Category", type: "text", value: values.category ?? "", onChange: (v) => onChange({ category: v }), placeholder: "e.g. Trading Cards" })), _jsx(FormField, { name: "condition", label: "Condition", type: "select", value: values.condition ?? "new", onChange: (v) => onChange({ condition: v }), options: CONDITION_OPTIONS })] }), renderBrandSelector ? (_jsxs("div", { children: [_jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)] mb-1", children: "Brand" }), renderBrandSelector({ value: values.brand ?? "", onChange: (v) => onChange({ brand: v }) })] })) : (_jsx(FormField, { name: "brand", label: "Brand", type: "text", value: values.brand ?? "", onChange: (v) => onChange({ brand: v }), placeholder: "e.g. Pok\u00E9mon Company" })), _jsx(FormField, { name: "tags", label: "Tags (comma-separated)", type: "text", value: (values.tags ?? []).join(", "), onChange: (v) => onChange({ tags: v.split(",").map((t) => t.trim()).filter(Boolean) }), placeholder: "pokemon, psa9, charizard, holo" })] }));
+}
+// ── Step 2: Media ─────────────────────────────────────────────────────────────
+function StepMedia({ values, onChange, storeSlug = "store", }) {
+    const { upload } = useMediaUpload();
+    const idxRef = useRef(0);
+    const galleryFields = (values.images ?? []).map((url) => ({
+        url,
+        type: "image",
+    }));
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(ImageUpload, { currentImage: values.mainImage, onUpload: (file) => upload(file, "products", true, {
+                    type: "product-image",
+                    index: 1,
+                    name: values.title ?? "product",
+                    store: storeSlug,
+                    category: values.category ?? "uncategorized",
+                }), onChange: (url) => onChange({ mainImage: url }), label: "Main Image", helperText: "Recommended: 800\u00D7800px square (JPG, PNG, WebP \u2014 max 10 MB)" }), _jsx(MediaUploadList, { label: "Gallery Images (up to 10)", value: galleryFields, onChange: (fields) => onChange({ images: fields.map((f) => f.url) }), onUpload: (file) => {
+                    idxRef.current += 1;
+                    return upload(file, "products", true, {
+                        type: "product-image",
+                        index: idxRef.current + 1,
+                        name: values.title ?? "product",
+                        store: storeSlug,
+                        category: values.category ?? "uncategorized",
+                    });
+                }, accept: "image/*", maxItems: 10, maxSizeMB: 10, helperText: "Show multiple angles, grading details, or box contents." }), _jsx(FormField, { name: "youtubeId", label: "YouTube Video ID (optional)", type: "text", value: values.youtubeId ?? "", onChange: (v) => onChange({ youtubeId: v }), placeholder: "e.g. dQw4w9WgXcQ", helpText: "Paste the 11-character ID from the YouTube URL" })] }));
+}
+// ── Step 3: Auction Settings ───────────────────────────────────────────────
+function StepAuctionSettings({ values, onChange, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "Prices are in Indian Rupees (\u20B9). Enter the rupee value \u2014 no paise." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "startingBid", label: "Starting Bid (\u20B9)", type: "number", value: toRupees(values.startingBid), onChange: (v) => onChange({ startingBid: toPaise(v) }), placeholder: "100" }), _jsx(FormField, { name: "auctionEndDate", label: "Auction End Date & Time", type: "datetime-local", value: values.auctionEndDate ?? "", onChange: (v) => onChange({ auctionEndDate: v }) })] }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "reservePrice", label: "Reserve Price (\u20B9, optional)", type: "number", value: toRupees(values.reservePrice), onChange: (v) => onChange({ reservePrice: v ? toPaise(v) : undefined }), placeholder: "0", helpText: "Minimum price below which you won't sell" }), _jsx(FormField, { name: "buyNowPrice", label: "Buy Now Price (\u20B9, optional)", type: "number", value: toRupees(values.buyNowPrice), onChange: (v) => onChange({ buyNowPrice: v ? toPaise(v) : undefined }), placeholder: "0", helpText: "Allows instant purchase before auction ends" })] }), _jsx(FormField, { name: "minBidIncrement", label: "Minimum Bid Increment (\u20B9)", type: "number", value: toRupees(values.minBidIncrement), onChange: (v) => onChange({ minBidIncrement: toPaise(v) }), placeholder: "50" }), _jsx(FormField, { name: "auctionShippingPaidBy", label: "Shipping paid by", type: "select", value: values.auctionShippingPaidBy ?? "winner", onChange: (v) => onChange({ auctionShippingPaidBy: v }), options: [
+                    { value: "winner", label: "Winner pays shipping" },
+                    { value: "seller", label: "Seller includes shipping" },
+                ] }), _jsx(Toggle, { checked: !!values.autoExtendable, onChange: (checked) => onChange({ autoExtendable: checked }), label: "Auto-extend auction if bid placed in final minutes" }), values.autoExtendable && (_jsx(FormField, { name: "auctionExtensionMinutes", label: "Extension period (minutes)", type: "number", value: String(values.auctionExtensionMinutes ?? 5), onChange: (v) => onChange({ auctionExtensionMinutes: Number(v) || 5 }), placeholder: "5" }))] }));
+}
+// ── Step 3: Pre-Order Settings ────────────────────────────────────────────
+function StepPreOrderSettings({ values, onChange, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "preOrderDeliveryDate", label: "Estimated Delivery Date (YYYY-MM-DD)", type: "text", value: values.preOrderDeliveryDate ?? "", onChange: (v) => onChange({ preOrderDeliveryDate: v }), placeholder: "e.g. 2026-12-15", helpText: "When you expect to ship to buyers" }), _jsx(FormField, { name: "preOrderMaxQuantity", label: "Maximum Pre-Order Quantity (optional)", type: "number", value: String(values.preOrderMaxQuantity ?? ""), onChange: (v) => onChange({ preOrderMaxQuantity: v ? Number(v) : undefined }), placeholder: "Unlimited" })] }), _jsx(FormField, { name: "preOrderDepositPercent", label: "Deposit % (0 = full payment now)", type: "number", value: String(values.preOrderDepositPercent ?? 0), onChange: (v) => onChange({ preOrderDepositPercent: Math.min(100, Math.max(0, Number(v))) }), placeholder: "0", helpText: "Buyers pay this percentage upfront; remainder due on shipping" }), _jsx(FormField, { name: "preOrderProductionStatus", label: "Production Status", type: "select", value: values.preOrderProductionStatus ?? "upcoming", onChange: (v) => onChange({ preOrderProductionStatus: v }), options: PRODUCTION_STATUS_OPTIONS }), _jsx(Toggle, { checked: values.preOrderCancellable !== false, onChange: (checked) => onChange({ preOrderCancellable: checked }), label: "Allow buyers to cancel before shipping" })] }));
+}
+// ── Step: Pricing ─────────────────────────────────────────────────────────
+function StepPricing({ values, onChange, listingType, }) {
+    const priceLabel = listingType === "auction"
+        ? "Suggested Retail Price (₹)"
+        : listingType === "pre-order"
+            ? "Pre-Order Price (₹)"
+            : "Price (₹)";
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(Alert, { variant: "info", children: "All prices in Indian Rupees (\u20B9)." }), _jsxs(FormGroup, { columns: 2, children: [_jsx(FormField, { name: "price", label: priceLabel, type: "number", value: toRupees(values.price), onChange: (v) => onChange({ price: toPaise(v) }), placeholder: "999" }), _jsx(FormField, { name: "compareAtPrice", label: "Compare-at Price (\u20B9, optional)", type: "number", value: toRupees(values.compareAtPrice), onChange: (v) => onChange({ compareAtPrice: v ? toPaise(v) : undefined }), placeholder: "1299", helpText: "Original price shown as strikethrough" })] }), listingType === "standard" && (_jsx(FormField, { name: "stockQuantity", label: "Stock Quantity", type: "number", value: String(values.stockQuantity ?? ""), onChange: (v) => onChange({ stockQuantity: Number(v) }), placeholder: "1" })), _jsxs(FormGroup, { columns: 2, children: [_jsx(Toggle, { checked: !!values.featured, onChange: (checked) => onChange({ featured: checked }), label: "Mark as Featured" }), _jsx(Toggle, { checked: !!values.isNew, onChange: (checked) => onChange({ isNew: checked }), label: "Mark as New Arrival" })] })] }));
+}
+// ── Step: Shipping ────────────────────────────────────────────────────────
+function StepShipping({ values, onChange, renderAddressSelector, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "shippingPaidBy", label: "Shipping Paid By", type: "select", value: values.shippingPaidBy ?? "buyer", onChange: (v) => onChange({ shippingPaidBy: v }), options: [
+                    { value: "buyer", label: "Buyer pays shipping" },
+                    { value: "seller", label: "Seller includes free shipping" },
+                ] }), renderAddressSelector ? (_jsxs("div", { children: [_jsx(Text, { className: "text-sm font-medium text-[var(--appkit-color-text)] mb-1", children: "Pickup Address (optional)" }), renderAddressSelector({
+                        value: values.pickupAddressId ?? "",
+                        onChange: (v) => onChange({ pickupAddressId: v }),
+                    })] })) : (_jsx(StoreAddressSelectorCreate, { label: "Pickup Address (optional)", value: values.pickupAddressId ?? "", onChange: (id) => onChange({ pickupAddressId: id }) })), _jsx(Toggle, { checked: !!values.insurance, onChange: (checked) => onChange({ insurance: checked, insuranceCost: checked ? values.insuranceCost ?? 0 : undefined }), label: "Offer shipping insurance" }), values.insurance && (_jsx(FormField, { name: "insuranceCost", label: "Insurance Cost (\u20B9)", type: "number", value: toRupees(values.insuranceCost), onChange: (v) => onChange({ insuranceCost: toPaise(v) }), placeholder: "0" }))] }));
+}
+// ── Step: Publish / SEO ───────────────────────────────────────────────────
+function StepPublish({ values, onChange, }) {
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "status", label: "Listing Status", type: "select", value: values.status ?? "draft", onChange: (v) => onChange({ status: v }), options: [
+                    { value: "draft", label: "Save as Draft — not visible to buyers" },
+                    { value: "published", label: "Publish Now — visible immediately" },
+                ] }), _jsx(Heading, { level: 4, className: "mt-2", children: "SEO (optional)" }), _jsx(FormField, { name: "seoTitle", label: "SEO Title", type: "text", value: values.seoTitle ?? "", onChange: (v) => onChange({ seoTitle: v }), placeholder: "Leave blank to use listing title", helpText: "Shown in browser tab and search results (max 60 chars)" }), _jsx(FormField, { name: "seoDescription", label: "SEO Description", type: "textarea", value: values.seoDescription ?? "", onChange: (v) => onChange({ seoDescription: v }), placeholder: "Leave blank to use listing description", helpText: "Shown in search result previews (max 160 chars)" }), _jsx(Toggle, { checked: !!values.isOnSale, onChange: (checked) => onChange({ isOnSale: checked }), label: "Show 'Sale' badge on listing card" })] }));
+}
+// ── Edit section nav ──────────────────────────────────────────────────────
+const EDIT_SECTIONS = [
+    { id: "basic", label: "Basic Info" },
+    { id: "media", label: "Media" },
+    { id: "pricing", label: "Pricing" },
+    { id: "shipping", label: "Shipping" },
+    { id: "publish", label: "Publish" },
+];
+// ── Main SellerProductShell ───────────────────────────────────────────────
+export function SellerProductShell({ mode, listingType = "standard", initialValues, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCategorySelector, renderBrandSelector, renderAddressSelector, }) {
+    const [draft, setDraft] = useState(initialValues ?? { status: "draft", condition: "new" });
+    const [currentStep, setCurrentStep] = useState(0);
+    const { isDirty, markDirty, markClean } = useFormShell();
+    const router = useRouter();
+    const update = useCallback((partial) => {
+        setDraft((prev) => ({ ...prev, ...partial }));
+        markDirty();
+    }, [markDirty]);
+    const handleDiscard = useCallback(() => {
+        if (onDiscard)
+            onDiscard();
+        else
+            router.back();
+    }, [onDiscard, router]);
+    const handleSave = useCallback(async () => {
+        await onSave(draft);
+        markClean();
+    }, [draft, onSave, markClean]);
+    const handlePublish = useCallback(async () => {
+        await onPublish({ ...draft, status: "published" });
+        markClean();
+    }, [draft, onPublish, markClean]);
+    const listingTypeLabel = listingType === "auction" ? "Auction" : listingType === "pre-order" ? "Pre-Order" : "Product";
+    const typeSpecificStep = listingType === "auction"
+        ? {
+            label: "Auction Settings",
+            render: ({ values, onChange }) => (_jsx(StepAuctionSettings, { values: values, onChange: onChange })),
+            validate: (v) => (!v.startingBid ? "Starting bid is required" : !v.auctionEndDate ? "Auction end date is required" : null),
+        }
+        : listingType === "pre-order"
+            ? {
+                label: "Pre-Order",
+                render: ({ values, onChange }) => (_jsx(StepPreOrderSettings, { values: values, onChange: onChange })),
+                validate: (v) => (!v.preOrderDeliveryDate ? "Estimated delivery date is required" : null),
+            }
+            : null;
+    const steps = [
+        {
+            label: "Basic",
+            render: ({ values, onChange }) => (_jsx(StepBasic, { values: values, onChange: onChange, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector })),
+            validate: (v) => (!v.title?.trim() ? "Title is required" : null),
+        },
+        {
+            label: "Media",
+            render: ({ values, onChange }) => (_jsx(StepMedia, { values: values, onChange: onChange, storeSlug: storeSlug })),
+        },
+        ...(typeSpecificStep ? [typeSpecificStep] : []),
+        {
+            label: "Pricing",
+            render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
+            validate: (v) => (!v.price ? "Price is required" : null),
+        },
+        {
+            label: "Shipping",
+            render: ({ values, onChange }) => (_jsx(StepShipping, { values: values, onChange: onChange, renderAddressSelector: renderAddressSelector })),
+        },
+        {
+            label: "Publish",
+            render: ({ values, onChange }) => (_jsx(StepPublish, { values: values, onChange: onChange })),
+        },
+    ];
+    const breadcrumb = mode === "create" ? `Store / ${listingTypeLabel}s / New` : `Store / ${listingTypeLabel}s / Edit`;
+    const title = mode === "create"
+        ? `New ${listingTypeLabel}`
+        : draft.title ?? `Edit ${listingTypeLabel}`;
+    if (mode === "create") {
+        return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, children: _jsx(StepForm, { steps: steps, values: draft, onChange: update, onComplete: handlePublish, completeLabel: `Publish ${listingTypeLabel}`, currentStep: currentStep, onStepChange: setCurrentStep, isLoading: isLoading }) }));
+    }
+    // Edit mode — FormShell with section nav + full form
+    const editSections = [
+        ...EDIT_SECTIONS,
+        ...(listingType === "auction" ? [{ id: "auction", label: "Auction" }] : []),
+        ...(listingType === "pre-order" ? [{ id: "preorder", label: "Pre-Order" }] : []),
+    ];
+    return (_jsx(FormShell, { isOpen: true, onClose: handleDiscard, title: title, breadcrumb: breadcrumb, isDirty: isDirty, isLoading: isLoading, sections: editSections, onSaveDraft: handleSave, onPublish: handlePublish, saveLabel: "Save Changes", publishLabel: "Update", children: _jsxs(Stack, { gap: "lg", children: [_jsxs("section", { id: "basic", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Basic Info" }), _jsx(StepBasic, { values: draft, onChange: update, renderCategorySelector: renderCategorySelector, renderBrandSelector: renderBrandSelector })] }), _jsxs("section", { id: "media", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Media" }), _jsx(StepMedia, { values: draft, onChange: update, storeSlug: storeSlug })] }), listingType === "auction" && (_jsxs("section", { id: "auction", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Auction Settings" }), _jsx(StepAuctionSettings, { values: draft, onChange: update })] })), listingType === "pre-order" && (_jsxs("section", { id: "preorder", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pre-Order Settings" }), _jsx(StepPreOrderSettings, { values: draft, onChange: update })] })), _jsxs("section", { id: "pricing", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Pricing" }), _jsx(StepPricing, { values: draft, onChange: update, listingType: listingType })] }), _jsxs("section", { id: "shipping", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Shipping" }), _jsx(StepShipping, { values: draft, onChange: update, renderAddressSelector: renderAddressSelector })] }), _jsxs("section", { id: "publish", children: [_jsx(Heading, { level: 3, className: "mb-4", children: "Publish" }), _jsx(StepPublish, { values: draft, onChange: update })] })] }) }));
+}

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

@@ -1,6 +1,5 @@
-import React from "react";
 import type { ListingViewShellProps } from "../../../ui";
 export interface SellerProductsViewProps extends ListingViewShellProps {
-    renderHeader?: (onAdd: () => void) => React.ReactNode;
+    onDeleteProduct?: (id: string) => Promise<void>;
 }
-export declare function SellerProductsView({ renderHeader, children, ...props }: SellerProductsViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerProductsView({ onDeleteProduct, children, ...props }: SellerProductsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,29 +1,205 @@
 "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 { useRouter } from "next/navigation";
+import { X, Pencil, Trash2 } from "lucide-react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { Alert, ListingToolbar, Pagination, ListingViewShell, Badge, Button } from "../../../ui";
 import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { ROUTES } from "../../../constants";
 import { toRecordArray, toRelativeDate, toStringValue, useSellerListingData, } from "../hooks/useSellerListingData";
-import { AdminListingScaffold } from "../../admin/components/AdminListingScaffold";
-export function SellerProductsView({ renderHeader, children, ...props }) {
+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" },
+    { value: "title", label: "Title A–Z" },
+    { value: "-title", label: "Title Z–A" },
+    { value: "-price", label: "Price High" },
+    { value: "price", label: "Price Low" },
+];
+const STATUS_OPTIONS = ["All", "active", "draft", "archived", "sold"];
+function TypeChips({ active, onChange, }) {
+    const chips = [
+        { kind: "all", label: "All" },
+        { kind: "standard", label: "Standard" },
+        { kind: "auction", label: "Auction" },
+        { kind: "pre-order", label: "Pre-order" },
+    ];
+    return (_jsx("div", { className: "flex items-center gap-2 px-3 sm:px-4 py-2 overflow-x-auto border-b border-[var(--appkit-color-border)]", children: chips.map(({ kind, label }) => (_jsx("button", { type: "button", onClick: () => onChange(kind), className: [
+                "flex-shrink-0 rounded-full px-3 py-1 text-xs font-medium border transition-colors",
+                active === kind
+                    ? "bg-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]"
+                    : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:border-[var(--appkit-color-primary)] hover:text-[var(--appkit-color-primary)]",
+            ].join(" "), children: label }, kind))) }));
+}
+const KIND_BADGE_VARIANT = {
+    auction: "warning",
+    "pre-order": "secondary",
+    standard: "default",
+};
+const PRODUCT_COLUMNS = [
+    {
+        key: "thumbnail",
+        header: "",
+        className: "w-12",
+        render: (row) => row.imageUrl ? (_jsx("img", { src: row.imageUrl, alt: "", className: "w-10 h-10 rounded-lg object-cover border border-[var(--appkit-color-border)]" })) : (_jsx("div", { className: "w-10 h-10 rounded-lg bg-[var(--appkit-color-surface-raised)] border border-[var(--appkit-color-border)] flex items-center justify-center", children: _jsx("span", { className: "text-xs text-[var(--appkit-color-text-faint)]", children: "\u2013" }) })),
+    },
+    {
+        key: "primary",
+        header: "Product",
+        render: (row) => (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "font-medium text-[var(--appkit-color-text)] line-clamp-1", children: row.primary }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Badge, { variant: KIND_BADGE_VARIANT[row.listingKind] ?? "default", children: row.listingKind }), _jsx("span", { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.secondary })] })] })),
+    },
+    {
+        key: "price",
+        header: "Price",
+        className: "w-28 text-right",
+        render: (row) => (_jsx("span", { className: "text-sm font-medium text-[var(--appkit-color-text)]", children: row.price })),
+    },
+    {
+        key: "status",
+        header: "Status",
+        className: "w-28",
+        render: (row) => {
+            const variant = row.status === "active"
+                ? "success"
+                : row.status === "draft"
+                    ? "default"
+                    : row.status === "sold"
+                        ? "secondary"
+                        : "danger";
+            return (_jsx(Badge, { variant: variant, children: row.status }));
+        },
+    },
+    {
+        key: "updatedAt",
+        header: "Updated",
+        className: "w-28",
+        render: (row) => (_jsx("span", { className: "text-xs text-[var(--appkit-color-text-muted)]", children: row.updatedAt })),
+    },
+];
+export function SellerProductsView({ onDeleteProduct, children, ...props }) {
     const hasChildren = React.Children.count(children) > 0;
+    const router = useRouter();
+    const table = useUrlTable({ defaults: { pageSize: String(PAGE_SIZE), sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const [listingKind, setListingKind] = useState("all");
+    const [deletingId, setDeletingId] = useState(null);
+    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("");
+        setListingKind("all");
+    }, [table]);
+    const commitSearch = useCallback(() => {
+        table.set("q", searchInput.trim());
+    }, [searchInput, table]);
+    const handleKindChange = useCallback((kind) => {
+        setListingKind(kind);
+        table.set("page", "1");
+    }, [table]);
+    const activeFilterCount = FILTER_KEYS.filter((k) => !!table.get(k)).length;
+    const hasActiveState = !!table.get("q") ||
+        table.get("sort") !== DEFAULT_SORT ||
+        activeFilterCount > 0 ||
+        listingKind !== "all";
+    const statusRaw = table.get("status");
+    const statusFilter = statusRaw && statusRaw !== "All" ? `status==${statusRaw}` : undefined;
+    const kindFilter = listingKind === "auction"
+        ? "isAuction==true"
+        : listingKind === "pre-order"
+            ? "isPreOrder==true"
+            : listingKind === "standard"
+                ? "isAuction==false,isPreOrder==false"
+                : undefined;
+    const filters = [statusFilter, kindFilter].filter(Boolean).join(",") || undefined;
     const { rows, total, isLoading, errorMessage } = useSellerListingData({
-        queryKey: ["seller", "products", "listing"],
+        queryKey: ["seller", "products", "listing", listingKind],
         endpoint: SELLER_ENDPOINTS.PRODUCTS,
-        mapRows: (response) => toRecordArray(response.products).map((item, index) => ({
-            id: toStringValue(item.id, `product-${index}`),
-            primary: toStringValue(item.title ?? item.name, "Untitled product"),
-            secondary: [
-                toStringValue(item.sku, "No SKU"),
-                toStringValue(item.condition ?? "Unknown condition", "Unknown condition"),
-            ].join(" · "),
-            status: toStringValue(item.status, "Unknown"),
-            updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
-        })),
+        page: table.getNumber("page", 1),
+        pageSize: PAGE_SIZE,
+        sorts: table.get("sort") || DEFAULT_SORT,
+        filters,
+        q: table.get("q") || undefined,
+        mapRows: (response) => toRecordArray(response.products).map((item, index) => {
+            const isAuction = !!item.isAuction;
+            const isPreOrder = !!item.isPreOrder;
+            const kind = isAuction ? "auction" : isPreOrder ? "pre-order" : "standard";
+            const priceRaw = typeof item.price === "number" ? item.price : 0;
+            return {
+                id: toStringValue(item.id, `product-${index}`),
+                primary: toStringValue(item.title ?? item.name, "Untitled product"),
+                secondary: toStringValue(item.condition, ""),
+                status: toStringValue(item.status, "draft"),
+                updatedAt: toRelativeDate(item.updatedAt ?? item.createdAt),
+                imageUrl: toStringValue(item.mainImage ?? item.images?.[0], undefined),
+                listingKind: kind,
+                price: priceRaw ? `₹${(priceRaw / 100).toLocaleString("en-IN")}` : "—",
+            };
+        }),
         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(ListingViewShell, { portal: "seller", ...props, children: children }));
     }
-    return (_jsx(AdminListingScaffold, { portal: "seller", ...props, title: "My Products", subtitle: "Manage your product listings, inventory, and pricing", actionLabel: "New Listing", searchPlaceholder: "Search products by name or SKU", rows: rows, isLoading: isLoading, errorMessage: errorMessage, emptyLabel: "No products listed", resultSummary: `Showing ${rows.length} of ${total} products` }));
+    const handleEdit = (row) => {
+        if (row.listingKind === "auction") {
+            router.push(String(ROUTES.STORE.AUCTIONS_EDIT(row.id)));
+        }
+        else if (row.listingKind === "pre-order") {
+            router.push(String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id)));
+        }
+        else {
+            router.push(String(ROUTES.STORE.PRODUCTS_EDIT(row.id)));
+        }
+    };
+    const handleDelete = async (row) => {
+        if (!onDeleteProduct)
+            return;
+        if (!confirm(`Delete "${row.primary}"? This cannot be undone.`))
+            return;
+        setDeletingId(row.id);
+        try {
+            await onDeleteProduct(row.id);
+        }
+        finally {
+            setDeletingId(null);
+        }
+    };
+    return (_jsx(_Fragment, { children: _jsxs("div", { className: "min-h-screen", children: [_jsx(ListingToolbar, { filterCount: activeFilterCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search products by name\u2026", 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 }), _jsx(TypeChips, { active: listingKind, onChange: handleKindChange }), totalPages > 1 && (_jsx("div", { className: "sticky z-10 flex justify-center bg-[var(--appkit-color-surface)]/95 backdrop-blur-sm border-b border-[var(--appkit-color-border)] px-3 py-1.5", style: { top: "calc(var(--header-height, 0px) + 44px)" }, 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(Alert, { variant: "error", className: "mb-4", children: errorMessage })), _jsx(DataTable, { columns: PRODUCT_COLUMNS, rows: rows, isLoading: isLoading, emptyLabel: listingKind !== "all"
+                                ? `No ${listingKind} listings found`
+                                : "No products listed yet", getRowHref: (row) => row.listingKind === "auction"
+                                ? String(ROUTES.STORE.AUCTIONS_EDIT(row.id))
+                                : row.listingKind === "pre-order"
+                                    ? String(ROUTES.STORE.PRE_ORDERS_EDIT(row.id))
+                                    : String(ROUTES.STORE.PRODUCTS_EDIT(row.id)), renderRowActions: onDeleteProduct
+                                ? (row) => (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); handleEdit(row); }, "aria-label": "Edit", children: _jsx(Pencil, { className: "w-4 h-4" }) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: (e) => { e.stopPropagation(); void handleDelete(row); }, disabled: deletingId === row.id, "aria-label": "Delete", className: "text-[var(--appkit-color-error)] hover:bg-[var(--appkit-color-border-subtle)]", children: _jsx(Trash2, { className: "w-4 h-4" }) })] }))
+                                : undefined })] }), 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-[var(--appkit-color-surface)] shadow-2xl", children: [_jsxs("div", { className: "flex items-center justify-between border-b border-[var(--appkit-color-border)] px-4 py-3.5", children: [_jsx("span", { className: "text-base font-semibold text-[var(--appkit-color-text)]", children: "Filters" }), _jsxs("div", { className: "flex items-center gap-2", children: [activeFilterCount > 0 && (_jsx("button", { type: "button", onClick: clearFilters, className: "text-xs text-[var(--appkit-color-text-muted)] hover:text-[var(--appkit-color-error)] transition-colors", children: "Clear all" })), _jsx("button", { type: "button", onClick: () => setFilterOpen(false), "aria-label": "Close", className: "rounded-lg p-1.5 text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)] 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-[var(--appkit-color-text-muted)]", 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-[var(--appkit-color-primary)] text-white border-[var(--appkit-color-primary)]"
+                                                            : "border-[var(--appkit-color-border)] text-[var(--appkit-color-text-muted)] hover:bg-[var(--appkit-color-border-subtle)]",
+                                                    ].join(" "), children: opt }, opt))) })] }) }), _jsx("div", { className: "border-t border-[var(--appkit-color-border)] 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 hover:opacity-90 transition-opacity active:scale-[0.98]", children: ["Apply Filters", activeFilterCount > 0 ? ` (${activeFilterCount})` : ""] }) })] })] }))] }) }));
 }

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

@@ -0,0 +1,5 @@
+export interface SellerReviewsViewProps {
+    reviewsApiBase?: string;
+    replyApiBase?: string;
+}
+export declare function SellerReviewsView({ reviewsApiBase, replyApiBase, }: SellerReviewsViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,100 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Alert, Badge, Button, Div, Select, SideDrawer, Stack, Text, } from "../../../ui";
+import { StackedViewShell } from "../../../ui";
+const STAR = "★";
+const EMPTY_STAR = "☆";
+function Stars({ rating }) {
+    return (_jsx("span", { className: "text-[var(--appkit-color-warning,#f59e0b)] text-sm", children: Array.from({ length: 5 }, (_, i) => (i < rating ? STAR : EMPTY_STAR)).join("") }));
+}
+function statusBadge(status) {
+    const map = {
+        approved: "success",
+        pending: "warning",
+        rejected: "danger",
+    };
+    return _jsx(Badge, { variant: map[status] ?? "default", children: status });
+}
+export function SellerReviewsView({ reviewsApiBase = "/api/store/reviews", replyApiBase = "/api/store/reviews", }) {
+    const [reviews, setReviews] = useState([]);
+    const [meta, setMeta] = useState(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // Filters
+    const [rating, setRating] = useState("");
+    const [replied, setReplied] = useState("");
+    const [page, setPage] = useState(1);
+    // Reply drawer
+    const [replyTarget, setReplyTarget] = useState(null);
+    const [replyText, setReplyText] = useState("");
+    const [replySaving, setReplySaving] = useState(false);
+    const [replyError, setReplyError] = useState(null);
+    const fetchReviews = useCallback(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const params = new URLSearchParams({ page: String(page), pageSize: "20" });
+            if (rating)
+                params.set("rating", rating);
+            if (replied)
+                params.set("replied", replied);
+            const res = await fetch(`${reviewsApiBase}?${params}`);
+            const json = await res.json();
+            if (!res.ok)
+                throw new Error(json?.error ?? "Failed to load reviews");
+            setReviews(json?.data?.reviews ?? []);
+            setMeta(json?.data?.meta ?? null);
+        }
+        catch (err) {
+            setError(err.message);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [reviewsApiBase, rating, replied, page]);
+    useEffect(() => { fetchReviews(); }, [fetchReviews]);
+    const openReply = (review) => {
+        setReplyTarget(review);
+        setReplyText(review.sellerReply ?? "");
+        setReplyError(null);
+    };
+    const handleReplySave = async () => {
+        if (!replyTarget)
+            return;
+        setReplySaving(true);
+        setReplyError(null);
+        try {
+            const res = await fetch(`${replyApiBase}/${replyTarget.id}/reply`, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify({ reply: replyText }),
+            });
+            const json = await res.json();
+            if (!res.ok)
+                throw new Error(json?.error ?? "Failed to save reply");
+            setReplyTarget(null);
+            fetchReviews();
+        }
+        catch (err) {
+            setReplyError(err.message);
+        }
+        finally {
+            setReplySaving(false);
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsx(StackedViewShell, { portal: "seller", title: "Reviews", sections: [
+                    _jsxs(Stack, { gap: "lg", children: [_jsxs(Div, { className: "flex flex-wrap items-center gap-3", children: [_jsx(Select, { value: rating, onChange: (e) => { setRating(e.target.value); setPage(1); }, "aria-label": "Filter by rating", options: [
+                                            { value: "", label: "All ratings" },
+                                            { value: "5", label: "5 stars" },
+                                            { value: "4", label: "4 stars" },
+                                            { value: "3", label: "3 stars" },
+                                            { value: "2", label: "2 stars" },
+                                            { value: "1", label: "1 star" },
+                                        ] }), _jsx(Select, { value: replied, onChange: (e) => { setReplied(e.target.value); setPage(1); }, "aria-label": "Filter by reply status", options: [
+                                            { value: "", label: "All reply statuses" },
+                                            { value: "true", label: "Store replied" },
+                                            { value: "false", label: "Awaiting reply" },
+                                        ] }), meta && (_jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)] ml-auto", children: [meta.total, " review", meta.total !== 1 ? "s" : ""] }))] }), error && _jsx(Alert, { variant: "error", children: error }), loading ? (_jsx(Div, { className: "py-8 text-center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "Loading reviews\u2026" }) })) : reviews.length === 0 ? (_jsx(Div, { className: "py-12 text-center", children: _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", children: "No reviews found." }) })) : (_jsx(Stack, { gap: "md", children: reviews.map((review) => (_jsx(Div, { className: "p-4 rounded-lg border border-[var(--appkit-color-border)] bg-[var(--appkit-color-surface)]", children: _jsxs(Div, { className: "flex items-start justify-between gap-3 flex-wrap", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsx(Text, { className: "font-medium truncate", children: review.productTitle }), _jsxs(Div, { className: "flex items-center gap-2 mt-1 flex-wrap", children: [_jsx(Stars, { rating: review.rating }), _jsxs(Text, { className: "text-sm text-[var(--appkit-color-text-muted)]", children: ["by ", review.userName] }), review.verified && _jsx(Badge, { variant: "success", children: "Verified" }), statusBadge(review.status), _jsx(Badge, { variant: review.sellerReply ? "success" : "warning", children: review.sellerReply ? "Store replied" : "Awaiting store reply" })] }), review.title && _jsx(Text, { className: "mt-2 font-medium", children: review.title }), _jsx(Text, { className: "mt-1 text-sm text-[var(--appkit-color-text-secondary)] line-clamp-3", children: review.comment }), review.sellerReply && (_jsxs(Div, { className: "mt-2 pl-3 border-l-2 border-[var(--appkit-color-primary)]", children: [_jsx(Text, { className: "text-xs text-[var(--appkit-color-text-muted)]", children: "Store reply:" }), _jsx(Text, { className: "text-sm", children: review.sellerReply })] }))] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => openReply(review), children: review.sellerReply ? "Edit Reply" : "Reply" })] }) }, review.id))) })), meta && meta.totalPages > 1 && (_jsxs(Div, { className: "flex items-center justify-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1 || loading, children: "Previous" }), _jsxs(Text, { className: "text-sm", children: ["Page ", meta.page, " of ", meta.totalPages] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => setPage((p) => p + 1), disabled: !meta.hasMore || loading, children: "Next" })] }))] }, "reviews"),
+                ] }), _jsx(SideDrawer, { isOpen: !!replyTarget, onClose: () => setReplyTarget(null), title: replyTarget?.sellerReply ? "Edit Reply" : "Reply to Review", mode: "create", children: _jsxs(Stack, { gap: "md", className: "p-4", children: [replyTarget && (_jsxs(Div, { className: "p-3 rounded bg-[var(--appkit-color-surface-muted)]", children: [_jsx(Stars, { rating: replyTarget.rating }), _jsx(Text, { className: "text-sm mt-1", children: replyTarget.comment })] })), replyError && _jsx(Alert, { variant: "error", children: replyError }), _jsxs(Div, { children: [_jsx(Text, { className: "text-sm font-medium mb-1.5", children: "Store reply" }), _jsx("textarea", { className: "w-full rounded-md border border-[var(--appkit-color-border)] bg-[var(--appkit-color-input-bg,var(--appkit-color-surface))] p-2.5 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-[var(--appkit-color-primary)] dark:bg-[var(--appkit-color-surface-dark,#1e2330)] dark:border-[var(--appkit-color-border-dark)]", rows: 5, value: replyText, onChange: (e) => setReplyText(e.target.value), maxLength: 1000, placeholder: "Write your response to this review\u2026" }), _jsxs(Text, { className: "text-xs text-[var(--appkit-color-text-muted)] text-right mt-1", children: [replyText.length, "/1000"] })] }), _jsxs(Div, { className: "flex gap-2 justify-end", children: [_jsx(Button, { variant: "outline", onClick: () => setReplyTarget(null), disabled: replySaving, children: "Cancel" }), _jsx(Button, { variant: "primary", onClick: handleReplySave, disabled: replySaving || !replyText.trim(), isLoading: replySaving, children: replyTarget?.sellerReply ? "Update Reply" : "Post Reply" })] })] }) })] }));
+}

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

@@ -1,12 +1,4 @@
-import React from "react";
-import type { StackedViewShellProps } from "../../../ui";
-export interface SellerShippingViewProps extends Omit<StackedViewShellProps, "sections"> {
-    labels?: {
-        title?: string;
-        saveButton?: string;
-    };
-    renderZones?: (isLoading: boolean) => React.ReactNode;
-    renderForm?: () => React.ReactNode;
-    isLoading?: boolean;
+export interface SellerShippingViewProps {
+    apiBase?: string;
 }
-export declare function SellerShippingView({ labels, renderZones, renderForm, isLoading, ...rest }: SellerShippingViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function SellerShippingView({ apiBase }: SellerShippingViewProps): import("react/jsx-runtime").JSX.Element;