Quotation Management: Complete Operations Guide

The Quotation module is the central hub for creating, managing, and distributing professional price proposals for your transport and logistics services.

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.

Dashboard Statistics

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

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 quotations in real time.

• Searchable Fields: Customer name, phone, origin, destination, quotation 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 "delhi" matches "New Delhi" entries.

Quotation List View

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

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

Payment Status Toggle

Every quotation 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 Quotation PDF

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

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

Download / Save PDF

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

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

Share Quotation

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

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

Edit Quotation

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

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

Delete Quotation

Permanently removes a quotation from your records.

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

Create New Quotation

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

Both buttons route to /v1/quotation?addnew=true. A toast "Opening new quotation 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 quotations".

Mobile & Desktop Views

The Quotation 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.