Component Library

Every component below is available in any .md or .mdx page with no import statement — they are registered once in astro.config.ts and auto-imported. Each section shows the component rendered, then the MDX that produced it.

The implementations live in src/components/docs/. They are deliberately small and self-contained so you can read one, understand it, and adapt it.

Callouts

Five severities, one implementation. Use the severity that matches the consequence of ignoring the text — not the one that gets attention.

<Note>General information.</Note>
<Tip>A shortcut or best practice.</Tip>
<Important>Must know to get the right result.</Important>
<Warning>Awkward to undo.</Warning>
<Danger>Destructive or irreversible.</Danger>

A custom title replaces the default heading, and title="" removes the heading row:

<Callout type="warning" title="Check the financial year first">
Posting into a closed period needs an administrator.
</Callout>

<Callout type="note" title="">
A callout with no heading.
</Callout>

Procedures

Steps

<Steps> numbers its children automatically, so inserting a step never means renumbering the rest.

Open the screen

Navigate to the screen and click New.

Complete the required fields

Fields marked with a red asterisk are mandatory.

Savetakes a moment

Click Save. A number is allocated.

<Steps>
  <Step title="Open the screen">Navigate to the screen and click **New**.</Step>
  <Step title="Complete the required fields">
    Fields marked with a red asterisk are mandatory.
  </Step>
  <Step title="Save" note="takes a moment">Click **Save**.</Step>
</Steps>

A standalone step with an explicit number works too:

Step 3:Save the Sales Order

Click Save to create the Sales Order.

<Step number="3" title="Save the Sales Order">
Click **Save** to create the Sales Order.
</Step>

Procedure, Prerequisites and ExpectedResult

Create a customer

BeginnerData Administrator4 min

Before you begin

You have the Create permission for Customer Master
The customer group exists

Open the Customer screen

Go to Masters → Parties → Customer.

Enter the details and save

Complete the mandatory fields, then Save.

Expected result

The customer is saved with a code such as CUS/00318 and appears in sales lookups.

<Procedure title="Create a customer" role="Data Administrator" time="4 min">
  <Prerequisites items={['You have the Create permission']} />
  <Steps>
    <Step title="Open the Customer screen">Go to **Masters → Parties → Customer**.</Step>
  </Steps>
  <ExpectedResult>The customer is saved with a code such as `CUS/00318`.</ExpectedResult>
</Procedure>

NavPath

Navigate to

Sales
Transactions
Sales Order

Go to

Masters
Parties
Customer
New

<NavPath path="Sales > Transactions > Sales Order" />
<NavPath path={['Masters', 'Parties', 'Customer']} label="Go to" />

Checklist

Ticks persist in the reader’s browser, scoped to the page and the id.

Trainee checklist

Created a customer with a credit limit
Raised a sales order for three line items
Converted the order to an invoice

<Checklist
  id="component-demo"
  title="Trainee checklist"
  items={['Created a customer', 'Raised a sales order']}
/>

Screenshots

Sizes and captions

Every generated screenshot ships as a light/dark pair, swapped by CSS with no flash. Click one to enlarge it.

Sales Order entry screen showing header fields and a line item grid. — Full width — the default. Use it for whole-screen captures.

Customer lookup dialog. — size="md" — for dialogs and partial captures.

Sign-in screen. — size="sm" — for a small detail.

A confirmed sales order. — border={false} zoom={false} — no frame, not clickable.

<Screenshot
  src="/images/bpp/sales/sales-order.svg"
  caption="The Sales Order screen."
  alt="Sales Order entry screen showing header fields and a line item grid."
/>

<Screenshot src="/images/bpp/sales/sales-order-customer.svg" size="md" alt="Customer lookup." />
<Screenshot src="/images/bpp/real-capture.png" dual={false} alt="A real screenshot with no dark twin." />

ScreenshotGallery

The order-to-cash cycle

<ScreenshotGallery
  title="The order-to-cash cycle"
  columns={3}
  items={[
    { src: '/images/bpp/sales/quotation.svg', caption: 'Quotation', alt: 'Quotation screen.' },
    { src: '/images/bpp/sales/sales-order.svg', caption: 'Sales Order', alt: 'Order screen.' },
  ]}
/>

TrainingVideo

The embed is only loaded when the reader clicks, so a page with three videos is not three times slower.

Creating a sales order end to end

Walks through the full procedure, including the credit limit override.

6:42

<TrainingVideo
  title="Creating a sales order end to end"
  provider="youtube"
  id="dQw4w9WgXcQ"
  duration="6:42"
  poster="/images/bpp/sales/sales-order.svg"
/>

<TrainingVideo title="Posting a receipt" src="/video/receipt.mp4" />

Field reference

Field

CustomerDropdownRequired

Select the customer for this transaction.

Order DateDateRequired

The date the customer placed the order.

Default: Today
Example: 03-10-2026
Limit: Within the open financial year
Validation: Cannot be more than 30 days in the future without the Forward Dating permission.

Order No.AutoRead-only

Allocated from the numbering series on save.

