@mohasinac/appkit 3.0.4 → 3.0.6

package/dist/features/search/schemas/index.d.ts

@@ -21,9 +21,9 @@ export declare const searchProductItemSchema: z.ZodObject<{
     isPromoted: z.ZodOptional<z.ZodBoolean>;
     slug: z.ZodString;
 }, "strip", z.ZodTypeAny, {
-    id: string;
     title: string;
     slug: string;
+    id: string;
     status?: string | undefined;
     currency?: string | undefined;
     featured?: boolean | undefined;
@@ -32,9 +32,9 @@ export declare const searchProductItemSchema: z.ZodObject<{
     price?: number | undefined;
     mainImage?: string | undefined;
 }, {
-    id: string;
     title: string;
     slug: string;
+    id: string;
     status?: string | undefined;
     currency?: string | undefined;
     featured?: boolean | undefined;

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

@@ -0,0 +1,17 @@
+export interface BarcodeFieldProps {
+    label?: string;
+    value: string;
+    onChange: (value: string) => void;
+    /** Called when the scanner fires Enter after rapid character input (< 50 ms between keys). */
+    onScan?: (value: string) => void;
+    placeholder?: string;
+    helperText?: string;
+    autoFocus?: boolean;
+    readOnly?: boolean;
+}
+/**
+ * Text field that detects USB/Bluetooth barcode scanner input.
+ * Scanners type characters rapidly (< 50 ms per keydown) then send Enter.
+ * onScan is called when Enter follows rapid input; manual typing is ignored.
+ */
+export declare function BarcodeField({ label, value, onChange, onScan, placeholder, helperText, autoFocus, readOnly, }: BarcodeFieldProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,30 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback } from "react";
+import { FieldInput } from "../../../ui/forms/FieldInput";
+import { Text } from "../../../ui/components/Typography";
+import { Stack } from "../../../ui/components/Layout";
+/**
+ * Text field that detects USB/Bluetooth barcode scanner input.
+ * Scanners type characters rapidly (< 50 ms per keydown) then send Enter.
+ * onScan is called when Enter follows rapid input; manual typing is ignored.
+ */
+export function BarcodeField({ label = "Barcode / Sticker ID", value, onChange, onScan, placeholder = "Scan or type barcode…", helperText, autoFocus, readOnly, }) {
+    const lastKeyTime = useRef(0);
+    const buffer = useRef("");
+    const handleKeyDown = useCallback((e) => {
+        const now = Date.now();
+        if (e.key === "Enter") {
+            e.preventDefault();
+            if (buffer.current) {
+                onScan?.(buffer.current);
+                buffer.current = "";
+            }
+            return;
+        }
+        const interval = now - lastKeyTime.current;
+        buffer.current = interval < 50 ? buffer.current + e.key : e.key;
+        lastKeyTime.current = now;
+    }, [onScan]);
+    return (_jsxs(Stack, { gap: "xs", children: [_jsx(FieldInput, { name: "barcodeId", label: label, type: "text", value: value, onChange: onChange, onKeyDown: handleKeyDown, placeholder: placeholder, autoFocus: autoFocus, readOnly: readOnly }), helperText && (_jsx(Text, { size: "xs", color: "muted", children: helperText }))] }));
+}

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

@@ -0,0 +1,5 @@
+export interface FulfillmentViewProps {
+    currentUserId?: string;
+    currentUserName?: string;
+}
+export declare function FulfillmentView({ currentUserId, }: FulfillmentViewProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,120 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
+import { Heading, Text } from "../../../ui/components/Typography";
+import { Stack, Row } from "../../../ui/components/Layout";
+import { Button } from "../../../ui/components/Button";
+import { Badge } from "../../../ui/components/Badge";
+import { apiClient } from "../../../http";
+import { SELLER_ENDPOINTS } from "../../../constants/api-endpoints";
+import { BarcodeField } from "./BarcodeField";
+import { normalizeError } from "../../../errors/normalize";
+import { useToast } from "../../../ui";
+function statusBadgeVariant(status) {
+    if (status === "confirmed")
+        return "warning";
+    if (status === "processing")
+        return "info";
+    if (status === "shipped")
+        return "success";
+    return "default";
+}
+export function FulfillmentView({ currentUserId, }) {
+    const [mode, setMode] = useState("scan");
+    const [orders, setOrders] = useState([]);
+    const [scanValue, setScanValue] = useState("");
+    const [scanResult, setScanResult] = useState(null);
+    const [scanError, setScanError] = useState(null);
+    const [filterMine, setFilterMine] = useState(false);
+    const [isLoadingOrders, setIsLoadingOrders] = useState(true);
+    const [isConfirming, setIsConfirming] = useState(false);
+    const [actionLoadingId, setActionLoadingId] = useState(null);
+    const { showToast } = useToast();
+    const fetchOrders = useCallback(async () => {
+        // toast-intentionally-silent: background data loader — stale list is kept on error
+        setIsLoadingOrders(true);
+        try {
+            const res = await apiClient.get(SELLER_ENDPOINTS.ORDERS_FULFILLMENT);
+            setOrders(res.orders ?? []);
+        }
+        catch {
+            // keep stale list on error
+        }
+        finally {
+            setIsLoadingOrders(false);
+        }
+    }, []);
+    useEffect(() => {
+        void fetchOrders();
+    }, [fetchOrders]);
+    const handleScan = useCallback(async (barcode) => {
+        setScanError(null);
+        setScanResult(null);
+        try {
+            const product = await apiClient.get(SELLER_ENDPOINTS.PRODUCTS_SCAN(barcode));
+            const matchedOrder = orders.find((o) => o.productId === product.id ||
+                o.items?.some((i) => i.productId === product.id));
+            if (!matchedOrder) {
+                setScanError(`No pending order found for barcode "${barcode}".`);
+                return;
+            }
+            setScanResult({ product, order: matchedOrder });
+        }
+        catch (err) {
+            setScanError(normalizeError(err).message);
+        }
+    }, [orders]);
+    const confirmPick = useCallback(async () => {
+        if (!scanResult)
+            return;
+        setIsConfirming(true);
+        try {
+            await apiClient.patch(SELLER_ENDPOINTS.ORDERS_BY_ID(scanResult.order.id), { markPicked: true });
+            setScanResult(null);
+            setScanValue("");
+            setScanError(null);
+            showToast("Order marked as picked!", "success");
+            await fetchOrders();
+        }
+        catch (err) {
+            setScanError(normalizeError(err).message);
+        }
+        finally {
+            setIsConfirming(false);
+        }
+    }, [scanResult, fetchOrders, showToast]);
+    const handleMarkPicked = useCallback(async (orderId) => {
+        setActionLoadingId(orderId + ":picked");
+        try {
+            await apiClient.patch(SELLER_ENDPOINTS.ORDERS_BY_ID(orderId), {
+                markPicked: true,
+            });
+            await fetchOrders();
+        }
+        finally {
+            setActionLoadingId(null);
+        }
+    }, [fetchOrders]);
+    const handleMarkPacked = useCallback(async (orderId) => {
+        setActionLoadingId(orderId + ":packed");
+        try {
+            await apiClient.patch(SELLER_ENDPOINTS.ORDERS_BY_ID(orderId), {
+                markPacked: true,
+            });
+            await fetchOrders();
+        }
+        finally {
+            setActionLoadingId(null);
+        }
+    }, [fetchOrders]);
+    const visibleOrders = filterMine
+        ? orders.filter((o) => o.assignedWorkerId === currentUserId)
+        : orders;
+    return (_jsxs(Stack, { gap: "md", padding: "md", children: [_jsxs(Row, { align: "center", justify: "between", gap: "sm", wrap: true, children: [_jsx(Heading, { level: 3, children: "Pick & Pack" }), _jsxs(Row, { gap: "xs", children: [_jsx(Button, { onClick: () => setMode("scan"), variant: mode === "scan" ? "primary" : "secondary", size: "sm", children: "Scan Mode" }), _jsx(Button, { onClick: () => setMode("list"), variant: mode === "list" ? "primary" : "secondary", size: "sm", children: "List Mode" })] })] }), mode === "scan" && (_jsxs(Stack, { gap: "md", children: [_jsx(BarcodeField, { autoFocus: true, value: scanValue, onChange: setScanValue, onScan: handleScan, helperText: "Point scanner at an item sticker or type the barcode and press Enter." }), scanError && (_jsx(Text, { color: "error", size: "sm", children: scanError })), scanResult && (_jsxs(Stack, { surface: "card", padding: "md", rounded: "md", gap: "sm", children: [_jsx(Text, { size: "xs", color: "muted", children: "Scanned item" }), _jsx(Heading, { level: 5, children: scanResult.product.title ?? scanResult.product.id }), _jsxs(Row, { gap: "md", wrap: true, children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Order" }), _jsxs(Text, { size: "sm", weight: "medium", children: ["#", scanResult.order.id] })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Buyer" }), _jsx(Text, { size: "sm", weight: "medium", children: scanResult.order.userName })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", color: "muted", children: "Status" }), _jsx(Badge, { variant: statusBadgeVariant(scanResult.order.status), children: scanResult.order.status })] })] }), _jsxs(Row, { gap: "xs", children: [_jsx(Button, { variant: "primary", onClick: confirmPick, isLoading: isConfirming, children: "Confirm Pick" }), _jsx(Button, { variant: "secondary", onClick: () => {
+                                            setScanResult(null);
+                                            setScanValue("");
+                                            setScanError(null);
+                                        }, children: "Cancel" })] })] })), !scanResult && !scanError && (_jsx(Text, { color: "muted", size: "sm", children: orders.length === 0 && !isLoadingOrders
+                            ? "No orders waiting — great work!"
+                            : `${orders.length} order${orders.length === 1 ? "" : "s"} in queue.` }))] })), mode === "list" && (_jsxs(Stack, { gap: "sm", children: [_jsxs(Row, { align: "center", gap: "sm", children: [_jsx(Button, { variant: filterMine ? "primary" : "secondary", size: "sm", onClick: () => setFilterMine((v) => !v), children: filterMine ? "Showing My Orders" : "My Orders" }), _jsx(Text, { size: "xs", color: "muted", children: isLoadingOrders ? "Loading…" : `${visibleOrders.length} order${visibleOrders.length === 1 ? "" : "s"}` })] }), visibleOrders.length === 0 && !isLoadingOrders && (_jsx(Text, { color: "muted", children: "No orders waiting \u2014 great work!" })), visibleOrders.map((order) => (_jsxs(Stack, { surface: "card", padding: "sm", rounded: "md", gap: "xs", children: [_jsxs(Row, { align: "center", gap: "xs", wrap: true, children: [_jsxs(Text, { size: "sm", weight: "medium", children: ["#", order.id] }), _jsx(Badge, { variant: statusBadgeVariant(order.status), children: order.status }), order.pickedAt && (_jsx(Badge, { variant: "success", children: "Picked" })), order.packedAt && (_jsx(Badge, { variant: "success", children: "Packed" }))] }), _jsxs(Text, { size: "xs", color: "muted", children: [order.userName, order.items && order.items.length > 0 && (_jsxs(_Fragment, { children: [" \u00B7 ", order.items.map((i) => i.productTitle).join(", ")] }))] }), order.assignedWorkerId && (_jsxs(Text, { size: "xs", color: "muted", children: ["Assigned: ", order.assignedWorkerId === currentUserId ? "Me" : order.assignedWorkerId] })), _jsxs(Row, { gap: "xs", children: [!order.pickedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPicked(order.id), isLoading: actionLoadingId === order.id + ":picked", children: "Mark Picked" })), order.pickedAt && !order.packedAt && (_jsx(Button, { size: "sm", variant: "secondary", onClick: () => handleMarkPacked(order.id), isLoading: actionLoadingId === order.id + ":packed", children: "Mark Packed" }))] })] }, order.id)))] }))] }));
+}

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

