@mohasinac/appkit 4.43.0 → 4.44.0

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

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useApiMutation } from "@mohasinac/appkit/client";
 import React, { useState, useCallback } from "react";
+import { alertMetricsForScope } from "../../store-extensions/constants/alert-metrics";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { Alert, Badge, Button, Div, Heading, Row, Section, Stack, Text, Toggle, useToast } from "../../../ui";
 import { apiClient } from "../../../http";
@@ -39,15 +40,24 @@ const OPERATOR_OPTIONS = ANALYTICS_ALERT_OPERATORS.map((value) => ({
     value,
     label: OPERATOR_LABELS[value] ?? value,
 }));
-const METRIC_OPTIONS = [
-    { value: "daily_revenue", label: "Daily Revenue (₹)" },
-    { value: "daily_orders", label: "Daily Orders" },
-    { value: "low_stock", label: "Low Stock (products)" },
-    { value: "cancelled_orders", label: "Cancelled Orders" },
-    { value: "pending_payouts", label: "Pending Payouts (₹)" },
-    { value: "avg_rating", label: "Average Rating" },
-    { value: "reviews_count", label: "New Reviews" },
-];
+/*
+ * 🛑 DERIVED, never a hand-written list — that list WAS the defect.
+ *
+ * These seven values (daily_revenue, daily_orders, low_stock,
+ * cancelled_orders, pending_payouts, avg_rating, reviews_count) shared ZERO
+ * tokens with the four the seed wrote, and nothing validated either because
+ * `metric` was `string`. It stayed invisible because no evaluator read the
+ * field at all, so an alert a seller configured could never fire.
+ *
+ * Now from `alertMetricsForScope("seller")`, which the evaluator switches
+ * over exhaustively — so a metric the job cannot compute is not offerable.
+ */
+const METRIC_OPTIONS = alertMetricsForScope("seller").map(({ value, def }) => ({
+    value,
+    label: def.label,
+}));
+/** Helper text per metric, so "Orders in the window" says what it counts. */
+const METRIC_DESCRIPTIONS = Object.fromEntries(alertMetricsForScope("seller").map(({ value, def }) => [value, def.describes]));
 const WINDOW_OPTIONS = [
     { value: "1", label: "Last 1 hour" },
     { value: "6", label: "Last 6 hours" },
@@ -74,11 +84,11 @@ function AlertCard({ alert, onToggle, onDelete, }) {
     const metricLabel = METRIC_OPTIONS.find((m) => m.value === alert.metric)?.label ?? alert.metric;
     const opLabel = OPERATOR_OPTIONS.find((o) => o.value === alert.operator)?.label ?? alert.operator;
     const windowLabel = WINDOW_OPTIONS.find((w) => w.value === String(alert.windowHours))?.label ?? `${alert.windowHours}h`;
-    return (_jsxs(Row, { surface: "card", padding: "sm", align: "start", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-1", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), _jsx(Row, { gap: "xs", wrap: true, children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "mt-1", color: "faint", size: "xs", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-analytics-alert"], onClick: () => onDelete(alert.id), className: "text-error hover:text-error" })] })] }));
+    return (_jsxs(Row, { surface: "card", padding: "sm", align: "start", justify: "between", gap: "md", children: [_jsxs(Div, { className: "flex-1 min-w-0", children: [_jsxs(Row, { className: "mb-1", gap: "sm", wrap: true, children: [_jsx(Text, { size: "sm", weight: "medium", color: "primary", children: alert.label }), _jsx(Badge, { variant: alert.isActive ? "success" : "default", children: alert.isActive ? "Active" : "Paused" })] }), _jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: [metricLabel, " ", opLabel, " ", alert.threshold, " \u00B7 ", windowLabel] }), METRIC_DESCRIPTIONS[alert.metric] ? (_jsx(Text, { className: "mb-1", color: "muted", size: "xs", children: METRIC_DESCRIPTIONS[alert.metric] })) : null, alert.lastTriggeredAt ? (_jsxs(Text, { className: "mb-1", color: "muted", size: "xs", children: ["Last fired ", new Date(alert.lastTriggeredAt).toLocaleString(), alert.lastObservedValue != null ? ` at ${alert.lastObservedValue}` : ""] })) : null, _jsx(Row, { gap: "xs", wrap: true, children: alert.notifyChannels.map((ch) => (_jsx(Badge, { variant: OPERATOR_BADGE[alert.operator] ?? "default", children: ch }, ch))) }), alert.lastTriggeredAt && (_jsxs(Text, { className: "mt-1", color: "faint", size: "xs", children: ["Last triggered: ", new Date(alert.lastTriggeredAt).toLocaleString("en-IN")] }))] }), _jsxs(Row, { className: "shrink-0", align: "center", gap: "sm", children: [_jsx(Toggle, { checked: alert.isActive, onChange: (v) => onToggle(alert.id, v), size: "sm" }), _jsx(Button, { variant: "ghost", size: "sm", action: ACTIONS.STORE["delete-analytics-alert"], onClick: () => onDelete(alert.id), className: "text-error hover:text-error" })] })] }));
 }
 const EMPTY_DRAFT = {
     label: "",
-    metric: "daily_orders",
+    metric: "orders_count",
     operator: ">",
     threshold: "",
     windowHours: "24",

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

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatPhysicalLocation } from "../../../utils/physical-location";
 import { OrderAddonBadges } from "../../orders/components/OrderAddonBadges";
 import { normalizeError } from "../../../errors/normalize";
 import { Row, SIEVE_OP, sieveFilter } from "@mohasinac/appkit/client";
