Invoice Management: Complete Operations Guide

The Invoice module is your all-in-one solution for generating, managing, and distributing professional, GST-compliant tax invoices.

Whether you are on a desktop workstation or a mobile device in the field, every feature is optimized for speed, clarity, and one-tap execution.

Invoice Creation

The creation form is structured into collapsible cards for focused editing.

All values are auto-validated before submission. Totals and GST update in real-time as you type.

Dashboard Statistics

Four stat cards sit above the list, updating automatically as you add, delete, or modify invoices.

Each card features a distinct color accent and an icon for at-a-glance recognition.

Search & Filtering

Use the search bar above the list to filter invoices in real time.

• Searchable Fields: Bill-to name, phone, origin (move_from), destination (move_to), invoice number, and custom metadata.
• Real-Time Results: Client-side filtering with zero server delay. Result count updates instantly.
• Clear Search: Click the × button or press Escape to reset.
• Case-Insensitive: Typing "mumbai" matches "Mumbai" entries.

Invoice List View

Invoices are displayed in a high-density table on desktop and collapsible cards on mobile.

Records sort by invoice number descending (newest first). Infinite scroll loads 10 records initially, then auto-fetches the next batch as you scroll.

Payment Status Toggle

Every invoice has a binary status: Paid or Unpaid. Change it directly from the list view.

1. Toggle the switch on any row.
2. When switching Unpaid → Paid, a confirmation modal appears. Click "Yes, Mark as Paid" to confirm.
3. Switching Paid → Unpaid happens instantly without confirmation.
4. Dashboard stats recalculate immediately.

View Invoice PDF

Opens the generated PDF in a new browser tab for quick verification.

1. Click the three-dot menu on any invoice row.
2. Select View Invoice.
3. The PDF opens in a new tab with your company branding.

Download / Save PDF

Saves the invoice PDF to your device with a standardized filename.

1. Click the three-dot menu on any invoice row.
2. Select Save PDF.
3. The file downloads as invoice-{number}.pdf.

Share Invoice

Distributes the PDF via your device's native share sheet or clipboard.

1. Click the three-dot menu on any invoice row.
2. Select Share Invoice.
3. On mobile, the system share sheet opens — choose WhatsApp, email, or any app.

Edit Invoice

Opens the invoice form pre-filled with existing data for quick corrections.

1. Click the three-dot menu on any invoice row.
2. Select Edit.
3. The form opens at /v1/invoice?edit={number} with all data restored.
4. Make changes and save. The PDF reflects updates immediately.

Delete Invoice

Permanently removes an invoice from your records.

1. Click the three-dot menu on any invoice row.
2. Select Delete.
3. A confirmation dialog appears with the specific invoice number. Click Delete to confirm.

Create New Invoice

Initiate a new invoice from two locations on the list page.

Both buttons route to /v1/invoice?addnew=true. A toast "Opening new invoice form..." confirms the action.

Refresh Data

Re-fetches the entire dataset from the server. Useful for multi-user synchronization.

• Full Reload: Clears local cache, shows skeleton loading state, and pulls the latest records.
• Search Preserved: Your active search query is not cleared.
• Toast Confirmation: "Refreshing data..." followed by "Loaded N invoices".

Mobile & Desktop Views

The Invoice List adapts its layout based on screen width.

Notifications & Feedback

BSTD uses non-blocking toast notifications in the bottom-right corner. Auto-dismiss after 3.5 seconds.

Multiple toasts stack vertically so rapid actions produce a readable queue rather than overlapping noise.

UX Tips & Shortcuts

Maximize efficiency with these built-in interaction patterns.

• Dropdown Auto-Close: Click outside, scroll, or resize to close orphaned menus.
• PDF Preloading: Hover over View for 200ms to trigger a silent fetch.
• Search Clear: Press Escape while focused to clear instantly.
• Phone Links: Tapping a number opens the dialer pre-filled on telephony-enabled devices.
• Color Language: Emerald = paid/success, Amber = unpaid/pending, Rose = monetary, Blue = info.