Mobile UX

Last updated Sep 2026 Primary platform · 80%+ users on mobile

Layout

The mobile interface is anchored by a bottom navigation bar, visible on all screens below the 1024px breakpoint. It provides single-tap access to the five primary sections of the app.

Bottom Navigation Bar

Five items arranged horizontally across the bottom of the viewport:

Home — Dashboard overview
Farmers — Farmer directory and ledgers
Bill Center FAB — Elevated floating action button in the center position. Larger and visually prominent to encourage billing as the primary action.
Stock — Inventory management
More — Expands to secondary navigation

The nav bar uses env(safe-area-inset-bottom) via the content-safe-bottom utility to avoid overlap with the iOS home indicator. It is hidden on desktop (≥1024px).

Billing Flow — Mobile

Mobile billing is a 3-step wizard, each step on its own screen with a progress indicator at the top.

Items

Product selection via category cards (Feed / Medicine) that open a modal sheet. Users can search within a category and tap a product to add it to the cart.

The cart is displayed inline below the category selector with editable quantity and price per item. A running subtotal is shown at the bottom of the item list.

Payment

Payment type selection: Credit Cash Partial. Amount input field appears for cash and partial payments with auto-calculated balance due. A date picker allows setting the bill date.

Review

Full bill summary showing all line items, quantities, prices, and totals. A canvas-based signature pad accepts touch input for the farmer's signature.

A sticky "Create Bill" button sits at the bottom of the screen. After creation, the user is offered the option to send the bill via WhatsApp.

Responsive Strategy

Pattern	Implementation
Mobile-first	Default styles target mobile. Desktop overrides use the `lg:` prefix (1024px breakpoint).
Layout toggling	`lg:hidden` / `hidden lg:flex` to render separate mobile and desktop blocks.
Dashboard	Separate mobile and desktop layout components loaded per breakpoint.
Spacing	Fluid gutter: `--page-gutter: clamp(1rem, 3vw, 1.5rem)`
Tablet	No tablet-specific breakpoint. 768–1024px receives the mobile layout.
Tables	Horizontal scroll on mobile via the `.tw` wrapper.
Modals	Slide-up sheet on mobile; scale-in centered dialog on desktop.

Touch Targets

Minimum 44px tap targets on all buttons and interactive elements.
Bottom nav items stretch the full width of their section.
Cart +/− buttons are 44×44px minimum.
Form inputs have 48px height on mobile.
Adequate spacing between adjacent tap targets to prevent mis-taps.

Gestures & Interactions

Gesture	Where	Behavior
Date swipe	Daily Book page	Swipe left/right to navigate between dates.
Pull-to-refresh	List views	Triggers a React Query refetch of the current data.
Tap-hold	Not used	Avoided for simplicity; no long-press actions.
Quantity +/−	Cart items	Tap to increment/decrement. Hold for rapid change.
Swipe to dismiss	Not used	Standard back navigation is used instead.

Performance Considerations

Mobile Performance Notes

PDF Generation — html2canvas for bill PDF export freezes the UI for 3–5 seconds on mobile. It runs on the main thread.
Image Compression — The browser-image-compression library compresses images before upload to reduce bandwidth usage.
Bundle Size — Code-split by route. The billing module is the largest chunk.
Offline — Bills can be created offline with a client_ref for idempotent sync when the connection returns.

Navigation Patterns

Tab bar for primary navigation (5 items at the bottom).
Stack navigation within each tab — push/pop pattern for drilling into detail views.
Modal sheets for selection UI (products, farmers) — slide up from the bottom.
"More" tab expands to secondary sections: Settings, Reports, Support, Stock Transfers, Expenses, Suppliers.
Back button in the topbar for nested views within a stack.