Store Products Admin

Code

<ProductAdminList  products={products}  currency="USD"  onOpen={(p) => router.push(`/products/${p.id}`)}  onCreate={() => router.push("/products/new")}  onBulkEdit={async (ids, edit) => api.bulkEdit(ids, edit)}/><ProductEditor  initial={productToDraft(product, { cost: 4000 })}  currency="USD"  siteUrl="https://shop.example"  onSave={async (draft) => api.saveProduct(draft)}/>

Store Admin · beta

Live examples and controls: Store Products Admin in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/store-products-admin.json

Everything a merchant needs to manage the catalogue: a product list with search, filters and bulk edit of price, stock and status; a product editor with pictures, price and margin, inventory, options that build a variant matrix, and a search listing preview; and a collections manager where a collection is picked by hand or filled by rules with a live match preview. Money is integer minor units. The components hold no data and call no API: you pass the catalogue and save in on* callbacks.

When to useCopy Anchor Link

• A store back office: products, variants, stock, collections.

When not to useCopy Anchor Link

• Showing products to shoppers: use product-card, product-detail and the listing components.
• Stock movements and warehouses: use stock-ledger.

ImportCopy Anchor Link

import { ProductAdminList, ProductEditor, CollectionsManager, productToDraft } from "@fadymondy/nasaq/web";

Quick startCopy Anchor Link

<ProductAdminList
  products={products}
  currency="USD"
  onOpen={(p) => router.push(`/products/${p.id}`)}
  onCreate={() => router.push("/products/new")}
  onBulkEdit={async (ids, edit) => api.bulkEdit(ids, edit)}
/>

<ProductEditor
  initial={productToDraft(product, { cost: 4000 })}
  currency="USD"
  siteUrl="https://shop.example"
  onSave={async (draft) => api.saveProduct(draft)}
/>

AnatomyCopy Anchor Link

ProductAdminList   [data-slot=product-list]   DataTable + bulk edit dialog + delete confirm
ProductEditor      [data-slot=product-editor]       form of cards, sticky save bar
  MediaManager     [data-slot=media-manager]        sortable picture tiles [data-slot=media-tile]
  OptionsEditor    [data-slot=options-editor]
  VariantMatrix    [data-slot=variant-matrix]
CollectionsManager [data-slot=collections-manager]  cards + editor dialog with RuleBuilder and match preview

APICopy Anchor Link

ProductAdminListCopy Anchor Link

ProductEditorCopy Anchor Link

Changing options regenerates the variants with generateVariants: a variant whose option values still exist keeps its price, compare-at, SKU, stock and image. Removed combinations are named in a notice; the matrix is capped at 100.

MediaManager, OptionsEditor, VariantMatrixCopy Anchor Link

MediaManager({ images, onImagesChange, maxImages = 12, disabled, labels }), OptionsEditor({ options, onOptionsChange, maxOptions = 3, disabled, labels }), VariantMatrix({ options, variants, onVariantsChange, currency, images, disabled, labels }). All are controlled.

CollectionsManagerCopy Anchor Link

Logic (pure, also exported)Copy Anchor Link

generateVariants, bulkFillVariants, bulkEditProducts, bulkPrice, marginFromCost, priceForMargin, stockSummary, matchCollection, collectionsOfProduct, validateProductDraft, productToDraft, draftToProduct, draftChanged, emptyProductDraft, decimalToMinor, optionCombinations, variantLabel, duplicateSkus. They use integer maths only.

ExamplesCopy Anchor Link

// A rule collection: products tagged "summer" under 500
const collection: CollectionDef = {
  id: "c1",
  title: "Summer under 500",
  kind: "rules",
  conditions: { kind: "group", id: "g", join: "and", children: [
    { kind: "condition", id: "a", field: "tag", op: "is", value: "summer" },
    { kind: "condition", id: "b", field: "price", op: "lt", value: "500" },
  ] },
};
matchCollection(products, collection, { minorPerMajor: 100 });

AccessibilityCopy Anchor Link

Moves are announced in a live region. Missing alt text is counted and flagged. Every icon-only button has a label.

RTL & i18nCopy Anchor Link

English and Arabic built in through useOptionalNasaq(). SKUs, prices and numbers stay LTR inside dir="ltr" or <bdi>. Chevrons flip in RTL.

Styling & tokensCopy Anchor Link

Uses --nq-* tokens only. Target data-slot names above; data-dragging marks a picture being dragged.

Do / Don'tCopy Anchor Link

• Do pass prices in minor units. Don't pass floats.
• Do give every picture alt text.
• Don't rely on client validation alone: check again on the server.

RelatedCopy Anchor Link

• store-settings
• data-table
• rule-builder

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-store-admin-store-products-admin--docs