@@ -362,7 +363,11 @@ export function SellerOrdersView({ orderDetailApiBase = SELLER_ENDPOINTS.ORDERS,
             key: "physicalLocation",
             header: "Staging",
             className: "w-28",
-            render: (row) => row.physicalLocation ? (_jsxs(Span, { size: "xs", className: "font-mono", color: "muted", children: [row.physicalLocation.zone, "/", row.physicalLocation.shelf, "/", row.physicalLocation.bin] })) : (_jsx(Span, { size: "xs", color: "muted", children: "\u2014" })),
+            render: (row) => {
+                // Shared formatter — see utils/physical-location.ts.
+                const loc = formatPhysicalLocation(row.physicalLocation);
+                return loc ? (_jsx(Span, { size: "xs", className: "font-mono", color: "muted", children: loc })) : (_jsx(Span, { size: "xs", color: "muted", children: "\u2014" }));
+            },
         },
         {
             key: "updatedAt",

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

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
-import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Stack, Text, Toggle } from "../../../ui";
+import { Alert, Badge, Checkbox, Div, FormField, FormGroup, Heading, Label, Row, Span, Stack, Text, Toggle } from "../../../ui";
 import { StackedViewShell } from "../../../ui";
 import { FormShellContext, useFormShellState, applyZodIssues, FormErrorSummary } from "../../../ui/forms";
 import { SectionForm, useSectionFormNav, annotate } from "../../shell";
@@ -54,6 +54,17 @@ const payoutSettingsDraftSchema = z.object({
     }),
     minimumThreshold: annotate(z.string(), { section: "preferences", order: 2, row: "pair" }),
     emiEnabled: annotate(z.boolean(), { section: "preferences", order: 3, row: "quarter" }),
+    /*
+     * How the seller types prices. Lives in PAYOUT settings, not the store
+     * profile, because payout is what it actually changes: at 5% a ₹999
+     * inclusive listing pays out ₹951.43, while the same number typed ex-tax is
+     * stored as ₹1,048.95 and pays out ₹999.00.
+     *
+     * 🛑 It does NOT re-price existing listings — the gross-up happens at write
+     * time — so the label has to say so, or a seller flips it and assumes their
+     * catalogue moved.
+     */
+    pricesIncludeGst: annotate(z.boolean(), { section: "preferences", order: 4, row: "quarter" }),
 }).superRefine((v, ctx) => {
     if (v.method === "upi") {
         if (!v.upiId.trim()) {
@@ -89,6 +100,8 @@ const DEFAULT_DRAFT = {
     autoPayout: true,
     minimumThreshold: "",
     emiEnabled: false,
+    // Inclusive is the documented default — see StoreDocument.pricesIncludeGst.
+    pricesIncludeGst: true,
 };
 export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SETTINGS }) {
     const [draft, setDraft] = useState(DEFAULT_DRAFT);
@@ -119,6 +132,8 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
                     ? String(res.data.preferences.minimumThreshold)
                     : "",
                 emiEnabled: res?.data?.emiEnabled ?? false,
+                // Absent means inclusive, matching the schema default exactly.
+                pricesIncludeGst: res?.data?.pricesIncludeGst ?? true,
             });
         })
             .catch(console.error)
