Components

• DataList The one way to show rows of records: Cynco UI's tray table on wide containers, one stacked card per row on narrow ones.
• StatTile One KPI (label, value, optional unit, sub line, badge and status dot) and StatGrid, the auto-fitting grid that holds them.
• SectionPanel A titled card whose header actions wrap under the title when the container is narrow.
• KeyValueList A label/value list: side by side when there's room, label above value below 16rem.
• ActionBar ActionBar is a row of controls that wraps instead of overflowing; ScrollRow is a single row that scrolls sideways (tabs, steppers, chips).
• ToneDot A 6px dot (or square) in one of Cynco UI's status tones; toneBg exposes the same background classes for bars and legend keys.

Actions

• Button Cynco's one button: six variants on Base UI's Button, 28px tall by default.
• ButtonGroup Joins adjacent buttons, inputs or selects into one segmented control.
• IconButton A Button with a leading or trailing icon slot, sized for Cynco's 14px Phosphor icons.
• IconTooltipButton An icon-only button that always carries a tooltip label.
• ShortcutButton A primary or secondary Button that shows and binds a keyboard shortcut.
• ToolbarButton The 20px vertical-ellipsis button that opens a table row's actions menu.
• CopyButton Copy-to-clipboard buttons for IDs and keys, with a "Copied!" tooltip.
• CopyTextButton A bordered mono chip that copies its text, with a copy icon.
• InlineAction A text-link-style action with an optional small icon.
• PanelButton A large, tactile tile button with screws and seams; the selected tile takes a primary border and a check mark in its corner.
• GroupedTabButton A segmented tab control: equal-width options in a single pill track.

Inputs

• Input The single-line text input: 28px, interactive-secondary fill, input border.
• InputGroup An input with addons — icons, text, buttons — inside one bordered field.
• InputOTP One-time-code input built on input-otp: grouped slots with an optional separator.
• Textarea Multi-line text input with the input styling.
• LongInput A monospace-friendly textarea on input-background for JSON and long values.
• LabelInput A labelled Input with an optional description line above it.
• TagInput A free-text input that turns entries into removable tags.
• TagSelect A multi-select shown as removable tags in a select-style field.
• DateInputUnix A date (and optional time) picker whose value is a Unix timestamp in milliseconds.
• TimePickerInput A two-digit time segment input (hours, minutes, 12-hour) with arrow-key stepping.
• Calendar Month calendar on react-day-picker 8, selected day filled with primary.
• Select Base UI select with a 28px trigger and an overlay popup with check indicators.
• SearchableSelect A generic select with a search box, built on Popover + Command.

Selection

• Checkbox Square checkbox in three sizes, primary when checked.
• TextCheckbox A Checkbox with a clickable text label.
• AreaCheckbox A checkbox with a title and description, optionally revealing children when checked.
• IconCheckbox A toggle that looks like a small secondary button with an icon; checked shows the primary border and a check mark in its corner.
• RadioGroup Base UI radio group; items are small circles filled with primary.
• AreaRadioGroupItem A radio option with a label and description line.
• Switch On/off switch, 36×20 (or 28×16 inside SwitchSizeProvider size="sm").

Overlays

• Dialog Centered modal on overlay-dialog with overlay-dialog-shadow.
• Sheet A side panel for create/edit flows, sliding in from any edge.
• Popover A floating panel on overlay anchored to a trigger.
• Tooltip Short label shown on hover/focus; delay 0 by default.
• HoverCard A richer hover preview (Base UI PreviewCard).
• DropdownMenu Base UI menu: items with icons, shortcuts, checkbox/radio items, submenus and a destructive variant.
• Command cmdk command palette: search input, grouped items, shortcuts, footer hints.
• InfoTooltip A small info icon that shows an explanatory tooltip.
• ConditionalTooltip Wraps an element in a tooltip only when enabled.
• SheetCloseButton The ✕ button positioned in a sheet's top-right corner.
• SheetBackdrop Full-viewport dimming backdrop for inline sheets, portaled to the body.

Navigation

• Tabs Base UI tabs with default (pill) and underline list variants.
• Breadcrumb Breadcrumb trail with chevron separators.
• Pagination Minimal pagination containers (nav › list › item).
• Accordion Base UI accordion with a chevron that rotates open.
• SheetAccordion Accordion sections styled for sheets: title, description, optional separators.
• Collapsible Show/hide a region with a trigger.
• Carousel Embla carousel with previous/next buttons.