<Field
  name="Customer"
  type="Dropdown"
  required
  description="Select the customer for this transaction."
/>

FieldTable

The workhorse. Below 40rem it becomes a stacked card layout rather than scrolling sideways.

Sales Order header fields
Field	Type	Required	Default	Description	Notes
Order No.	`Auto`	Read-only	—	Allocated from the series on save.	Gap-free
Order Date	`Date`	Yes	`Today`	Date the order was received.
Customer	`Dropdown`	Yes	—	Active customers only.
Reference	`Text`	No	—	The customer's own PO number.

Sales Order header fields

<FieldTable
  caption="Sales Order header fields"
  fields={[
    { name: 'Order No.', type: 'Auto', readonly: true, description: 'Allocated on save.', notes: 'Gap-free' },
    { name: 'Customer', type: 'Dropdown', required: true, description: 'Active customers only.' },
  ]}
/>

ProcessTable

Order to cash
Step	Action	Who	Result
1	Create the sales order	Sales Executive	Status becomes Confirmed
2	Pick and dispatch	Store Keeper	Delivery note generated
3	Raise the invoice	Accounts Clerk	Receivable posted

Order to cash

<ProcessTable
  rows={[
    { action: 'Create the sales order', result: 'Status becomes Confirmed', role: 'Sales Executive' },
    { action: 'Raise the invoice', result: 'Receivable posted', role: 'Accounts Clerk' },
  ]}
/>

Comparison

Row form, when the options differ along the same dimensions:

Aspect	Sales Quotation	Sales Order
Commitment	None — a proposal	Confirmed by the customer
Reserves stock	No	Yes
Can be revised	Freely	Only before dispatch

Column form, for loose pros and cons:

Cash sale

Payment collected immediately
No outstanding to track
No credit check

Credit sale

Credit limit is checked on save
Appears on the Outstanding Report
Payment terms set the due date

<Comparison
  options={['Sales Quotation', 'Sales Order']}
  rows={[{ label: 'Reserves stock', values: ['No', 'Yes'] }]}
/>

<Comparison options={['Cash sale', 'Credit sale']}>
  <Fragment slot="option-1">- Payment collected immediately</Fragment>
  <Fragment slot="option-2">- Credit limit is checked</Fragment>
</Comparison>

KeyboardShortcut and Badge

Press Ctrl+S to save, or Ctrl+Shift+Nfor a new order. Sequences render differently from chords: AltthenF.

Badge variants

DraftNew in 3.0ConfirmedDeprecatedCancelledBeta

Variants map to the same palette as the callouts, so severity reads consistently.

Press <KeyboardShortcut keys="Ctrl + S" /> to save.
<KeyboardShortcut keys="Alt then F" />

<Badge text="Confirmed" variant="success" />
<Badge text="Beta" variant="tip" solid />

Disclosure

Tabs

Give related groups the same sync key and the reader’s choice is remembered across the page and across pages.

Press Ctrl+P to print.

<Tabs sync="platform">
  <TabItem label="Windows">Press <KeyboardShortcut keys="Ctrl + P" /></TabItem>
  <TabItem label="macOS">Press <KeyboardShortcut keys="Cmd + P" /></TabItem>
</Tabs>

Accordion

Order states

What happens to reserved stock when I cancel?Stock

It is released immediately and becomes available to other orders.

Can I edit a confirmed order?Editing

Only the delivery date, narration and reference. For anything else, cancel and re-raise.

How do I short-close an order?Closing

Open the order and click Short Close. The undelivered balance is released and the order becomes Closed.

<Accordion title="Order states" single>
  <AccordionItem title="What happens to reserved stock?" meta="Stock">
    It is released immediately.
  </AccordionItem>
</Accordion>

FAQ

Quick form, for plain-text answers:

Quick FAQ

Can I delete a sales order?

No. Cancel it instead — deleting would break the audit trail.

Why is the customer missing from the list?

The list shows active customers only.

Rich form, when an answer needs Markdown or a link:

Rich FAQ

Why can I not change the rate?

Rates come from the price list, and overriding them needs the Override Pricing permission. See Price List.

How do I part deliver an order?

Raise a delivery note with the quantity being dispatched. The order stays open for the balance.

<FAQ items={[{ question: 'Can I delete a sales order?', answer: 'No. Cancel it instead.' }]} />

<FAQ>
  <FAQItem question="Why can I not change the rate?">
    See [Price List](/bpp/masters/price-list/).
  </FAQItem>
</FAQ>

RelatedDocumentation

Links to another product are labelled automatically, so a cross-product reference is never mistaken for a page in the current manual.

<RelatedDocumentation items={[
  { title: 'Customer Master', href: '/bpp/masters/customer/', description: 'Create the customer first.' },
]} />

<RelatedDocumentation title="Customer Master" href="/bpp/masters/customer/" />

TrainingCard and CardGrid

Creating a Sales Order

Record a confirmed customer order from start to finish.

Beginner12 min

Updated

Raising an Invoice

Create the receivable and post to the ledger.

Intermediate8 min

Collecting Payment

Allocate a receipt against outstanding invoices.

