ProductStockBadge

Import

import { ProductStockBadge } from '@tallyui/components';

Usage

<ProductStockBadge doc={productDocument} />
<ProductStockBadge doc={productDocument} showQuantity />

Renders a pill-shaped badge with status-appropriate colors:

In Stock — bg-success/15 text-success
Out of Stock — bg-destructive/15 text-destructive
On Backorder — bg-warning/15 text-warning
Unknown — bg-muted/15 text-muted-foreground

Props

Prop	Type	Default	Description
`doc`	`any`	required	RxDB product document
`showQuantity`	`boolean`	`false`	Show quantity alongside status
`showAsOf`	`boolean`	`true`	Show when reconciled stock was last confirmed
`className`	`string`	—	Override badge container styles

Reconciled stock

When the connector reconciles stock (reconcile.stock), pass the overlay and its "as of" time to ConnectorProvider. The badge then shows reconciled stock, followed by · as of 14:05.

const overlay = useObservable(stockOverlay$(db.stock_levels));
const asOf = useObservable(stockOverlayAsOf$(db.stock_levels));

<ConnectorProvider connector={connector} stockOverlay={overlay} stockOverlayAsOf={asOf}>
  <ProductStockBadge doc={productDocument} />
</ConnectorProvider>

stockOverlay$ and stockOverlayAsOf$ come from @tallyui/pos; useObservable stands for any hook that subscribes to an observable.

Trait mapping

Connector	Stock status source	Quantity source
WooCommerce	`doc.stock_status`	`doc.stock_quantity`
Medusa	Derived from `variant.manage_inventory` / `inventory_quantity`	`doc.variants[0].inventory_quantity`
Shopify	Derived from `variant.inventory_management` / `inventory_policy` / `inventory_quantity`	`doc.variants[0].inventory_quantity`
Vendure	`variant.stockLevel` string (`IN_STOCK`, `OUT_OF_STOCK`, `LOW_STOCK`)	`doc.variants[0].stockOnHand` (Admin API only)