Data display

• Badge A small rounded label in three variants.
• BetaBadge A tiny "BETA" tag.
• IconBadge A badge with a leading or trailing icon.
• StatusChip A neutral chip whose only colour is a small status square with a glyph.
• StepBadge A small numbered square for step lists.
• SectionTag A muted uppercase-free tag that labels a section.
• FilterChip An active filter shown as label value ×.
• InfoRow A label/value row with an optional icon.
• Card A card surface with header, title, description, action, content and footer slots.
• Table Plain table primitives (table, header, row, head, cell, footer, caption).
• DataTable Cynco's data-table kit on TanStack Table: toolbar, heading, tray, header, body, virtualisation, pagination and column visibility.
• ChartContainer shadcn chart wrapper for Recharts: maps a config to --color-<key> variables and supplies tooltip and legend content.
• CopyablePre A code block (or inline span) with a copy button.

Feedback

• Alert Inline notice in five tones: default, note, success, warning, destructive.
• Progress A thin progress bar, primary on a muted track.
• Skeleton A pulsing muted placeholder block.
• SmallSpinner A small circular spinner.
• LoadingShimmerText A line of text with a moving shimmer and spinner.

Forms

• Label A plain form label.
• FormLabel The standard field label (a native <label>) in text-form-label, dimmed when disabled.
• FieldLabel A field label (a native <label>) with optional description and info tooltip.

Layout

• PageHeader Page title row: icon + title (+ accessory) on the left, actions on the right.
• PageContainer The main content panel that sits on outer-background.
• SandboxBanner The blue tab hanging from the top edge that marks sandbox mode.
• Separator A 1px horizontal or vertical rule in border.
• ScrollArea A scroll container with thin custom scrollbars.
• ResizablePanelGroup Resizable split panes (react-resizable-panels 4).

• AmountInput The money field accountants type into: accepts plain figures, “1,234.50”, accounting brackets “(500)”, “1.2k” and formulas like “=1200*1.08” or “100+250.50-20”, and commits an exact decimal string.
• JournalGrid A keyboard-first journal line editor: searchable Account, Description, Debit and Credit cells with spreadsheet movement, auto-balance and a sticky footer showing Total Dr, Total Cr and whether the entry balances.
• InlineEditCell A table cell that edits in place: click, Enter or F2 to edit text or an amount, Enter or Tab to save, Esc to cancel, with a spinner while an async save is pending and a revert plus message when it fails.
• CommandPalette A ⌘K / Ctrl+K command palette on Cynco UI's CommandDialog: jump to any area, create documents, reopen recent records and run app actions, with fuzzy search across labels, keywords, document numbers and amounts.
• ShortcutsDialog A searchable dialog listing every keyboard shortcut in sections, opened with “?”, plus useGoToShortcuts for two-key “g then i” navigation.
• SavedViewsBar Saved views for any list: a scrolling row of view tabs with counts, the active filters as removable FilterChips, and Save / Save as new / Reset once the filters drift from the view; rename, duplicate, share and delete from the active view's menu.
• BulkActionBar Floating toolbar for ticked rows: "3 selected · RM 34,890.00", Select all N / Clear, the main actions as buttons and the rest in a ⋯ menu.
• UndoToast "Do it, then offer Undo": a toast with the message, an Undo button (⌘/Ctrl+Z), an optional countdown and late commit — the real write runs in onCommit only if nobody undoes.
• DensityToggle Compact / Default / Comfortable row density as a small segmented radio group with line-spacing icons; its value drives DensityProvider.
• PrintButton A "Print" button with a printer icon and a ⌘/Ctrl+P keycap; calls window.print() unless onPrint is given.

