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.

Note

This page is itself written in MDX using these components. If something renders correctly here, it will render correctly in a product manual.

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 the reader should notice but can act on later.

Tip

A shortcut, a best practice or a time-saver.

Important

Something the reader must know to get the right result.

Warning

An action with consequences that are awkward to undo.

Danger

A destructive or irreversible action. Reserve this one.

<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:

Check the financial year first

Posting into a closed period needs an administrator, and reopening a period affects everyone.

A callout with no heading, for a short aside that does not need a label.

<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.

Tip

Anything can go inside a step — callouts, screenshots, field tables, code.

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:

3

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.

अपेक्षित परिणाम

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

1. Sales
2. Transactions
3. Sales Order

Go to

1. Masters
2. Parties
3. Customer
4. 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.

Click to enlarge

Full width — the default. Use it for whole-screen captures.

Click to enlarge

size="md" — for dialogs and partial captures.

Click to enlarge

size="sm" — for a small detail.

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." />

Important

alt or caption is required. A <Screenshot> with neither fails the build — a screenshot with no text alternative is a bug, not a style choice.

ScreenshotGallery

The order-to-cash cycle

Click to enlarge

Quotation

Click to enlarge

Sales Order

Click to enlarge

Sales Invoice

<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

Play videoLoads YouTubeCreating a sales order end to end

<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.

WindowsmacOSMobile app

Press Ctrl+P to print.

Press Cmd+P to print.

Use Share → Print from the document menu.

<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>

Note

single uses the native HTML exclusive-accordion behaviour (the name attribute on <details>) — no JavaScript at all.

FAQ

Quick form, for plain-text answers:

Quick FAQ

QCan I delete a sales order?

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

QWhy 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

QWhy can I not change the rate?

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

QHow 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>

Navigation and cards

RelatedDocumentation

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

संबंधित दस्तऐवजीकरण

• Customer MasterBusiness++Create the customer first.
• Sales InvoiceBusiness++
• Sales Order (SuperMandi)SuperMandiThe slot-based equivalent.
• Astro documentation(नवीन टॅबमध्ये उघडते)

<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

Open

Updated

Raising an Invoice

Create the receivable and post to the ledger.

Intermediate8 min

Open

3

Collecting Payment

Allocate a receipt against outstanding invoices.

Open

<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

जर्नल व्हाउचर

खातेवहीत हाताने दुहेरी नोंदीचे समायोजन करा.

Open

पावती व्हाउचर

विक्री बीजकाशी संबंधित नसलेली मिळालेली रक्कम नोंदवा.

Open

देयक व्हाउचर

खरेदी बीजकाशी संबंधित नसलेली दिलेली रक्कम नोंदवा.

Open

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

ProjectGrid

B+

Business Plus Plus

वितरण आणि व्यापार व्यवसायांसाठी क्लाउड ईआरपी

Business Plus Plus हे वितरण आणि व्यापार व्यवसायांसाठीचे क्लाउड ईआरपी आहे, ज्यात मूलभूत नोंदी, विक्री, खरेदी आणि लेखांकन यांचा समावेश होतो. ही पुस्तिका दैनंदिन कामकाज, प्रशासन आणि अंतिम वापरकर्त्यांचे प्रशिक्षण यांविषयी मार्गदर्शन करते.

दस्तऐवजीकरण उघडा

FG

FinGrow

सूक्ष्मवित्त, कर्ज आणि ठेव व्यवस्थापन

FinGrow सहकारी संस्था आणि सूक्ष्मवित्त संस्थांसाठी सदस्य, कर्जे, ठेवी आणि क्षेत्रीय वसुली हाताळते. ही पुस्तिका शाखा कर्मचारी आणि क्षेत्रीय प्रतिनिधींच्या दैनंदिन कामकाजाविषयी मार्गदर्शन करते.

दस्तऐवजीकरण उघडा

SM

SuperMandi

कृषी बाजार विक्रेता, ऑर्डर आणि वितरण मंच

SuperMandi कृषी बाजारातील विक्रेते, मालाची सूची, खरेदीदारांच्या ऑर्डर आणि शेवटच्या टप्प्यातील वितरण एकत्र जोडते. ही पुस्तिका गेटपासून ग्राहकाच्या दारापर्यंतच्या कामकाजाविषयी मार्गदर्शन करते.

दस्तऐवजीकरण उघडा

P4

Project Four

संरचनायोग्य व्यावसायिक कार्यप्रवाह ॲप्लिकेशन

Project Four हे संरचनायोग्य कार्यप्रवाह ॲप्लिकेशन आहे, ज्यात व्यवहार नोंदणी, मंजुरीचे टप्पे आणि अहवाल यांचा समावेश होतो. ही पुस्तिका संरचना, दैनंदिन वापर आणि प्रशासन यांविषयी मार्गदर्शन करते.

दस्तऐवजीकरण उघडा

<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.

Resolving a price list

// 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"
}

A sales order, as the API returns it

{
  "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
}

Orders confirmed but never delivered

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;

Build and preview the documentation

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

संबंधित दस्तऐवजीकरण

• Writing documentationHow to add a page, screenshots or a whole product.
• Creating a Sales OrderBusiness++These components used in a real page.
• Documentation versions