@@ -14,6 +14,7 @@ interface PrintCenterProduct {
     condition?: string;
     stockCount?: number;
     physicalLocation?: string;
+    barcodeId?: string;
 }
 interface PrintCenterOrder {
     id: string;
@@ -25,6 +26,7 @@ interface PrintCenterOrder {
         productName: string;
         quantity: number;
         price: number;
+        barcodeId?: string;
     }[];
     physicalLocation?: string;
 }
@@ -36,5 +38,5 @@ interface PrintCenterViewProps {
     initialProducts?: PrintCenterProduct[];
     initialOrders?: PrintCenterOrder[];
 }
-export declare function PrintCenterView({ store, brandName }: PrintCenterViewProps): import("react/jsx-runtime").JSX.Element;
+export declare function PrintCenterView({ store, brandName, initialProducts, initialOrders, }: PrintCenterViewProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,7 +1,55 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import JsBarcode from "jsbarcode";
 import { Heading, Text } from "../../../ui/components/Typography";
-import { Stack } from "@mohasinac/appkit";
-export function PrintCenterView({ store, brandName = "LetItRip" }) {
-    return (_jsxs(Stack, { justify: "center", padding: "y-6xl", className: "text-center", align: "center", gap: "md", children: [_jsxs(Heading, { level: 2, children: [brandName, " Print Center"] }), store && _jsx(Text, { size: "sm", variant: "muted", children: store.storeName }), _jsx(Text, { size: "sm", variant: "muted", children: "Print center features are coming soon." })] }));
+import { Stack, Row } from "../../../ui/components/Layout";
+import { Button } from "../../../ui/components/Button";
+import { FieldCheckbox } from "../../../ui/forms/FieldCheckbox";
+function ProductLabel({ product }) {
+    const svgRef = useRef(null);
+    useEffect(() => {
+        if (svgRef.current && product.barcodeId) {
+            try {
+                JsBarcode(svgRef.current, product.barcodeId, {
+                    format: "CODE128",
+                    width: 2,
+                    height: 50,
+                    displayValue: true,
+                    fontSize: 12,
+                    margin: 8,
+                });
+            }
+            catch {
+                // Invalid barcode value — render nothing
+            }
+        }
+    }, [product.barcodeId]);
+    return (_jsxs(Stack, { surface: "card", padding: "sm", rounded: "sm", gap: "xs", className: "break-inside-avoid text-center w-[200px]", children: [product.barcodeId ? (_jsx("svg", { ref: svgRef })) : (_jsx(Text, { size: "xs", color: "muted", children: "No barcode" })), _jsx(Text, { size: "xs", weight: "medium", truncate: 1, children: product.name }), _jsxs(Text, { size: "xs", color: "muted", children: ["\u20B9", (product.price / 100).toLocaleString("en-IN")] }), product.physicalLocation && (_jsx(Text, { size: "xs", color: "muted", children: product.physicalLocation }))] }));
+}
+function PackingSlip({ order, brandName }) {
+    return (_jsxs(Stack, { surface: "card", padding: "md", rounded: "sm", className: "break-inside-avoid mb-4 max-w-[480px]", children: [_jsxs(Row, { justify: "between", className: "mb-2", children: [_jsx(Heading, { level: 5, children: brandName }), _jsxs(Text, { size: "xs", color: "muted", children: ["#", order.id] })] }), _jsx(Text, { size: "xs", color: "muted", children: new Date(order.createdAt).toLocaleDateString("en-IN") }), order.buyerDisplayName && _jsx(Text, { size: "sm", weight: "medium", children: order.buyerDisplayName }), order.buyerCity && _jsx(Text, { size: "xs", color: "muted", children: order.buyerCity }), order.physicalLocation && (_jsxs(Text, { size: "xs", color: "muted", children: ["Staging: ", order.physicalLocation] })), _jsx(Stack, { className: "mt-3 border-t pt-2", children: order.items.map((item, i) => (
+                // audit-variant-ok: py-1 is vertical-only padding; border-b last:border-b-0 uses pseudo-selector — no Row variant covers these
+                _jsxs(Row, { justify: "between", className: "py-1 border-b last:border-b-0", children: [_jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "medium", children: item.productName }), item.barcodeId && _jsx(Text, { size: "xs", color: "muted", children: item.barcodeId })] }), _jsxs(Stack, { className: "text-right", children: [_jsxs(Text, { size: "xs", children: ["\u00D7", item.quantity] }), _jsxs(Text, { size: "xs", color: "muted", children: ["\u20B9", (item.price / 100).toLocaleString("en-IN")] })] })] }, i))) })] }));
+}
+export function PrintCenterView({ store, brandName = "LetItRip", initialProducts = [], initialOrders = [], }) {
+    const [tab, setTab] = useState("labels");
+    const [selectedProducts, setSelectedProducts] = useState(new Set());
+    const [selectedOrders, setSelectedOrders] = useState(new Set());
+    const toggleProduct = (id) => setSelectedProducts((prev) => {
+        const next = new Set(prev);
+        next.has(id) ? next.delete(id) : next.add(id);
+        return next;
+    });
+    const toggleOrder = (id) => setSelectedOrders((prev) => {
+        const next = new Set(prev);
+        next.has(id) ? next.delete(id) : next.add(id);
+        return next;
+    });
+    const printSelected = () => window.print();
+    return (_jsxs(Stack, { gap: "md", padding: "md", children: [_jsx("style", { children: `@media print { .no-print { display: none !important; } }` }), _jsxs(Stack, { className: "no-print", children: [_jsxs(Heading, { level: 3, children: ["Print Center", store ? ` — ${store.storeName}` : ""] }), _jsxs(Row, { gap: "xs", className: "mt-3", children: [_jsx(Button, { onClick: () => setTab("labels"), variant: tab === "labels" ? "primary" : "secondary", size: "sm", children: "Product Labels" }), _jsx(Button, { onClick: () => setTab("slips"), variant: tab === "slips" ? "primary" : "secondary", size: "sm", children: "Packing Slips" })] })] }), tab === "labels" && (_jsxs(_Fragment, { children: [_jsx(Stack, { className: "no-print", children: _jsxs(Stack, { gap: "sm", children: [initialProducts.length === 0 ? (_jsx(Text, { color: "muted", children: "No products available." })) : (initialProducts.map((p) => (_jsx(FieldCheckbox, { name: `product-${p.id}`, label: p.name, checked: selectedProducts.has(p.id), onChange: () => toggleProduct(p.id) }, p.id)))), _jsxs(Button, { onClick: printSelected, disabled: selectedProducts.size === 0, children: ["Print Selected (", selectedProducts.size, ")"] })] }) }), _jsx(Row, { wrap: true, gap: "sm", className: "mt-4", children: initialProducts
+                            .filter((p) => selectedProducts.has(p.id))
+                            .map((p) => (_jsx(ProductLabel, { product: p }, p.id))) })] })), tab === "slips" && (_jsxs(_Fragment, { children: [_jsx(Stack, { className: "no-print", children: _jsxs(Stack, { gap: "sm", children: [initialOrders.length === 0 ? (_jsx(Text, { color: "muted", children: "No orders available." })) : (initialOrders.map((o) => (_jsx(FieldCheckbox, { name: `order-${o.id}`, label: `#${o.id}${o.buyerDisplayName ? ` — ${o.buyerDisplayName}` : ""}`, checked: selectedOrders.has(o.id), onChange: () => toggleOrder(o.id) }, o.id)))), _jsxs(Button, { onClick: printSelected, disabled: selectedOrders.size === 0, children: ["Print Selected (", selectedOrders.size, ")"] })] }) }), _jsx(Stack, { gap: "sm", children: initialOrders
+                            .filter((o) => selectedOrders.has(o.id))
+                            .map((o) => (_jsx(PackingSlip, { order: o, brandName: brandName }, o.id))) })] }))] }));
 }

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