• DocumentStudio The brand editor for every printed document: logo, layout, typeface, language and footer note, with a live preview of any document at any paper size and stamp.
• DocumentPage The document kit: a sheet of paper plus the parts every business document is assembled from — Letterhead, DocumentMeta, PartyGrid, DocumentTable, TotalsBlock, PaymentBlock, EInvoiceBlock, NotesBlock, SignatureBlock, DocumentFooter, DocFields, DocCallout, DocFigureStrip, DocAmountWords.
• TaxInvoiceDocument Malaysian tax invoice — or plain Invoice for a seller not registered for SST — assembled from the document kit.
• QuotationDocument Quotation with grouped line sections and subtotals, optional add-on items, totals, terms & conditions and a customer acceptance block beside the issuer's signature.
• AdjustmentNoteDocument Credit note or debit note (kind) against an original invoice, with reason, lines, totals and the MyInvois e-invoice block.
• ReceiptDocument Official receipt in A4, A5 or 80mm thermal size: received from, payment method, amount received, allocation to invoices, amount in words and received-by signature.
• DeliveryOrderDocument Delivery order without prices: deliver-to and bill-to, delivery date, vehicle and driver, ordered / delivered / back-ordered quantities, packages and weight, and a goods-received block.
• PurchaseOrderDocument A purchase order to a vendor: letterhead with PO number, PO date / required-by / terms / quotation ref / requester, vendor and deliver-to blocks, priced lines with item code, quantity + unit and SST rate, posted totals in words, delivery instructions, terms and prepared-by / approved-by signatures.
• PaymentVoucherDocument A payment voucher: payment date, method (bank transfer with reference, cheque with number, cash, DuitNow, card) and the account it was paid from, payee with bank details, 'Being payment for' purpose, the bills or expense lines paid with account codes, total paid in words, and a four-step approval chain.
• StatementOfAccountDocument A customer or vendor statement: statement date, period, account no. and terms; the party with an account summary (opening, invoices & charges, payments & credits, closing balance); every transaction with date, type, number, description, debit, credit and running balance; an aging strip ending in the total due; payment details and a tear-off remittance slip.
• PayslipDocument A Malaysian payslip: employer (EPF / SOCSO / LHDN employer numbers) and employee particulars (staff ID, IC, position, department, EPF, SOCSO and income tax numbers, bank account), pay period and pay date, Earnings and Deductions side by side, gross / total deductions / net pay with net pay in words, employer EPF / SOCSO / EIS / HRD Corp contributions as a quieter strip, year-to-date figures and a confidentiality note.
• ProfitAndLossReport Printable Statement of Profit or Loss: revenue, cost of sales, gross profit, grouped operating expenses, operating profit, other income and finance costs, profit before tax, tax and profit for the period, with comparative period, variance and variance %.
• BalanceSheetReport Printable Statement of Financial Position: non-current and current assets, current and non-current liabilities, equity, the 'Total equity and liabilities' line with an accountant's double rule, and a Balanced / Out-of-balance check.
• TrialBalanceDocument Printable trial balance: account code, account name, debit and credit grouped by account type, matching totals with a double rule, and a quiet 'Balanced' or red 'Out of balance by RM x' line.
• GeneralLedgerReport Printable general ledger: per account a header with code, name and opening balance, dated lines with journal no., description, debit, credit and running balance (Dr/Cr), and a closing-balance row with period totals.
• AgedReceivablesReport Printable aged receivables by customer: current, 1–30, 31–60, 61–90 and 90+ days with a total column, a totals row with double rule, a % of total row, and a bucket summary with proportional bars.
• CashFlowReport Printable Statement of Cash Flows (indirect method): profit before tax, adjustments, working-capital changes, cash generated from operations, interest and tax paid, investing and financing activities, net change, opening and closing cash, with a reconciliation check.

Sales

