| ← All Docs Desktop UX

Desktop UX

Last updated Sep 2026 1024px+ breakpoint · Power user features

Layout

The desktop interface replaces the mobile bottom nav with a fixed left sidebar and uses the additional screen width for split-pane layouts and richer data tables.

Desktop Layout Structure

Sidebar

#ItemIconRoute
1DashboardLayoutDashboard/dashboard
2BillingReceipt/bills
3EstimatesFileText/estimates
4Stock & PurchasePackage/inventory
5FarmersUsers/farmers
6DuesWalletCards/dues
7Daily BookNotebookPen/book
8SuppliersTruck/suppliers
9CashbookBookText/cashbook
10ReportsFileBarChart/reports
11MoreLayoutGrid/more

Sidebar Features

Billing Flow — Desktop

Desktop billing condenses the mobile 3-step wizard into a 2-step flow, taking advantage of the wider viewport.

1

Catalog + Cart

Split layout. The left pane shows the product catalog with Feed/Medicine tabs, a search bar, and a grid/list toggle. The right pane shows the cart with inline payment controls.

Ctrl+K or / focuses the product search. Click a product in the catalog to add it to the cart. Quantity and price are editable inline. Payment type and amount fields sit below the cart items.

2

Review + Sign

Full bill review with all line items, totals, and GST breakdown. A larger signature canvas (desktop-sized) captures the farmer's signature. The Create button confirms the bill, followed by an option to send via WhatsApp.

Desktop billing uses a 2-step flow vs. mobile's 3-step wizard. The wider screen allows catalog browsing and cart management simultaneously, eliminating the need for a separate payment step.

Keyboard Shortcuts

ShortcutActionContext
Ctrl+K / Cmd+KOpen the sidebar page searchGlobal
BNew billGlobal (not while typing)
NOpen / close Quick add menuGlobal (not while typing or with a dialog open)
B E P C R X I O F TBill, Estimate, Purchase, Collect Payment, Sales Return, Expense, Cash In, Cash Out, Add Farmer, Stock TransferQuick add menu open (only actions ticked in Settings)
/Focus product searchBilling page
EscapeClose modal / dialogAny open modal
TabNavigate form fieldsForms
EnterSubmit focused form / confirm dialogForms / modals
Ctrl+K on billingFocus product search (same as /)Billing page

Wide-Screen Optimizations

PageLayoutDetails
Dashboard12-column grid (8/4 split)Main stats + chart on the left, quick actions on the right.
Bill DetailSide-by-sideBill info on the left, payment history on the right.
Farmer LedgerWide tableMore columns visible with less horizontal scrolling.
Farmer DetailSplit viewFarmer info card on the left, ledger table on the right.
ReportsFull-width chartsProfit charts and ageing charts use the full content width.
SettingsCentered narrowMax-width 640px for form readability.

Desktop-Only Features

Print Support