@@ -146,6 +161,7 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
             const body = {
                 ...methodFields,
                 emiEnabled: draft.emiEnabled,
+                pricesIncludeGst: draft.pricesIncludeGst,
                 taxInfo: {
                     gstin: draft.gstin.trim(),
                     pan: draft.pan.trim(),
@@ -212,8 +228,8 @@ export function SellerPayoutSettingsView({ apiBase = SELLER_ENDPOINTS.PAYOUT_SET
         {
             id: "preferences",
             label: "Preferences",
-            fields: ["autoPayout", "minimumThreshold", "emiEnabled"],
-            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." })] })),
+            fields: ["autoPayout", "minimumThreshold", "emiEnabled", "pricesIncludeGst"],
+            render: ({ values, onChange }) => (_jsxs(Stack, { gap: "md", children: [_jsx(Heading, { level: 3, className: "mb-2", children: "Payout Preferences" }), _jsx(Toggle, { checked: values.autoPayout, onChange: (checked) => onChange({ autoPayout: checked }), label: "Enable auto-payout \u2014 automatically transfer earnings on schedule", disabled: busy }), _jsx(FormField, { name: "minimumThreshold", label: "Minimum Payout Threshold (\u20B9)", type: "number", value: values.minimumThreshold, onChange: (v) => onChange({ minimumThreshold: v }), placeholder: "e.g. 500", helpText: "Payouts are held until your balance exceeds this amount. Leave blank for no minimum.", disabled: busy }), _jsxs(Div, { className: `${__P.p3} bg-[var(--appkit-color-surface-alt)] border border-[var(--appkit-color-border)]`, rounded: "lg", children: [_jsx(Text, { className: "mb-1", size: "sm", weight: "medium", children: "Payout Schedule" }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Auto-payouts run every Monday for the previous week's settled orders. Manual payouts can be requested from the Payouts page at any time." })] }), _jsx(Toggle, { checked: values.emiEnabled, onChange: (checked) => onChange({ emiEnabled: checked }), label: "Offer EMI financing on eligible orders", disabled: busy }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Only shown to buyers when platform-wide EMI is also enabled and their cart subtotal from your store exceeds the site's minimum order value. Orders on an EMI plan hold your payout until every installment is paid, unless you mark the item \"ship before EMI completes\"." }), _jsx(Toggle, { checked: values.pricesIncludeGst, onChange: (checked) => onChange({ pricesIncludeGst: checked }), label: "The prices I enter already include GST", disabled: busy }), _jsxs(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: ["Buyers always see a tax-inclusive price, so this only changes how your own entry is read. Leave it", " ", _jsx(Span, { weight: "semibold", children: "on" }), " and a \u20B9999 listing at 5% GST means the buyer pays \u20B9999 and you earn \u20B9951.43 \u2014 the \u20B947.57 is GST we collect and remit for you. Turn it", " ", _jsx(Span, { weight: "semibold", children: "off" }), " and \u20B9999 is treated as your ex-GST price: the listing is shown at \u20B91,048.95 and you earn \u20B9999."] }), _jsx(Text, { className: "text-[var(--appkit-color-text-muted)]", size: "sm", children: "Changing this does not re-price listings you have already published. It applies to products you save from now on." })] })),
         },
     ], [busy, current]);
     const { openIds, setOpenIds, goToSection, fieldToSectionIndex, sectionMeta } = useSectionFormNav(sections, draft);

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

@@ -9,6 +9,35 @@ export interface SellerProductDraft {
     brand?: string;
     condition?: string;
     tags?: string[];
+    authenticity?: "original" | "reproduction" | "unverified";
+    specifications?: {
+        name: string;
+        value: string;
+        unit?: string;
+    }[];
+    /** Feature IDS, never prose — `array-contains` is what faceting runs on. */
+    features?: string[];
+    /**
+     * 🛑 OPTIONAL, on purpose, and the reason is C5a.
+     *
+     * The figure a carrier bills on is the PACKED PARCEL, not the item: a bey is
+     * ~30 g and ~300 g boxed. A required product weight would therefore be an
+     * item weight that systematically under-estimates every booking — and since
+     * the booking is capped at the amount collected from the buyer, systematic
+     * under-estimation means silently absorbing the difference.
+     *
+     * So the category's PACKED default drives the checkout estimate, this field
+     * refines it when a seller bothers, and the real parcel figure is entered at
+     * shipment time, when the seller has the box in front of them.
+     */
+    weightG?: number;
+    dimensionsCm?: {
+        l: number;
+        w: number;
+        h: number;
+    };
+    appliedTemplateId?: string;
+    appliedTemplateBody?: string;
     mainImage?: string;
     images?: string[];
     video?: MediaField;
@@ -121,10 +150,29 @@ export interface SellerProductShellProps {
         onChange: (v: string) => void;
     }) => React.ReactNode;
     /**
-     * Render a template selector at the top of the Basic step.
-     * Receives a callback to apply the selected template to the draft.
+     * Render the category description-template picker, between the
+     * Category/Condition row and the Description field.
+     *
+     * 🛑 The slot existed with ZERO consumers and a single `onApply` prop, which
+     * was not enough to build a picker with: it could apply a body but could not
+     * know WHICH body to fetch, or whether applying one would destroy something
+     * the seller had written. C2b widens it rather than adding a second slot.
+     *
+     * `isDescriptionDirty` is the one that matters. It is the clobber rule in a
+     * boolean: true when the description is non-empty after trim AND not
+     * byte-identical to a body applied this session. The picker must not
+     * overwrite when it is true — it offers a "Replace description" action
+     * instead, which is destructive and therefore carries a confirmation.
      */
     renderTemplateSelector?: (props: {
+        /** The leaf the seller has chosen. Empty until they pick one. */
+        categoryId: string;
+        /** Drives which `variant` is fetched — new_in_box vs pre_owned. */
+        condition: string;
+        /** Resolved `{{slot}}` values the picker fills the body with. */
+        context: Record<string, string>;
+        /** See above. The picker must not silently overwrite when true. */
+        isDescriptionDirty: boolean;
         onApply: (partial: Partial<SellerProductDraft>) => void;
     }) => React.ReactNode;
     /** Called with current draft when user clicks "Save as Template". */

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

@@ -14,6 +14,7 @@ import { pluginFor } from "../../../_internal/shared/listing-types/_registry";
 import { DEFAULT_MIN_OFFER_PERCENT } from "../../../_internal/shared/features/offers/config";
 import { PRODUCT_MAX_IMAGES, PRODUCT_MAX_VIDEOS, PRODUCT_IMAGE_INDEX_MAX, } from "../../../_internal/shared/media/limits";
 import { isFinalSale } from "../../products/constants/final-sale";
+import { ProductFeaturesSelector } from "../../products/components/ProductFeaturesSelector";
 import { normalizeError } from "../../../errors/normalize";
 /**
  * "bundle" is a categoryType, not a ListingType, so it can't live in
@@ -76,7 +77,74 @@ function fromRupeesString(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(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), 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." })] }));
+    /*
+     * 🛑 The clobber rule, in one expression.
+     *
+     * Dirty means: non-empty after trim, AND not byte-identical to a body this
+     * session applied. A seller who has typed anything owns the field; a seller
+     * looking at a body we filled in does not, so a category change may refresh
+     * it silently.
+     *
+     * Byte-identical rather than "did they focus the box": a seller can click
+     * into the description, change nothing, and click away, and that must not
+     * count as authorship.
+     */
+    const description = values.description ?? "";
+    const isDescriptionDirty = description.trim() !== "" && description !== (values.appliedTemplateBody ?? "");
+    /*
+     * The `{{slot}}` values the picker interpolates. Only what the draft
+     * genuinely knows — an unresolvable slot becomes the empty string and the
+     * picker reports it, which is `interpolate`'s contract. Never a literal
+     * `{{series}}` in a published description.
+     *
+     * `condition` resolves to the LABEL, not the raw enum: a body reading
+     * "Condition: like_new" is a template leaking its storage format.
+     */
+    const templateContext = {
+        title: values.title ?? "",
+        brand: values.brand ?? "",
+        condition: CONDITION_OPTIONS.find((o) => o.value === (values.condition ?? "new"))?.label ?? "",
+        siteName: "LetItRip",
+    };
+    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" }), _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 })] }), renderTemplateSelector?.({
+                categoryId: values.category ?? "",
+                condition: values.condition ?? "new",
+                context: templateContext,
+                isDescriptionDirty,
+                onApply: onChange,
+            }), _jsx(FormField, { name: "description", label: "Description", type: "textarea", value: description, onChange: (v) => onChange({ description: v }), placeholder: "Describe your listing in detail\u2026" }), 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(TagInput, { label: "Tags", value: values.tags ?? [], onChange: (tags) => onChange({ tags }), 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 1b: Details — the inherited-but-editable fields (C2c) ───────────────
+const AUTHENTICITY_OPTIONS = [
+    { value: "original", label: "Original — licensed manufacture (Takara, Takara Tomy, Hasbro…)" },
+    { value: "reproduction", label: "Reproduction / midfake — a copy with no manufacturer's marque" },
+    { value: "unverified", label: "Unverified — I cannot confirm which it is" },
+];
+/**
+ * 🛑 Three options, and there is deliberately no fourth.
+ *
+ * A poor-quality counterfeit — brittle plastic, cadmium or lead in the metal
+ * parts — is not a listing state this marketplace offers. It is a scam report.
+ * Offering "fake" as a dropdown value would make selling one a supported
+ * workflow.
+ *
+ * `unverified` exists so a seller who genuinely does not know has an honest
+ * answer available. Without it the only way to list is to claim something they
+ * cannot stand behind, and the field stops meaning anything.
+ */
+function StepDetails({ values, onChange, storeId, listingType, }) {
+    const specs = values.specifications ?? [];
+    const setSpecs = (next) => onChange({ specifications: next });
+    const dims = values.dimensionsCm;
+    const setDim = (key, raw) => {
+        const n = Number(raw);
+        const base = dims ?? { l: 0, w: 0, h: 0 };
+        const next = { ...base, [key]: Number.isFinite(n) ? n : 0 };
+        // All three or none: a box with a length and no width is not a dimension,
+        // and the shipping estimate reads all three or ignores the field.
+        onChange({ dimensionsCm: next.l > 0 && next.w > 0 && next.h > 0 ? next : undefined });
+    };
+    return (_jsxs(Stack, { gap: "md", children: [_jsx(FormField, { name: "authenticity", label: "Authenticity", type: "select", required: true, value: values.authenticity ?? "", onChange: (v) => onChange({ authenticity: v }), options: [{ value: "", label: "Choose one…" }, ...AUTHENTICITY_OPTIONS] }), _jsx(Text, { size: "xs", color: "muted", children: "Shown on the listing whenever it is not Original. A reproduction is a legitimate thing to sell here as long as it is labelled \u2014 what is not allowed is selling one as the real thing. If you believe an item is a cheap counterfeit, report it rather than listing it." }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Features" }), _jsx(Text, { size: "xs", color: "muted", children: "Condition, authenticity, release type, battle type and spin direction. Some are filled in from the category when you save \u2014 remove any that do not apply and your choice sticks." }), _jsx(ProductFeaturesSelector, { value: values.features ?? [], onChange: (next) => onChange({ features: next }), productType: listingType === "bundle" ? "all" : listingType, ...(storeId ? { storeId } : {}) })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Specifications" }), _jsx(Text, { size: "xs", color: "muted", children: "Left blank, the category fills these in. Anything you enter here is kept." }), specs.map((row, i) => (_jsxs(FormGroup, { columns: 3, children: [_jsx(FormField, { name: `spec-name-${i}`, label: "Name", type: "text", value: row.name, onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, name: v } : r))) }), _jsx(FormField, { name: `spec-value-${i}`, label: "Value", type: "text", value: row.value, onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, value: v } : r))) }), _jsxs(Row, { gap: "sm", align: "end", children: [_jsx(FormField, { name: `spec-unit-${i}`, label: "Unit", type: "text", value: row.unit ?? "", onChange: (v) => setSpecs(specs.map((r, j) => (j === i ? { ...r, unit: v } : r))) }), _jsx(Button, { variant: "ghost", size: "sm", onClick: () => setSpecs(specs.filter((_, j) => j !== i)), children: "Remove" })] })] }, i))), _jsx(Button, { variant: "secondary", size: "sm", onClick: () => setSpecs([...specs, { name: "", value: "" }]), children: "Add a specification" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "sm", weight: "medium", children: "Weight and size (optional)" }), _jsx(Text, { size: "xs", color: "muted", children: "\uD83D\uDED1 Leave these blank unless you know them \u2014 the category's own packed-parcel figures are used for the shipping estimate, and you enter the real weight of the box when you book the shipment. A figure here should be the PACKED weight, not the bare item." }), _jsxs(FormGroup, { columns: 4, children: [_jsx(FormField, { name: "weightG", label: "Packed weight (g)", type: "number", value: values.weightG != null ? String(values.weightG) : "", onChange: (v) => onChange({ weightG: v.trim() === "" ? undefined : Math.max(0, Number(v) || 0) }) }), _jsx(FormField, { name: "dimL", label: "Length (cm)", type: "number", value: dims?.l ? String(dims.l) : "", onChange: (v) => setDim("l", v) }), _jsx(FormField, { name: "dimW", label: "Width (cm)", type: "number", value: dims?.w ? String(dims.w) : "", onChange: (v) => setDim("w", v) }), _jsx(FormField, { name: "dimH", label: "Height (cm)", type: "number", value: dims?.h ? String(dims.h) : "", onChange: (v) => setDim("h", v) })] })] })] }));
 }
 // ── Step 2: Media ─────────────────────────────────────────────────────────────
 function StepMedia({ values, onChange, storeSlug = "store", }) {
@@ -306,13 +374,7 @@ function StepShipping({ values, onChange, renderAddressSelector, }) {
                 ] }), renderAddressSelector ? (_jsxs(_Fragment, { children: [_jsx(Text, { className: "text-[var(--appkit-color-text)] mb-1", size: "sm", weight: "medium", 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: toRupeesString(values.insuranceCost), onChange: (v) => onChange({ insuranceCost: fromRupeesString(v) }), placeholder: "0" })), _jsx(FormField, { name: "gstRate", label: "GST Rate", type: "select", value: String(values.gstRate ?? 0), onChange: (v) => onChange({ gstRate: Number(v) }), options: [
-                    { value: "0", label: "Exempt (0%)" },
-                    { value: "5", label: "5%" },
-                    { value: "12", label: "12%" },
-                    { value: "18", label: "18%" },
-                    { value: "28", label: "28%" },
-                ] }), _jsx(FormField, { name: "hsnCode", label: "HSN Code", value: values.hsnCode ?? "", onChange: (v) => onChange({ hsnCode: v }), placeholder: "e.g. 9503" })] }));
+                    })] })) : (_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: toRupeesString(values.insuranceCost), onChange: (v) => onChange({ insuranceCost: fromRupeesString(v) }), placeholder: "0" }))] }));
 }
 // ── Step: Returns ─────────────────────────────────────────────────────────
 /**
@@ -516,13 +578,43 @@ productId, onSave, onPublish, onDiscard, isLoading = false, storeSlug, renderCat
             render: ({ values, onChange }) => (_jsx(StepMedia, { values: values, onChange: onChange, storeSlug: storeSlug })),
             schema: sectionSchemas.media,
         },
+        /*
+         * 🛑 Details sits between Basic and the type-specific step, not at the end.
+         *
+         * `authenticity` is required, and a required field buried after the
+         * optional ones is a field sellers reach by being bounced back to it from
+         * a failed submit. It also reads in the right order: what it IS, then what
+         * it is LIKE, then what it costs.
+         */
+        {
+            id: "details",
+            label: "Details",
+            required: true,
+            fields: ["authenticity", "features", "specifications", "weightG", "dimensionsCm"],
+            render: ({ values, onChange }) => (_jsx(StepDetails, { values: values, onChange: onChange, listingType: listingType, ...(storeSlug ? { storeId: storeSlug } : {}) })),
+            /*
+             * The one required field in the section, and the message says what to do
+             * rather than naming the field — "Authenticity is required" tells a
+             * seller nothing they cannot see.
+             */
+            schema: z
+                .object({
+                authenticity: z.enum(["original", "reproduction", "unverified"], {
+                    errorMap: () => ({
+                        message: "Say whether this is an original, a reproduction, or that you cannot confirm",
+                    }),
+                }),
+            })
+                .passthrough(),
+        },
         ...(typeSpecificSection ? [typeSpecificSection] : []),
         {
             id: "pricing",
             label: "Pricing",
             required: true,
             quick: true,
-            fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent", "gstRate", "hsnCode"],
+            // `gstRate` / `hsnCode` deliberately absent — admin-only, see StepPricing.
+            fields: ["price", "compareAtPrice", "stockQuantity", "allowOffers", "minOfferPercent"],
             render: ({ values, onChange }) => (_jsx(StepPricing, { values: values, onChange: onChange, listingType: listingType })),
             // Built per render because whether stock is required depends on the
             // listing type's own plugin — a digital code has no stock to speak of.

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

@@ -5,6 +5,18 @@ export interface SellerProductsFilterFieldsProps {
         id: string;
         label: string;
     }>;
+    /**
+     * The stock-level options, PASSED IN rather than declared here.
+     *
+     * They are derived from `LOW_STOCK_THRESHOLD`, and the predicate that reads
+     * the chosen value lives in `SellerProductsView` beside them — so declaring
+     * a second copy of the labels here is how the picker and the filter end up
+     * disagreeing about what "low" means.
+     */
+    stockStateOptions: {
+        value: string;
+        label: string;
+    }[];
     onChange: (next: Record<string, string>) => void;
 }
