Components
Client Only
Installation
pnpm dlx @docyrus/cli add @docyrus/ui-pricing-engine-panelUI Primitives(13 components)
npx shadcn@latest add badge button command input popover scroll-area select separator switch table tabs textarea tooltipUsage
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
| Variant | Description |
|---|---|
default | Default style |
bordered | Bordered — border-2 shadow-sm |
compact | Compact — text-xs [&_input]:h-7 [&_input]:text-xs |
Sizes
| Size | Description |
|---|---|
sm | Small — max-w-3xl mx-auto |
default | Default — max-w-5xl mx-auto |
lg | Large |
full | full — w-full |
API Reference
| Prop | Type | Default |
|---|---|---|
variant | "default" | "bordered" | "compact" | "default" |
size | "sm" | "default" | "lg" | "full" | "default" |
ref | Ref<HTMLDivElement> | — |
value | Partial<IPricingDocumentData> | — |
defaultValue | Partial<IPricingDocumentData> | — |
showVatColumn | boolean | true |
showDiscountColumn | boolean | true |
showGrossColumn | boolean | true |
showCategoryColumn | boolean | true |
discountBeforeVat | boolean | true |
enableVat | boolean | true |
enableLineDiscount | boolean | true |
enableGlobalDiscount | boolean | true |
enableAdjustment | boolean | true |
defaultVatRate | number | 18 |
vatRates | number[] | [ 0 |
defaultCurrency | string | 'USD' |
viewMode | TPricingViewMode | '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 | — |
productCatalog | IProductCatalogItem[] | — |
categoryCatalog | ICategoryCatalogItem[] | — |
title | string | — |
readOnly | boolean | false |
showDescription | boolean | true |
showTerms | boolean | true |
showActions | boolean | true |
className | string | — |
Components
| Component | Description |
|---|---|
PricingEnginePanel | Public export |
PricingActionsBar | Internal — pricing-actions-bar.tsx |
PricingCategoryCell | Internal — pricing-category-cell.tsx |
PricingConfigPopover | Internal — pricing-config-popover.tsx |
PricingContentSection | Internal — pricing-content-section.tsx |
PricingCurrencyBar | Internal — pricing-currency-bar.tsx |
PricingDiscountSection | Internal — pricing-discount-section.tsx |
PricingHeader | Internal — pricing-header.tsx |
PricingLineRowActions | Internal — pricing-line-row-actions.tsx |
PricingLineRow | Internal — pricing-line-row.tsx |
PricingLineTable | Internal — pricing-line-table.tsx |
PricingProductCell | Internal — pricing-product-cell.tsx |
PricingTotalsSection | Internal — pricing-totals-section.tsx |
PricingVatSummary | Internal — pricing-vat-summary.tsx |
PricingEngineProvider | Internal — contexts/pricing-context.tsx |
Type Exports
| Type | Description |
|---|---|
PricingEnginePanelProps | — |
TPricingViewMode | — |
TDiscountMode | — |
TPricingDocumentStatus | — |
ILineItem | — |
ILineItemCalculated | — |
ILineItemRow | — |
ITotals | — |
IVatSummaryRow | — |
ICurrencyConfig | — |
IPricingConfig | — |
IPricingDocumentData | — |
IProductCatalogItem | — |
ICategoryCatalogItem | — |
Type Reference
PricingEnginePanelProps
| Field | Type | Description |
|---|---|---|
ref | Ref<HTMLDivElement> | — |
value | Partial<IPricingDocumentData> | — |
defaultValue | Partial<IPricingDocumentData> | — |
showVatColumn | boolean | — |
showDiscountColumn | boolean | — |
showGrossColumn | boolean | — |
showCategoryColumn | boolean | — |
discountBeforeVat | boolean | — |
enableVat | boolean | — |
enableLineDiscount | boolean | — |
enableGlobalDiscount | boolean | — |
enableAdjustment | boolean | — |
defaultVatRate | number | — |
vatRates | number[] | — |
defaultCurrency | string | — |
viewMode | TPricingViewMode | — |
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 | — |
productCatalog | IProductCatalogItem[] | — |
categoryCatalog | ICategoryCatalogItem[] | — |
title | string | — |
readOnly | boolean | — |
showDescription | boolean | — |
showTerms | boolean | — |
showActions | boolean | — |
variant | 'default' | 'bordered' | 'compact' | — |
size | 'sm' | 'default' | 'lg' | 'full' | — |
TPricingViewMode
"net" | "gross"
TDiscountMode
"before-vat" | "after-vat"
TPricingDocumentStatus
"draft" | "saved"
ILineItem
| Field | Type | Description |
|---|---|---|
id | string | — |
position | number | — |
productId | string | null | — |
categoryId | string | null | — |
name | string | — |
category | string | — |
quantity | number | — |
unitPrice | number | — |
vatRate | number | — |
discountPercent | number | — |
ILineItemCalculated
| Field | Type | Description |
|---|---|---|
lineSubtotal | number | — |
discountAmount | number | — |
netAfterDiscount | number | — |
vatAmount | number | — |
grossTotal | number | — |
ILineItemRow
| Field | Type | Description |
|---|
ITotals
| Field | Type | Description |
|---|---|---|
subtotal | number | — |
lineDiscountTotal | number | — |
globalDiscountAmount | number | — |
totalDiscount | number | — |
netTotal | number | — |
vatTotal | number | — |
adjustment | number | — |
grandTotal | number | — |
IVatSummaryRow
| Field | Type | Description |
|---|---|---|
rate | number | — |
taxableAmount | number | — |
vatAmount | number | — |
ICurrencyConfig
| Field | Type | Description |
|---|---|---|
code | string | — |
secondaryCurrencyCode | string | null | — |
exchangeRate | number | — |
IPricingConfig
| Field | Type | Description |
|---|---|---|
showVatColumn | boolean | — |
showDiscountColumn | boolean | — |
showGrossColumn | boolean | — |
showCategoryColumn | boolean | — |
discountBeforeVat | boolean | — |
enableVat | boolean | — |
enableLineDiscount | boolean | — |
enableGlobalDiscount | boolean | — |
enableAdjustment | boolean | — |
defaultVatRate | number | — |
vatRates | number[] | — |
viewMode | TPricingViewMode | — |
IPricingDocumentData
| Field | Type | Description |
|---|---|---|
lineItems | ILineItem[] | — |
globalDiscountPercent | number | — |
adjustment | number | — |
currency | ICurrencyConfig | — |
config | IPricingConfig | — |
description | string | — |
termsAndConditions | string | — |
status | TPricingDocumentStatus | — |
totals | ITotals | — |
IProductCatalogItem
| Field | Type | Description |
|---|---|---|
id | string | — |
name | string | — |
category | string | — |
categoryId | string | — |
unitPrice | number | — |
vatRate | number | — |
ICategoryCatalogItem
| Field | Type | Description |
|---|---|---|
id | string | — |
name | string | — |
parentId | string | null | — |
children | ICategoryCatalogItem[] | — |