Components

Pricing Engine Panel

Pricing Engine Panel component.

Client Only

Installation

pnpm dlx @docyrus/cli add @docyrus/ui-pricing-engine-panel
UI Primitives(13 components)
npx shadcn@latest add badge button command input popover scroll-area select separator switch table tabs textarea tooltip

Usage

import {
  PricingEnginePanel
} from "@docyrus/ui/components/pricing-engine-panel";
import type {
  PricingEnginePanelProps,
  TPricingViewMode,
  TDiscountMode,
  TPricingDocumentStatus,
  ILineItem,
  ILineItemCalculated,
  ILineItemRow,
  ITotals,
  IVatSummaryRow,
  ICurrencyConfig,
  IPricingConfig,
  IPricingDocumentData,
  IProductCatalogItem,
  ICategoryCatalogItem
} from "@docyrus/ui/components/pricing-engine-panel";

<PricingEnginePanel
  variant="default"
  size="sm"
  ref={...}
  value={...}
  defaultValue={...}
  showVatColumn={true}
  showDiscountColumn={true}
  showGrossColumn={true}
  showCategoryColumn={true}
  discountBeforeVat={true}
  enableVat={true}
  enableLineDiscount={true}
  enableGlobalDiscount={true}
  enableAdjustment={true}
  defaultVatRate={18}
  vatRates={[     0}
  defaultCurrency="USD"
  viewMode="net"
  onLineItemsChange={(items: ILineItem) = void[]}
  onTotalsChange={() => {}}
  onSave={() => {}}
  onSaveDraft={() => {}}
  onProductSelect={() => {}}
  onCategorySelect={() => {}}
  productCatalog={IProductCatalogItem[]}
  categoryCatalog={ICategoryCatalogItem[]}
  title="..."
  showDescription={true}
  showTerms={true}
  showActions={true}
/>

Variants

VariantDescription
defaultDefault style
borderedBordered — border-2 shadow-sm
compactCompact — text-xs [&_input]:h-7 [&_input]:text-xs

Sizes

SizeDescription
smSmall — max-w-3xl mx-auto
defaultDefault — max-w-5xl mx-auto
lgLarge
fullfull — w-full

API Reference

PropTypeDefault
variant"default" | "bordered" | "compact""default"
size"sm" | "default" | "lg" | "full""default"
refRef<HTMLDivElement>—
valuePartial<IPricingDocumentData>—
defaultValuePartial<IPricingDocumentData>—
showVatColumnbooleantrue
showDiscountColumnbooleantrue
showGrossColumnbooleantrue
showCategoryColumnbooleantrue
discountBeforeVatbooleantrue
enableVatbooleantrue
enableLineDiscountbooleantrue
enableGlobalDiscountbooleantrue
enableAdjustmentbooleantrue
defaultVatRatenumber18
vatRatesnumber[][ 0
defaultCurrencystring'USD'
viewModeTPricingViewMode'net'
onLineItemsChange(items: ILineItem[]) => void—
onTotalsChange(totals: ITotals) => void—
onSave(data: IPricingDocumentData) => void—
onSaveDraft(data: IPricingDocumentData) => void—
onProductSelect(lineId: string, callback: (product: IProductCatalogItem) => void) => void—
onCategorySelect(lineId: string, callback: (category: ICategoryCatalogItem) => void) => void—
productCatalogIProductCatalogItem[]—
categoryCatalogICategoryCatalogItem[]—
titlestring—
readOnlybooleanfalse
showDescriptionbooleantrue
showTermsbooleantrue
showActionsbooleantrue
classNamestring—

Components

ComponentDescription
PricingEnginePanelPublic export
PricingActionsBarInternal — pricing-actions-bar.tsx
PricingCategoryCellInternal — pricing-category-cell.tsx
PricingConfigPopoverInternal — pricing-config-popover.tsx
PricingContentSectionInternal — pricing-content-section.tsx
PricingCurrencyBarInternal — pricing-currency-bar.tsx
PricingDiscountSectionInternal — pricing-discount-section.tsx
PricingHeaderInternal — pricing-header.tsx
PricingLineRowActionsInternal — pricing-line-row-actions.tsx
PricingLineRowInternal — pricing-line-row.tsx
PricingLineTableInternal — pricing-line-table.tsx
PricingProductCellInternal — pricing-product-cell.tsx
PricingTotalsSectionInternal — pricing-totals-section.tsx
PricingVatSummaryInternal — pricing-vat-summary.tsx
PricingEngineProviderInternal — contexts/pricing-context.tsx

Type Exports

TypeDescription
PricingEnginePanelProps—
TPricingViewMode—
TDiscountMode—
TPricingDocumentStatus—
ILineItem—
ILineItemCalculated—
ILineItemRow—
ITotals—
IVatSummaryRow—
ICurrencyConfig—
IPricingConfig—
IPricingDocumentData—
IProductCatalogItem—
ICategoryCatalogItem—

Type Reference

PricingEnginePanelProps

FieldTypeDescription
refRef<HTMLDivElement>—
valuePartial<IPricingDocumentData>—
defaultValuePartial<IPricingDocumentData>—
showVatColumnboolean—
showDiscountColumnboolean—
showGrossColumnboolean—
showCategoryColumnboolean—
discountBeforeVatboolean—
enableVatboolean—
enableLineDiscountboolean—
enableGlobalDiscountboolean—
enableAdjustmentboolean—
defaultVatRatenumber—
vatRatesnumber[]—
defaultCurrencystring—
viewModeTPricingViewMode—
onLineItemsChange(items: ILineItem[]) => void—
onTotalsChange(totals: ITotals) => void—
onSave(data: IPricingDocumentData) => void—
onSaveDraft(data: IPricingDocumentData) => void—
onProductSelect(lineId: string, callback: (product: IProductCatalogItem) => void) => void—
onCategorySelect(lineId: string, callback: (category: ICategoryCatalogItem) => void) => void—
productCatalogIProductCatalogItem[]—
categoryCatalogICategoryCatalogItem[]—
titlestring—
readOnlyboolean—
showDescriptionboolean—
showTermsboolean—
showActionsboolean—
variant'default' | 'bordered' | 'compact'—
size'sm' | 'default' | 'lg' | 'full'—

TPricingViewMode

"net" | "gross"

TDiscountMode

"before-vat" | "after-vat"

TPricingDocumentStatus

"draft" | "saved"

ILineItem

FieldTypeDescription
idstring—
positionnumber—
productIdstring | null—
categoryIdstring | null—
namestring—
categorystring—
quantitynumber—
unitPricenumber—
vatRatenumber—
discountPercentnumber—

ILineItemCalculated

FieldTypeDescription
lineSubtotalnumber—
discountAmountnumber—
netAfterDiscountnumber—
vatAmountnumber—
grossTotalnumber—

ILineItemRow

FieldTypeDescription

ITotals

FieldTypeDescription
subtotalnumber—
lineDiscountTotalnumber—
globalDiscountAmountnumber—
totalDiscountnumber—
netTotalnumber—
vatTotalnumber—
adjustmentnumber—
grandTotalnumber—

IVatSummaryRow

FieldTypeDescription
ratenumber—
taxableAmountnumber—
vatAmountnumber—

ICurrencyConfig

FieldTypeDescription
codestring—
secondaryCurrencyCodestring | null—
exchangeRatenumber—

IPricingConfig

FieldTypeDescription
showVatColumnboolean—
showDiscountColumnboolean—
showGrossColumnboolean—
showCategoryColumnboolean—
discountBeforeVatboolean—
enableVatboolean—
enableLineDiscountboolean—
enableGlobalDiscountboolean—
enableAdjustmentboolean—
defaultVatRatenumber—
vatRatesnumber[]—
viewModeTPricingViewMode—

IPricingDocumentData

FieldTypeDescription
lineItemsILineItem[]—
globalDiscountPercentnumber—
adjustmentnumber—
currencyICurrencyConfig—
configIPricingConfig—
descriptionstring—
termsAndConditionsstring—
statusTPricingDocumentStatus—
totalsITotals—

IProductCatalogItem

FieldTypeDescription
idstring—
namestring—
categorystring—
categoryIdstring—
unitPricenumber—
vatRatenumber—

ICategoryCatalogItem

FieldTypeDescription
idstring—
namestring—
parentIdstring | null—
childrenICategoryCatalogItem[]—

On this page