-export declare function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }: SellerProductsFilterFieldsProps): React.JSX.Element;
+export declare function SellerProductsFilterFields({ pendingFilters, statusOptions, stockStateOptions, onChange, }: SellerProductsFilterFieldsProps): React.JSX.Element;

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

@@ -12,7 +12,7 @@ const CONDITION_OPTIONS = [
     { value: "refurbished", label: "Refurbished" },
     { value: "for-parts", label: "For parts" },
 ];
-export function SellerProductsFilterFields({ pendingFilters, statusOptions, onChange, }) {
+export function SellerProductsFilterFields({ pendingFilters, statusOptions, stockStateOptions, onChange, }) {
     const patch = (k, v) => onChange({ ...pendingFilters, [k]: v });
-    return (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(FilterChipGroup, { label: "Status", tabs: statusOptions, value: pendingFilters.status ?? "", onChange: (id) => patch("status", id) }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Category" }), _jsx(CategoryInlineSelect, { value: pendingFilters.category ?? "", onChange: (v) => patch("category", v), placeholder: "Search categories\u2026" })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Brand" }), _jsx(BrandInlineSelect, { value: pendingFilters.brand ?? "", onChange: (v) => patch("brand", v), placeholder: "Search brands\u2026", allowCreate: false })] }), _jsx(FieldSelect, { name: "condition", label: "Condition", value: pendingFilters.condition ?? "", onChange: (v) => patch("condition", v), options: CONDITION_OPTIONS }), _jsxs(Stack, { gap: "xs", children: [_jsx(FieldSelect, { name: "stockState", label: "Stock level", value: pendingFilters.stockState ?? "", onChange: (v) => patch("stockState", v), options: stockStateOptions }), _jsx(Text, { size: "xs", color: "muted", children: "Applied to the listings on this page." })] }), _jsxs(Stack, { gap: "xs", children: [_jsx(Text, { size: "xs", weight: "semibold", color: "muted", transform: "uppercase", children: "Price (\u20B9 Rupees)" }), _jsxs(Row, { gap: "sm", children: [_jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "minPrice", type: "number", min: 0, value: pendingFilters.minPrice ?? "", onChange: (v) => patch("minPrice", v), placeholder: "min" }) }), _jsx(Div, { className: "flex-1", children: _jsx(FieldInput, { name: "maxPrice", type: "number", min: 0, value: pendingFilters.maxPrice ?? "", onChange: (v) => patch("maxPrice", v), placeholder: "max" }) })] })] }), _jsx(FieldInput, { name: "tags", label: "Tags (comma-separated)", type: "text", value: pendingFilters.tags ?? "", onChange: (v) => patch("tags", v), placeholder: "pokemon, vintage, holo" }), _jsx(FieldInput, { name: "badges", label: "Badges (feature slugs)", type: "text", value: pendingFilters.badges ?? "", onChange: (v) => patch("badges", v), placeholder: "feature-free-shipping, feature-verified" })] }));
 }

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