<CardGrid cols={3}>
  <TrainingCard
    title="Creating a Sales Order"
    href="/bpp/sales/sales-order/"
    icon="cart"
    level="Beginner"
    time="12 min"
    description="Record a confirmed customer order."
  />
</CardGrid>

SectionIndex

On a section overview page, <SectionIndex /> lists that section’s pages straight from the navigation config — so an overview can never fall out of step with the sidebar.

Example: the BPP Accounting section

Journal Voucher

Post a manual double-entry adjustment to the ledger.

Receipt Voucher

Record money received that is not tied to a sales invoice.

Payment Voucher

Record money paid out that is not tied to a purchase invoice.

<SectionIndex />
<SectionIndex section="bpp/getting-started" title="Start here" cols={3} numbered />

ProjectGrid

Business Plus Plus

Cloud ERP for distribution and trading businesses

Business Plus Plus is a cloud ERP covering masters, sales, purchase and accounting for distribution and trading businesses. This manual covers day-to-day operation, administration and end-user training.

FinGrow

Microfinance, loans and deposit management

FinGrow manages members, loan portfolios, deposit schemes and field collections for microfinance institutions and co-operative societies. This manual covers branch operations, agent workflows and statutory reporting.

SuperMandi

Agri-market vendor, order and delivery platform

SuperMandi runs agricultural market operations: vendor onboarding, produce catalogues, procurement, order fulfilment and last-mile delivery. This manual covers back-office, warehouse and delivery-partner workflows.

Project Four

Configurable business workflow application

Project Four is a configurable business application built around transactions, approvals and reporting. It also serves as the reference template for onboarding a new product into this documentation portal.

<ProjectGrid />

Utility

EmptyState

No sales orders yet

Orders appear here once you create the first one.

Create a sales order

<EmptyState
  icon="cart"
  title="No sales orders yet"
  description="Orders appear here once you create the first one."
  action="Create a sales order"
  href="/bpp/sales/sales-order/"
/>

UiExample

For small pieces of real UI, where live markup beats a screenshot: it stays crisp at any zoom, works in both themes and prints properly.

Validation state

Credit limit exceededRevised outstanding would be ₹5,22,922.00 against a limit of ₹5,00,000.00.

A field in error, as it appears when the credit limit is exceeded.

Flat stage

Centred, no grid

<UiExample label="Validation state" layout="stack" caption="A field in error.">
  <Badge text="Credit limit exceeded" variant="danger" />
</UiExample>

Tables, code and plain Markdown

Plain Markdown tables are styled to match the components and wrapped in a scroll container, so a wide table stays usable on a phone.

Field	Type	Required	Description
`Customer`	Dropdown	Yes	The customer placing the order
`Order Date`	Date	Yes	Drives price list selection
`Reference`	Text	No	The customer’s own PO number
`Delivery Date`	Date	No	Drives the dispatch worklist

Code blocks get syntax highlighting, a copy button, optional titles and line highlighting.

// The most specific price list wins: customer, then group, then company.
function resolveRate({ customer, product, onDate }) {
  const lists = priceLists
    .filter((list) => list.status === 'Active')
    .filter((list) => covers(list, onDate))
    .filter((list) => appliesTo(list, customer));

  const bySpecificity = lists.sort((a, b) => scope(b) - scope(a));
  return bySpecificity[0]?.rates[product.code] ?? 0; // zero means "no price found"
}

{
  "orderNo": "SO/2026/00142",
  "orderDate": "2026-10-03",
  "customer": { "code": "CUS/00318", "name": "Sunrise Traders" },
  "status": "Confirmed",
  "lines": [
    { "product": "PRD/00412", "qty": 40, "uom": "REAM", "rate": 285.0, "discountPct": 5 }
  ],
  "grandTotal": 40582.0
}

SELECT  so.order_no,
        c.name              AS customer,
        so.order_date,
        so.delivery_date,
        so.grand_total
FROM    sales_order so
JOIN    customer    c ON c.id = so.customer_id
WHERE   so.status = 'CONFIRMED'
  AND   so.delivery_date < CURRENT_DATE
ORDER BY so.delivery_date;

npm install
npm run build      # also builds the Pagefind search index
npm run preview    # search only works against a built site

Component Library

Callouts

Procedures

Steps

Open the screen

Complete the required fields

Savetakes a moment

Step 3:Save the Sales Order

Procedure, Prerequisites and ExpectedResult

Open the Customer screen

Enter the details and save

NavPath

Checklist

Screenshots

Sizes and captions

ScreenshotGallery

TrainingVideo

Field reference

Field

FieldTable

ProcessTable

Comparison

KeyboardShortcut and Badge

Disclosure

Tabs

Accordion

FAQ

Navigation and cards

RelatedDocumentation

TrainingCard and CardGrid

Creating a Sales Order

Raising an Invoice

Collecting Payment

SectionIndex

Journal Voucher

Receipt Voucher

Payment Voucher

ProjectGrid

Business Plus Plus

FinGrow

SuperMandi

Project Four

Utility

EmptyState

UiExample

Tables, code and plain Markdown