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

Fixed left sidebar — 240px wide, always visible.
Sidebar collapse — On the billing page the sidebar collapses to 76px (icons only) to maximize workspace for the catalog + cart layout.
No top bar — Navigation is handled entirely by the sidebar; there is no persistent top navigation bar on desktop.
Content area — Fills the remaining viewport width. Max-width is constrained per page for readability.
Universal search — Ctrl+K opens a search modal overlay from anywhere in the app.

Sidebar

#	Item	Icon	Route
1	Dashboard	LayoutDashboard	`/`
2	Farmers	Users	`/farmers`
3	New Bill	PlusCircle	`/billing`
4	Bills	FileText	`/bills`
5	Stock	Package	`/inventory`
6	Purchases	ShoppingCart	`/purchases`
7	Suppliers	Truck	`/suppliers`
8	Expenses	Wallet	`/expenses`
9	Daily Book	BookOpen	`/cashbook`
10	Reports	BarChart3	`/reports`
11	Settings	Settings	`/settings`

Sidebar Features

Active item — Blue left border highlight + blue text on the current route.
Collapse animation — On the billing page the sidebar animates from 240px to 76px, showing only icons to give the billing workspace more room.
Shop name + branch selector — Displayed at the top of the sidebar.
Staff badge — A Staff badge is shown when operating in staff mode.

Billing Flow — Desktop

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

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.

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

Shortcut	Action	Context
`Ctrl+K`	Open universal search modal	Global
`/`	Focus product search	Billing page
`Escape`	Close modal / dialog	Any open modal
`Tab`	Navigate form fields	Forms
`Enter`	Submit focused form / confirm dialog	Forms / modals
`Ctrl+K` on billing	Focus product search (same as `/`)	Billing page

Wide-Screen Optimizations

Page	Layout	Details
Dashboard	12-column grid (8/4 split)	Main stats + chart on the left, quick actions on the right.
Bill Detail	Side-by-side	Bill info on the left, payment history on the right.
Farmer Ledger	Wide table	More columns visible with less horizontal scrolling.
Farmer Detail	Split view	Farmer info card on the left, ledger table on the right.
Reports	Full-width charts	Profit charts and ageing charts use the full content width.
Settings	Centered narrow	Max-width 640px for form readability.

Desktop-Only Features

Universal search modal (Ctrl+K) — searches across farmers, products, and bills.
Grid/list toggle on the product catalog.
Sidebar collapse on the billing page for maximum workspace.
Multi-column dashboard layout with stat cards and charts side-by-side.
Wider table views with more visible columns, reducing horizontal scroll.
Keyboard shortcut navigation for power users.

Print Support

Bill print — Optimized @media print stylesheet hides navigation and chrome, formats the bill for A4/Letter output.
Farmer statement — Print-friendly layout generated via html2canvas → PDF export.
Reports — Basic print support with navigation elements hidden via print media query.