@@ -1,8 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { formatPhysicalLocation } from "../../../utils/physical-location";
 import { normalizeError } from "../../../errors/normalize";
 import { toUserMessage } from "../../../errors/error-display-map";
 import { SIEVE_OP, Stack, sieveFilter } from "@mohasinac/appkit/client";
+import { LOW_STOCK_THRESHOLD } from "../../store-extensions/constants/alert-metrics";
 import { sortBy } from "@mohasinac/appkit/client";
 import { useState, useCallback } from "react";
 import { useEntityDelete } from "../../../react/hooks/useEntityDelete";
@@ -39,7 +41,55 @@ const FILTER_KEYS = [
     "tags",
     "badges",
     "listingType",
+    /*
+     * The stock quick-filter. `FILTER_KEYS` had no stock key at all — stock
+     * appeared only inside a row's subtitle string, so there was no way to ask
+     * "what needs restocking" short of reading every row.
+     *
+     * Registered here (not in `buildExtraParams`) because it IS a drawer facet:
+     * it narrows the list the way `condition` does, so it should inflate the
+     * filter badge and be cleared by the drawer's Clear button. That is the
+     * opposite call from the availability SCOPE, which is a tab and deliberately
+     * stays out of `filterKeys` so a tab selection cannot be silently reset by
+     * Clear.
+     */
+    "stockState",
 ];