@@ -59,6 +59,8 @@ export interface SellerProductDraft {
     liveHandlingFee?: number;
     liveJurisdictions?: string[];
     liveCites?: boolean;
+    /** Barcode ID of the physical sticker on this item. Auto-generated on save if blank. */
+    barcodeId?: string;
 }
 export interface SellerProductShellProps {
     mode: "create" | "edit";

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

@@ -9,6 +9,7 @@ import { Alert, Button, Div, FormField, FormGroup, Heading, Section, Stack, Text
 import { ImageUpload, MediaUploadField, MediaUploadList, useMediaUpload } from "../../media";
 import { StoreAddressSelectorCreate } from "../../stores/components/StoreAddressSelectorCreate";
 import { QuickProductForm } from "./QuickProductForm";
+import { BarcodeField } from "./BarcodeField";
 import { normalizeError } from "../../../errors/normalize";
 const sellerProductSchema = z.object({
     title: z.string().min(1, "Product title is required").max(200),
@@ -39,7 +40,7 @@ function toPaise(rupeeStr) {
 }
 // ── Step 1: Basic ─────────────────────────────────────────────────────────────
 function StepBasic({ values, onChange, renderCategorySelector, renderBrandSelector, renderTemplateSelector, }) {
-    return (_jsxs(Stack, { gap: "md", children: [renderTemplateSelector?.({ onApply: onChange }), _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(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", 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(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", 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" })] }));
+    return (_jsxs(Stack, { gap: "md", children: [renderTemplateSelector?.({ onApply: onChange }), _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(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", 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(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", 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" }), _jsx(BarcodeField, { value: values.barcodeId ?? "", onChange: (v) => onChange({ barcodeId: v || undefined }), onScan: (v) => onChange({ barcodeId: v }), helperText: "Leave blank to auto-generate. Scan a pre-printed sticker to link it." })] }));
 }
 // ── Step 2: Media ─────────────────────────────────────────────────────────────
 function StepMedia({ values, onChange, storeSlug = "store", }) {

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

@@ -128,3 +128,7 @@ export { SellerDigitalCodesView } from "./SellerDigitalCodesView";
 export type { SellerDigitalCodesViewProps } from "./SellerDigitalCodesView";
 export { SellerLiveView } from "./SellerLiveView";
 export type { SellerLiveViewProps } from "./SellerLiveView";
+export { BarcodeField } from "./BarcodeField";
+export type { BarcodeFieldProps } from "./BarcodeField";
+export { FulfillmentView } from "./FulfillmentView";
+export type { FulfillmentViewProps } from "./FulfillmentView";

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

@@ -67,3 +67,5 @@ export { SellerBundlesView } from "./SellerBundlesView";
 export { SellerClassifiedView } from "./SellerClassifiedView";
 export { SellerDigitalCodesView } from "./SellerDigitalCodesView";
 export { SellerLiveView } from "./SellerLiveView";
+export { BarcodeField } from "./BarcodeField";
+export { FulfillmentView } from "./FulfillmentView";

package/dist/features/seller/schemas/index.d.ts

@@ -87,8 +87,8 @@ export declare const sellerStoreSchema: z.ZodObject<{
 }, "strip", z.ZodTypeAny, {
     status: "pending" | "active" | "rejected" | "suspended";
     createdAt: string;
-    id: string;
     storeName: string;
+    id: string;
     updatedAt: string;
     isPublic: boolean;
     storeSlug: string;
@@ -119,8 +119,8 @@ export declare const sellerStoreSchema: z.ZodObject<{
 }, {
     status: "pending" | "active" | "rejected" | "suspended";
     createdAt: string;
-    id: string;
     storeName: string;
+    id: string;
     updatedAt: string;
     isPublic: boolean;
     storeSlug: string;

package/dist/features/store-extensions/schemas/firestore.d.ts

@@ -1,4 +1,5 @@
 import type { FirestoreDocument } from "@mohasinac/appkit";
+import type { BaseDocument } from "../../../_internal/shared/types/base-document";
 /**
  * S-STORE Extensions — Firestore Document Types
  *
@@ -20,8 +21,7 @@ import type { FirestoreDocument } from "@mohasinac/appkit";
  *  11. storeGoogleConfig     — per-store Google Business reviews integration
  */
 export type PayoutMethodType = "upi" | "bank" | "card" | "other";
-export interface PayoutMethodDocument {
-    id: string;
+export interface PayoutMethodDocument extends BaseDocument {
     sellerId: string;
     storeId: string;
     type: PayoutMethodType;
@@ -34,15 +34,12 @@ export interface PayoutMethodDocument {
     accountHolderName?: string;
     bankName?: string;
     details?: Record<string, string>;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const PAYOUT_METHODS_COLLECTION: "payoutMethods";
 export declare const PAYOUT_METHOD_INDEXED_FIELDS: readonly ["sellerId", "storeId", "type", "isDefault", "isActive", "createdAt"];
 export declare const DEFAULT_PAYOUT_METHOD_DATA: Partial<PayoutMethodDocument>;
 export type ShippingMethod = "free" | "flat" | "weight" | "express" | "pickup" | "custom";
-export interface ShippingConfigDocument {
-    id: string;
+export interface ShippingConfigDocument extends BaseDocument {
     storeId: string;
     label: string;
     method: ShippingMethod;
@@ -54,16 +51,13 @@ export interface ShippingConfigDocument {
     expressSurchargeInPaise?: number;
     estimatedDays?: number;
     zones?: string[];
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const SHIPPING_CONFIGS_COLLECTION: "shippingConfigs";
 export declare const SHIPPING_CONFIG_INDEXED_FIELDS: readonly ["storeId", "method", "isDefault", "isActive", "createdAt"];
 export declare const DEFAULT_SHIPPING_CONFIG_DATA: Partial<ShippingConfigDocument>;
 export type AnalyticsScope = "seller" | "admin";
 export type AnalyticsCardType = "metric" | "line" | "bar" | "pie" | "table" | "custom";
-export interface AnalyticsCardDocument {
-    id: string;
+export interface AnalyticsCardDocument extends BaseDocument {
     scope: AnalyticsScope;
     ownerId: string;
     title: string;
@@ -73,15 +67,12 @@ export interface AnalyticsCardDocument {
     position: number;
     isBuiltIn: boolean;
     isVisible: boolean;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const ANALYTICS_CARDS_COLLECTION: "analyticsCards";
 export declare const ANALYTICS_CARD_INDEXED_FIELDS: readonly ["scope", "ownerId", "isVisible", "position", "createdAt"];
 export declare const DEFAULT_ANALYTICS_CARD_DATA: Partial<AnalyticsCardDocument>;
 export type AlertOperator = ">" | "<" | ">=" | "<=" | "==" | "!=";
-export interface AnalyticsAlertDocument {
-    id: string;
+export interface AnalyticsAlertDocument extends BaseDocument {
     scope: AnalyticsScope;
     ownerId: string;
     label: string;
@@ -92,14 +83,11 @@ export interface AnalyticsAlertDocument {
     isActive: boolean;
     notifyChannels: Array<"in-app" | "email" | "whatsapp">;
     lastTriggeredAt?: Date;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const ANALYTICS_ALERTS_COLLECTION: "analyticsAlerts";
 export declare const ANALYTICS_ALERT_INDEXED_FIELDS: readonly ["scope", "ownerId", "isActive", "metric", "createdAt"];
 export declare const DEFAULT_ANALYTICS_ALERT_DATA: Partial<AnalyticsAlertDocument>;
-export interface StoreCategoryDocument {
-    id: string;
+export interface StoreCategoryDocument extends BaseDocument {
     storeId: string;
     label: string;
     slug: string;
@@ -108,15 +96,12 @@ export interface StoreCategoryDocument {
     isActive: boolean;
     description?: string;
     coverImageUrl?: string;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const STORE_CATEGORIES_COLLECTION: "storeCategories";
 export declare const STORE_CATEGORY_INDEXED_FIELDS: readonly ["storeId", "slug", "isActive", "displayOrder", "createdAt"];
 export declare const DEFAULT_STORE_CATEGORY_DATA: Partial<StoreCategoryDocument>;
 export type ListingTemplateType = "standard" | "auction" | "pre-order" | "prize-draw" | "bundle" | "classified" | "digital-code" | "live";
-export interface ListingTemplateDocument {
-    id: string;
+export interface ListingTemplateDocument extends BaseDocument {
     storeId: string;
     ownerId: string;
     name: string;
@@ -127,16 +112,13 @@ export interface ListingTemplateDocument {
     isShared: boolean;
     isActive: boolean;
     usageCount: number;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const LISTING_TEMPLATES_COLLECTION: "listingTemplates";
 export declare const LISTING_TEMPLATE_INDEXED_FIELDS: readonly ["storeId", "ownerId", "listingType", "isShared", "isActive", "createdAt"];
 export declare const DEFAULT_LISTING_TEMPLATE_DATA: Partial<ListingTemplateDocument>;
 export type ModerationStatus = "pending" | "approved" | "rejected" | "auto-approved";
 export type ModerationMediaType = "video" | "image" | "rich-text";
-export interface ModerationQueueDocument {
-    id: string;
+export interface ModerationQueueDocument extends BaseDocument {
     mediaType: ModerationMediaType;
     mediaUrl?: string;
     thumbnailUrl?: string;
@@ -149,8 +131,6 @@ export interface ModerationQueueDocument {
     reviewerId?: string;
     reviewedAt?: Date;
     submittedAt: Date;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const MODERATION_QUEUE_COLLECTION: "moderationQueue";
 export declare const MODERATION_QUEUE_INDEXED_FIELDS: readonly ["status", "mediaType", "entityType", "entityId", "storeId", "ownerId", "submittedAt", "createdAt"];
@@ -158,8 +138,7 @@ export declare const DEFAULT_MODERATION_QUEUE_DATA: Partial<ModerationQueueDocum
 export type ReportEntityType = "product" | "store" | "review" | "event" | "user" | "blog" | "comment";
 export type ReportStatus = "pending" | "under-review" | "actioned" | "dismissed";
 export type ReportReason = "scam" | "counterfeit" | "prohibited" | "inappropriate" | "harassment" | "spam" | "ip-violation" | "other";
-export interface ReportDocument {
-    id: string;
+export interface ReportDocument extends BaseDocument {
     entityType: ReportEntityType;
     entityId: string;
     reporterId: string;
@@ -171,8 +150,6 @@ export interface ReportDocument {
     assignedTo?: string;
     resolution?: string;
     resolvedAt?: Date;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const REPORTS_COLLECTION: "reports";
 export declare const REPORT_INDEXED_FIELDS: readonly ["entityType", "entityId", "reporterId", "reason", "status", "createdAt"];
@@ -186,8 +163,7 @@ export interface ItemRequestReply {
     isOpInitiatedThread: boolean;
     createdAt: Date;
 }
-export interface ItemRequestDocument {
-    id: string;
+export interface ItemRequestDocument extends BaseDocument {
     opUserId: string;
     opDisplayName: string;
     title: string;
@@ -203,14 +179,11 @@ export interface ItemRequestDocument {
     approvedAt?: Date;
     approvedBy?: string;
     closedAt?: Date;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const ITEM_REQUESTS_COLLECTION: "itemRequests";
 export declare const ITEM_REQUEST_INDEXED_FIELDS: readonly ["opUserId", "status", "category", "createdAt"];
 export declare const DEFAULT_ITEM_REQUEST_DATA: Partial<ItemRequestDocument>;
-export interface StoreWhatsAppConfigDocument {
-    id: string;
+export interface StoreWhatsAppConfigDocument extends BaseDocument {
     storeId: string;
     isConnected: boolean;
     isPaid: boolean;
@@ -221,14 +194,11 @@ export interface StoreWhatsAppConfigDocument {
     welcomeMessage?: string;
     /** Status of pending WhatsApp Business onboarding (Meta Cloud API). */
     onboardingStatus?: "pending" | "approved" | "rejected";
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const STORE_WHATSAPP_CONFIG_COLLECTION: "storeWhatsAppConfig";
 export declare const STORE_WHATSAPP_CONFIG_INDEXED_FIELDS: readonly ["storeId", "isConnected", "isPaid"];
 export declare const DEFAULT_STORE_WHATSAPP_CONFIG_DATA: Partial<StoreWhatsAppConfigDocument>;
-export interface StoreGoogleConfigDocument {
-    id: string;
+export interface StoreGoogleConfigDocument extends BaseDocument {
     storeId: string;
     isConnected: boolean;
     placeId?: string;
@@ -237,8 +207,6 @@ export interface StoreGoogleConfigDocument {
     totalReviews?: number;
     lastSyncedAt?: Date;
     oauthRefreshToken?: string;
-    createdAt: Date;
-    updatedAt: Date;
 }
 export declare const STORE_GOOGLE_CONFIG_COLLECTION: "storeGoogleConfig";
 export declare const STORE_GOOGLE_CONFIG_INDEXED_FIELDS: readonly ["storeId", "isConnected"];

package/dist/features/stores/components/StoreClassifiedsListing.d.ts

@@ -0,0 +1,5 @@
+export interface StoreClassifiedsListingProps {
+    storeId?: string;
+    initialData?: any;
+}
+export declare function StoreClassifiedsListing({ storeId, initialData }: StoreClassifiedsListingProps): import("react/jsx-runtime").JSX.Element;

package/dist/features/stores/components/StoreClassifiedsListing.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { useUrlTable } from "../../../react/hooks/useUrlTable";
+import { usePendingTable } from "../../../react/hooks/usePendingTable";
+import { useProducts } from "../../products/hooks/useProducts";
+import { Div, FilterDrawer, ListingToolbar, Pagination, Row, Text } from "../../../ui";
+import { ClassifiedFilters } from "../../classified/components/ClassifiedFilters";
+import { InteractiveProductCard } from "../../products/components/InteractiveProductCard";
+import { PRODUCT_FIELDS } from "../../../constants/field-names";
+import { TABLE_KEYS } from "../../../constants/table-keys";
+import { sortBy } from "../../../constants/sort";
+import { ROUTES } from "../../../next";
+const DEFAULT_SORT = sortBy(PRODUCT_FIELDS.CREATED_AT);
+const SORT_OPTIONS = [
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT), label: "Newest First" },
+    { value: sortBy(PRODUCT_FIELDS.CREATED_AT, "ASC"), label: "Oldest First" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE, "ASC"), label: "Price: Low to High" },
+    { value: sortBy(PRODUCT_FIELDS.PRICE), label: "Price: High to Low" },
+];
+const FILTER_KEYS = [TABLE_KEYS.MIN_PRICE, TABLE_KEYS.MAX_PRICE, TABLE_KEYS.NEGOTIABLE, TABLE_KEYS.ACCEPTS_SHIPPING];
+export function StoreClassifiedsListing({ storeId, initialData }) {
+    const table = useUrlTable({ defaults: { pageSize: "24", sort: DEFAULT_SORT } });
+    const [searchInput, setSearchInput] = useState(table.get("q") || "");
+    const [filterOpen, setFilterOpen] = useState(false);
+    const { pendingTable, filterActiveCount, onFilterApply, onFilterClear, onResetAll, onFilterReset } = usePendingTable(table, FILTER_KEYS);
+    const openFilters = useCallback(() => { onFilterReset(); setFilterOpen(true); }, [onFilterReset]);
+    const applyFilters = useCallback(() => { onFilterApply(); setFilterOpen(false); }, [onFilterApply]);
+    const resetAll = useCallback(() => { onResetAll({ q: "", sort: "" }); setSearchInput(""); }, [onResetAll]);
+    const hasActiveState = !!table.get("q") || table.get("sort") !== DEFAULT_SORT || filterActiveCount > 0;
+    const params = {
+        q: table.get("q") || undefined,
+        minPrice: table.get(TABLE_KEYS.MIN_PRICE) ? Number(table.get(TABLE_KEYS.MIN_PRICE)) : undefined,
+        maxPrice: table.get(TABLE_KEYS.MAX_PRICE) ? Number(table.get(TABLE_KEYS.MAX_PRICE)) : undefined,
+        sort: table.get("sort") || DEFAULT_SORT,
+        page: table.getNumber("page", 1),
+        perPage: table.getNumber("pageSize", 24),
+        storeId: storeId || undefined,
+        listingType: "classified",
+    };
+    const { products, totalPages, page, isLoading } = useProducts(params, { initialData });
+    const gridClass = "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 gap-4";
+    return (_jsxs(Div, { className: "min-h-[200px]", children: [_jsx(ListingToolbar, { filterCount: filterActiveCount, onFiltersClick: openFilters, searchValue: searchInput, searchPlaceholder: "Search store classifieds\u2026", onSearchChange: setSearchInput, onSearchCommit: () => table.set("q", searchInput.trim()), sortValue: table.get("sort") || DEFAULT_SORT, sortOptions: SORT_OPTIONS, onSortChange: (v) => table.set("sort", v), onResetAll: resetAll, hasActiveState: hasActiveState }), totalPages > 1 && (_jsx(Row, { border: "bottom", className: "sticky top-[calc(var(--header-height,0px)+44px)] z-10 backdrop-blur-sm", surface: "default", padding: "toolbar", justify: "center", children: _jsx(Pagination, { currentPage: page, totalPages: totalPages, onPageChange: (p) => table.setPage(p) }) })), _jsx(Div, { padding: "y-lg", children: _jsx(Div, { className: gridClass, children: isLoading
+                        ? Array.from({ length: 8 }).map((_, i) => _jsx(Div, { surface: "muted", rounded: "xl", className: "aspect-square animate-pulse" }, i))
+                        : products.length === 0
+                            ? _jsx(Div, { paddingY: "y-4xl", className: "col-span-full text-center", children: _jsx(Text, { color: "muted", children: "No classified listings in this store yet." }) })
+                            : products.map((p) => (_jsx(InteractiveProductCard, { product: p, href: String(ROUTES.PUBLIC.CLASSIFIED_DETAIL(p.slug ?? p.id)) }, p.id))) }) }), _jsx(FilterDrawer, { open: filterOpen, onOpen: openFilters, onClose: () => setFilterOpen(false), onApply: applyFilters, onReset: onFilterClear, activeCount: filterActiveCount, hideTrigger: true, children: _jsx(ClassifiedFilters, { table: pendingTable, currencyPrefix: "\u20B9" }) })] }));
+}

package/dist/features/stores/components/StoreClassifiedsPageView.d.ts

@@ -0,0 +1,4 @@
+export interface StoreClassifiedsPageViewProps {
+    storeSlug: string;
+}
+export declare function StoreClassifiedsPageView({ storeSlug }: StoreClassifiedsPageViewProps): Promise<import("react/jsx-runtime").JSX.Element | null>;