• InvoiceListTable The invoices list: Invoice #, Customer, Date, Due Date, Amount and Status, with row selection, sort headers and per-row actions.
• InvoiceLineItems Editable invoice line rows (item and description, qty, unit price, discount, tax code, amount) with a margin dot, a total and estimated-profit footer, and Add item, Browse library and Add line actions.
• InvoiceTotalsPanel The document totals block: Subtotal, Discount (n%), the tax line(s), Total, and Deposit and Balance Due when a deposit is set.
• InvoiceMetricTiles The all-time invoice metric strip: Sales, Paid, Pending and Overdue, where Overdue turns red and shows an 'n invoices' badge.
• InvoiceCreateSteps The invoice builder's vertical three-step rail (Customer Information, Line Items, Invoice Summary) with numbered and checked step markers and a connecting line.
• InvoiceSummaryRail The always-visible total bar under the builder: Subtotal, Discount and Tax figures, a large Total and a caret that opens the full breakdown above it, plus trailing actions.
• InvoiceActionsPanel The invoice view's Actions card, which lists only the shortcuts the status allows (Send email or reminder, Mark as paid, Download receipt, Edit, Delivery orders, Credit and debit notes).
• MarkAsPaidDialog Records a manual payment against an invoice: a fact block (customer, invoice, amount, balance to record), payment date, payment method chips, the 'Deposited to' bank account, a note, an offline-payment warning and confirm, plus a 'Payment recorded' success state.
• InvoiceBulkBar A floating toolbar for ticked invoice rows: 'n selected', Download PDFs, Delete and clear. A blocked action dims and keeps its reason as a tooltip (drafts have no PDF, invoices with payments or voided can't be deleted).
• InvoiceFilterChips One removable chip per active list filter (search, status, issued, due or created period, amount range, issued by, currency), plus Clear all.
• CreditNoteSummary A credit or debit note's totals and where its money went: Applied, Refunded and Credit left for a credit note, or Paid and Still owed for a debit note, with an optional Payments list.
• CreditDebitNoteList The credit and debit notes list: Note, Type, Customer, Amount, Status, Date and a row menu.
• QuotationBoardCard One quotation on the Kanban board: customer, quotation number, status, total and relative age ('3d ago', 'Yesterday').
• QuotationBoardColumn One Kanban column of the quotations board (Draft, Sent / Viewed, Accepted, or Rejected / Expired): icon, label and count above a tray of cards with a column Total, or an empty message.
• QuotationStats The quotation KPI row: Total quoted, Sent, Accepted and Conversion rate.
• RecurringTemplateTable The recurring invoice templates list: Customer with email, Frequency, Next generation, Amount, Generated count and Status.

Ledger

• AccountingWorkbenchHeader The slim title bar and metric strip that open every accounting workbench tab (Overview, Journal, Ledger, Periods, Opening Balances).
• JournalEntryHeader The journal entry form's top bar: Back, the title with the entry number, the entry status and the From template / Save Draft / Save & Post actions.
• JournalLineEditor The spreadsheet-style debit/credit grid of a journal entry, with an account picker in each Account cell, line description, grouped amount inputs and Add line.
• AccountPickerField A searchable chart-of-accounts picker: recent accounts first, then one group per account type, codes in mono with the account's normal balance (DR/CR).
• JournalBalanceBar The journal form's DR = CR footer: debit and credit totals with Balanced or Off by MYR x, plus the auto-save line.
• JournalDraftRecoveryBanner The banner offering to recover an unsaved local journal draft.
• JournalLinesTable The read-only line items of a saved journal entry: line number, account (code, name, type), description, debit, credit and totals.
• JournalEntryDetailsRail The Details · Memo · Activity panel beside a journal entry, with the approval/posting timeline.
• ChartOfAccountsTree The nested Chart of Accounts: expandable header accounts, category dot, mono code, name, type and balance, with inactive accounts marked.
• CoaAccountPanel The detail panel for a selected account: current balance, normal balance and status, flags, balance history, recent transactions and AI mapping keywords, with an inline edit form.
• GeneralLedgerTable The general ledger register for an account: date and entry number, description with counterparty, debit, credit, running balance and reconciled flag, bracketed by opening and closing balance rows.
• BankLedgerHeader The header over a bank account's ledger: account name, number and linked GL code, the statement tie-out, book vs statement balance, the month stepper and the month's totals.
• PeriodCloseRow One fiscal period in the periods list: open/closed/locked status, year-end marker, account and transaction counts, Dr/Cr totals and the lifecycle actions.
• PeriodCloseChecklist The pre-close checks for a period, grouped worst first (Blocking, Needs attention, Advisories) with the fix-it actions, and the passed checks folded away.
• PeriodCloseAttentionCard A check Cynco could not verify: what is wrong, on which accounts, why it matters, links to fix it, and the closer's note for the close record.
• OpeningBalanceTotalsBar The opening-balance trial balance's last line: debit and credit totals, whether they balance (or what is out and where the gap goes), and Discard / Post.

Banking

• BankFeedList The day-grouped bank transaction stream: search, lifecycle filter, count, and per-day sections of feed rows with the day's net.
• BankFeedRow One bank line: checkbox, lifecycle spine, payee with transfer and review-flag chips, account dot and description, category cell, signed amount, and any proposed matches beneath.
• BankCategoryCell The categorisation affordance in its four states: AI suggestion with confidence, confirmed chip, '+ Assign', locked, plus the account-picker trigger.
• BankConfidenceMeter AI confidence as a tier chip (≥90 high, 70–89 medium, <70 low), a primary progress ring, or a bare percent.
• BankLifecycleSpine Four stacked dots encoding imported → categorized → posted → reconciled; green when settled, hollow when excluded.
• BankMatchReview Proposed matches of a bank line to an invoice or bill: target and mono reference, match % or Confirmed, evidence, what accepting does, and Accept / Reject.
• BankReviewCard One line in the review queue with its AI suggestion and confidence ring, Change / Exclude / Skip, and the why-timeline when active.
• BankTransactionTimeline The glass-box reasoning trail for one bank line — rule match, AI suggestion, policy hold, user action — newest first.
• BankPostingSummary 'Waiting to post, by account': what To post will put in the ledger per account and direction, with line counts and signed totals.
• BankBalanceEquation Opening + money in − money out = result, set against a check balance with a verdict: Ties, Off by RM x, or why it can't be verified; pending terms shimmer.
• BankStatementEquation A statement's own proof — opening, money in (n lines), money out (n lines), closing vs the statement's printed closing — with a broken running-balance warning by row.
• BankMonthProof The month-end proof: statement closing − lines not yet in the ledger − lines dated on another day = expected ledger, checked against the linked GL account, with any difference explained in words.
• BankMonthClose Closing a month: the bank sign-off (or its signed / stale state), then Period close — fiscal status, the two bank checklist items with their figures, and the way to Periods.
• BankCloseStateChip A month's close state as a status chip: Closed, Ready to close, Needs work, No statement, Covered, In progress, Not started.
• BankReconciliationYearStrip 'Month-end close · FY 2026' with year stepping, the fiscal year as twelve month cells with state bars and open-line counts, and the selected month's heading and next step.
• BankAccountAvatar A bank account's mark: the institution's short code in a circle on its brand colour, or the account-type glyph (bank, card, wallet) when there is no institution.
• BankAccountRail Accounts as instruments: all-accounts net position, grouped account rows with avatar, feed glyph, statement-gap warning, compact balance, to-categorize count and settled meter, the 6-month net-flow sparkline, and add actions.
• BankRulesTable Categorisation rules with match, target account, source, priority, times applied and override rate, plus search, All/Active/Inactive filter, 'Apply to unposted lines' and 'New rule'.
• BankCashFlowChart Monthly inflow and outflow bars with net as a line across them, with period totals in the legend.

Reports

• TrialBalanceReport The trial balance grid: account code and name, Debit/Credit pairs per column group, a totals row that must tie, and a Balanced/Unbalanced chip.
• ProfitLossStatement Profit & loss statement: section headers, indented account lines, section totals, Gross profit / Operating profit subtotals and Net Income, single-period or comparative.
• BalanceSheetStatement Balance sheet: the Total assets / liabilities / equity strip, an out-of-balance callout, and the Assets / Liabilities / Equity ladder with a Balanced chip.
• ReportToolbar Report page header with its control cluster: period select grouped by fiscal year, Monthly/YTD or Standard/Extended view, Compare toggle + comparison period, Save snapshot, freshness label and Export menu.
• KpiTileGrid A row of KPI tiles: label, hero figure, signed % delta chip, optional meta chip, sparkline and one quiet sub-line.
• OwedAgingRings Receivables and payables as aging rings — one arc per band (Current, 1–30, 31–60, 61–90, 90+), the total in the middle, a keyed legend and the overdue footnote.
• ReceivablesAgingTable Accounts receivable aging: the five-figure summary strip, then customers (top debtors first) across Current / 1-30 / 31-60 / 61-90 / 90+ / Total with totals on the tray.
• CashFlowOverview Money movement chart: inflow and outflow bars per month with net as a line, a 3M/6M range toggle and the window's net, or a connect-bank empty state.
• CashRunwayPosition The position band of the CFO figures: cash on hand across accounts, the runway meter (months at the last 3 months' burn) and the implied cash trail.
• BusinessHealthPanel The controls checklist: each check's verdict, one line of evidence and its area (Books, Collections, Payables, Compliance), failures first, with a summary like '2 of 5 checks need you'.
• RecentActivityFeed Unified feed of invoices raised, payments moved and bills entered: kind tile, counterparty and reference, status, signed amount and relative time.

Expenses & parties

• BillCard A bill as a compact card: vendor initials, vendor name, bill number, total, due date, category, Overdue/Duplicate flags, AI-extraction confidence and GL-posting indicator, with a status quick-action menu.
• BillsBoard The bills Kanban: In Review, Pending Approval, Awaiting Payment, Scheduled and Paid columns of BillCards with counts, empty messages and a compact per-currency column total.
• BillDetailHeader Bill page header: Bills breadcrumb, vendor title with status and Overdue chips, More menu (Archive with confirm) and Re-extract, plus the Bill no. / Issued / Due / Total / Received fact strip and an archived banner.
• BillAlerts The stack of bill alerts: possible duplicate (with Dismiss), rejection notes, unused vendor credit (Apply vendor credit), vendor list load error and corrupted line items.
• PayRunTable The pay run: Ready / Overdue / Selected metrics, a schedule date (and optional Pay from account) with Schedule selected, and a selectable table of payable bills with outstanding amounts and a total-to-pay footer.
• RecordBillPaymentDialog Record payment button and right-side sheet: bill total / outstanding summary, Payment Amount (validated against outstanding), date, method, Bank / Cash Account, reference and notes, with Confirm payment.
• ReceiptExtractionProgress Every Cynco AI extraction state on a bill: the four-step Reading / Extracting / Checking / Applying timeline, timed out, done with confidence, and failed (with or without retry).
• PartyOverviewHeader Top of a customer or vendor page: breadcrumb, name with Inactive chip, Statement and New invoice/New bill actions, the four position KPIs (owes, overdue since, open items, 12-month total) and Activity / Ledger / Details tabs with the terms fact strip.
• PartyRail The facts rail of a party page: available credit (customers), Position with Books tie / Needs review, the Aging stacked bar and buckets, the 12-month billed/spend bar chart and the contacts list.
• PartyTimeline The party Activity story: month-grouped invoices/bills, payments and bank lines with day, kind dot, reference, due date, status, Overdue chip and amount (with MYR equivalent for foreign documents).
• PartyLedgerTable The party subledger: Date, Event, Document, Amount and running Balance, newest first.
• CustomerListTable The customers list: selection, customer with initials, contact and location, Owes you (outstanding, overdue or open count, credit-limit chip), Est. margin (90d) and Next action, with row actions.
• VendorListTable The vendors list: selection, vendor with initials and contact / category / place, You owe (with overdue or All overdue), Paid to date, Last paid and row actions.
• CustomerStatementMetrics Statement of account KPIs: total transactions, invoiced amount with % collected, amount received, balance due, plus credits applied / debits added and the multiple-currencies notice.
• CustomerStatementTable Statement of account lines: Date, Transactions, Details, Currency, Amount (debit), Payment (credit) and running Balance, with a Balance Due footer.

Tax, assets & operations

• TaxComputationSummary Form C chargeable income build-up (accounting profit → adjusted → statutory business → total → chargeable income) beside the tax computation (SME bands, rebates, s110/bilateral credits, CP204 paid, balance payable).
• TaxInstallmentSchedule CP204 monthly instalment table (#, due date, amount, paid, status) with Mark paid on pending rows and a paid-to-date progress bar.
• TaxAdjustmentsTable Add-backs, deductions or reliefs for a tax computation: item code, description with GL account, source (Auto (GL) / Manual / AI) and amount, with a total.
• TaxFilingWorkflow Draft → Reviewed → Filed stepper for a tax return with filing reference, reviewed/filed dates and the next action (Mark reviewed / Mark filed).
• FixedAssetOverview Fixed-asset detail: name and status, KPI tiles (total cost, accumulated depreciation, NBV, qualifying expenditure), tabs, fact strip and the Asset details / Depreciation & Tax (method, useful life, CA class, IA/AA) cards, plus disposal details when disposed.
• AssetDepreciationSchedule Depreciation schedule by period: charge, accumulated to date, NBV after, and Posted (linked to its journal) or Draft.
• ItemsListTable Items catalogue with selection: name and description, unit price, profit (margin % vs cost or estimated on sales), inventory on hand vs reorder point, tax rate and discount.
• ItemStatsRow Items KPI row: estimated margin on sales (or average profit margin), average revenue per item, highest earning item, most sold item, each over the trailing sales window.
• InventoryFlowPanel Stock lifecycle in five steps (set up items, order and receive, record bill, dispatch goods, reconcile) with the GL reconciled / review state.
• StockBalancesReport Stock balances by item and location (on hand, WAC to 4 dp, value, Healthy/Low/Negative) with the GL inventory vs stock ledger reconciliation strip.
• PurchaseOrderStats Purchase order KPI row: total POs, drafts, approved total.
• PurchaseOrderLines Editable PO line items (description, qty, unit price, amount auto-calculated as qty × price) with remove, Add line item, and subtotal / SST / total.
• PurchaseOrderLinkedBills Bills linked to a purchase order: bill number, issue date, amount and bill status.
• PayslipSummary One payslip: gross, statutory deductions, net pay, employer cost; pay lines (earnings and EPF/SOCSO/EIS/PCB deductions); employee and employer contributions per scheme with Unverified flags; payment state and Mark paid.
• PayslipsRunTable A payroll run's payslips: employee and reference, gross, statutory, other deductions, net, employer cost and Paid/Unpaid, with run totals.
• PayrollRemittancesPanel Owed to agencies: employee and employer shares a run remits per creditor (KWSP/EPF, PERKESO SOCSO and EIS, LHDN PCB, HRD Corp).
• EInvoiceStatusCard LHDN MyInvois e-invoice state for an invoice or note per environment (valid, pending validation, rejected with LHDN errors, unconfirmed, cancelled, buyer-requested rejection), the validated UUID / long ID stamp, and Submit / Cancel (72-hour window) actions.

• Artifact A titled container for something the assistant produced (a file, config or document), with actions and a close button.
• Canvas A React Flow canvas preset for agent workflows: dotted background, pan/zoom, delete keys.
• Node A Card-styled workflow node with optional connection handles.
• Edge Two edge styles for the Canvas: Edge.Animated (a dot travels the path) and Edge.Temporary (dashed).
• Controls React Flow zoom/fit/lock controls styled for Cynco.
• Panel A floating panel pinned to a corner of the Canvas.
• Toolbar A node toolbar that floats above a selected Node.
• Connection The connection line drawn while dragging from a handle.
• ChainOfThought A collapsible list of the assistant's reasoning steps with status, results and images.
• Checkpoint A divider row marking a restorable point in a conversation.
• CodeBlock Syntax-highlighted code (Shiki, one-light / one-dark-pro) with line numbers and a copy button.
• CompactPromptInput A one-line prompt field with the submit button inline.
• Confirmation An approval request for a tool call, built on Alert.
• Context A token-usage meter with a hover card breaking down input, output, reasoning and cache tokens and cost.
• Conversation A scroll container that sticks to the bottom as messages stream in.
• Image Renders an AI SDK generated image from base64.
• InlineCitation Inline citation badges that open a card listing sources (with carousel for several) on hover, click or Enter, so keyboard users can reach every source.
• Loader A small spinning loader glyph.
• Message A chat message: user bubbles on the right, assistant replies as Markdown, with actions, branches and attachments.
• ModelSelector A command-palette dialog for choosing a model, with provider logos.
• OpenIn A dropdown that opens the current query in ChatGPT, Claude, Cursor, T3, Scira or v0.
• Plan A collapsible card describing a plan the agent proposes, with a shimmer while streaming.
• PromptInput The full chat composer: textarea, attachments, tools, model select, speech and submit with status.
• Queue A collapsible queue of pending and completed tasks or messages.
• Reasoning The model's reasoning in a collapsible that auto-opens while streaming and reports how long it thought.
• Shimmer Text with a moving shimmer.
• Sources A "Used N sources" disclosure listing source links.
• Suggestion A horizontal row of suggested prompts as pill buttons.
• Task A collapsible task with its sub-steps and file references.
• Tool A collapsible card for a tool call: name, status badge, parameters and result as highlighted JSON.
• WebPreview A mini browser: navigation buttons, URL bar, an iframe body and a collapsible console.