+/**
+ * 🛑 Applied IN MEMORY, never as a Firestore clause.
+ *
+ * `availableQuantity <= N` is an inequality, and Firestore appends an
+ * inequality's field to the `orderBy` implicitly — so pairing one with the
+ * default `-createdAt` sort demands a composite index nobody declares, and the
+ * `FAILED_PRECONDITION` gets swallowed into an empty page (Root Cause #59).
+ * Same reasoning as the alert evaluator's `low_stock` branch.
+ *
+ * The honest cost is that it filters the PAGE rather than the collection: a
+ * seller on page 1 of 200 listings sees the low-stock rows from those 50. That
+ * is stated in the facet's own label rather than left for them to infer.
+ */
+const STOCK_STATE_OPTIONS = [
+    { value: "", label: "Any stock level" },
+    { value: "low", label: `Low — ${LOW_STOCK_THRESHOLD} or fewer left` },
+    { value: "out", label: "Out of stock" },
+    { value: "in", label: "In stock" },
+];
+function matchesStockState(stockValue, state) {
+    if (!state)
+        return true;
+    // 🛑 An unknown quantity matches NOTHING rather than everything. A listing
+    // whose stock the API did not report is not evidence of being low, and
+    // including it would put rows a seller cannot act on into a worklist.
+    if (stockValue == null)
+        return false;
+    if (state === "out")
+        return stockValue <= 0;
+    if (state === "low")
+        return stockValue > 0 && stockValue <= LOW_STOCK_THRESHOLD;
+    if (state === "in")
+        return stockValue > LOW_STOCK_THRESHOLD;
+    return true;
+}
 const DEFAULT_SORT = "-createdAt";
 const SORT_OPTIONS = [
     { value: sortBy("createdAt", "DESC"), label: "Newest" },
@@ -86,6 +136,43 @@ const PRODUCT_COLUMNS = [
         className: "w-28 text-right",
         render: (row) => (_jsx(Span, { size: "sm", weight: "medium", className: "text-[var(--appkit-color-text)]", children: row.price })),
     },
+    /*
+     * 🛑 `row.stock` was COMPUTED in `mapRows` and no column rendered it.
+     *
+     * Data fetched and discarded — Root Cause #52's shape — and the reason it
+     * stayed invisible is that the figure also appears inside the row's
+     * `secondary` string, so the information was technically on screen while
+     * being unsortable, unfilterable and impossible to scan down a column.
+     *
+     * Both stock fields have been `canFilter`/`canSort` at the repository layer
+     * the whole time; only the view omitted them.
+     */
+    {
+        key: "stock",
+        header: "Stock",
+        className: "w-24 text-right",
+        render: (row) => {
+            if (row.stockValue == null)
+                return _jsx(Span, { size: "xs", color: "faint", children: "\u2014" });
+            /*
+             * Three states, not two, and the middle one is the point of the column.
+             * `LOW_STOCK_THRESHOLD` is imported rather than re-picked here: the
+             * alert, this column and the dashboard tile must agree on what "low"
+             * means, or a seller gets a warning from one and a clean bill from
+             * another.
+             */
+            /*
+             * Three states, and `Span` has no `warning` variant — so "low" is
+             * carried by WEIGHT plus a suffix rather than by colour alone. That is
+             * better anyway: `audit-a11y` records that white-on-warning fails
+             * contrast in this theme set, and a status conveyed only by colour is
+             * invisible to a colour-blind seller.
+             */
+            const isOut = row.stockValue <= 0;
+            const isLow = !isOut && row.stockValue <= LOW_STOCK_THRESHOLD;
+            return (_jsxs(Span, { size: "sm", weight: isOut || isLow ? "semibold" : "normal", color: isOut ? "error" : isLow ? "primary" : "muted", children: [row.stockValue, isOut ? " · out" : isLow ? " · low" : ""] }));
+        },
+    },
     {
         key: "status",
         header: "Status",
@@ -109,7 +196,13 @@ const PRODUCT_COLUMNS = [
         key: "physicalLocation",
         header: "Location",
         className: "w-28",
-        render: (row) => row.physicalLocation ? (_jsxs(Span, { size: "xs", className: "font-mono text-[var(--appkit-color-text-muted)]", children: [row.physicalLocation.zone, "/", row.physicalLocation.shelf, "/", row.physicalLocation.bin] })) : (_jsx(Span, { size: "xs", color: "faint", children: "\u2014" })),
+        render: (row) => {
+            // One formatter, shared with SellerOrdersView and PrintCenterView. It
+            // also returns undefined for an all-blank location, which the bulk
+            // routes genuinely allow — this used to print a bare "//".
+            const loc = formatPhysicalLocation(row.physicalLocation);
+            return loc ? (_jsx(Span, { size: "xs", className: "font-mono text-[var(--appkit-color-text-muted)]", children: loc })) : (_jsx(Span, { size: "xs", color: "faint", children: "\u2014" }));
+        },
     },
 ];
 export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
@@ -288,7 +381,9 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                  * reserve and the current bid, both already in `auctionSecondary`, and
                  * a "price" beside them would read as a third, competing figure.
                  */
+                const availableRaw = typeof item.availableQuantity === "number" ? item.availableQuantity : null;
                 const stockRaw = typeof item.stockQuantity === "number" ? item.stockQuantity : null;
+                const stockValue = availableRaw ?? stockRaw;
                 const priceLabel = kind !== "auction" && priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "";
                 const stockLabel = stockRaw === null ? "" : `${stockRaw} in stock`;
                 const secondaryBase = auctionSecondary || toStringValue(item.condition, "");
@@ -303,13 +398,23 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
                     listingKind: kind,
                     price: priceRaw ? `₹${priceRaw.toLocaleString("en-IN")}` : "—",
                     stock: stockLabel || "—",
+                    stockValue,
                     physicalLocation: item.physicalLocation &&
                         typeof item.physicalLocation.zone === "string"
                         ? item.physicalLocation
                         : undefined,
                 };
             });
-            return rows.filter((r) => !deletedIds.has(r.id)).map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
+            /*
+             * The stock predicate runs HERE, in the same pass that already drops
+             * optimistically-deleted rows and applies status overrides — so there is
+             * one place a row can be removed from the rendered list rather than two
+             * that could disagree about which rows exist.
+             */
+            const stockState = sideTable.get("stockState") ?? "";
+            return rows
+                .filter((r) => !deletedIds.has(r.id) && matchesStockState(r.stockValue, stockState))
+                .map((r) => statusOverrides.has(r.id) ? { ...r, status: statusOverrides.get(r.id) } : r);
         },
         getTotal: (response, mappedRows) => typeof response.meta?.total === "number" ? response.meta.total : mappedRows.length,
         buildFilters: (state) => {
@@ -321,7 +426,7 @@ export function SellerProductsView({ onDeleteProduct, onCreateClick, }) {
             // same rows. The scope param carries the per-type meaning instead.
             return [statusFilter, kindFilter].filter(Boolean).join(",") || undefined;
         },
-        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(SellerProductsFilterFields, { pendingFilters: pendingFilters, statusOptions: STATUS_OPTIONS, onChange: setPendingFilters })),
+        renderFilterPanel: ({ pendingFilters, setPendingFilters }) => (_jsx(SellerProductsFilterFields, { pendingFilters: pendingFilters, statusOptions: STATUS_OPTIONS, stockStateOptions: STOCK_STATE_OPTIONS, onChange: setPendingFilters })),
         buildExtraParams: () => scope.extraParams,
         renderAboveContent: () => (_jsxs(Stack, { gap: "sm", children: [_jsx(TypeDropdown, { active: listingKind, onChange: handleKindChange }), scope.renderAboveContent()] })),
         buildBulkActions: (selection) => {

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

@@ -76,6 +76,23 @@ export interface SellerDashboardStats {
     totalRevenue: number;
     pendingPayouts: number;
     activeListings: number;
+    /**
+     * Published listings at or below `LOW_STOCK_THRESHOLD`, and at zero.
+     *
+     * 🛑 Two numbers rather than one "needs attention" count, because the two
+     * call for different actions: low means reorder, out means the listing
+     * cannot be bought right now. A combined figure hides which.
+     *
+     * Both from `availableQuantity`, not `stockQuantity` — purchasability gates
+     * on the first in three places, and reporting the second would tell a seller
+     * they have stock while buyers cannot buy.
+     *
+     * Optional because a store that does not exist yet returns the zeroed
+     * payload, and because an older client reading a newer field is a nicer
+     * failure than a required field a stale route omits.
+     */
+    lowStockListings?: number;
+    outOfStockListings?: number;
     totalOrders: number;
     pendingOrders: number;
     averageRating?: number;