Quote Management

Navigate to Quotes from the sidebar to see all your quotes:

• Header with page title and actions
• Filter tabs across the top
• Search bar
• Quote cards in a list/grid

• "Quotes" page title
• Total quote count
• "New Quote" button (top right)
• Dropdown for AI vs Manual

• List View: Compact rows with key info
• Grid View: Cards with more detail
• Toggle between views (icon buttons)

• Most recent first
• Can change sort order
• Persisted per session

Each quote appears as a card with key information:

Card Elements:

• Primary text, prominently displayed
• Click to open quote details

• Total value formatted as currency
• Shows the bottom-line number

• Color-coded indicator
• Shows current quote state
• Updates in real-time

• Created date or sent date
• Relative format: "2 days ago"
• Hover for exact date/time

• Sparkle icon for AI-generated quotes
• Distinguishes from manual quotes
• No badge = manual quote

• View button
• Edit button (if editable)
• Copy link button
• More actions (...)

Filter quotes by status using the tab bar:

Available Tabs:

• Shows every quote
• Default view
• Includes all statuses

• Unsent quotes
• Work in progress
• Click to continue editing

• Sent + Viewed combined
• Quotes awaiting response
• Your active pipeline

• Accepted quotes
• Converted to jobs
• Your wins

• Past validity date
• May need follow-up
• Can be extended

• Number shown on each tab
• Updates in real-time
• "All (24)" format

• Click to filter
• Active tab highlighted
• Maintains search query
• URL updates for bookmarking

Find specific quotes quickly:

• Located below tabs
• Search by client name
• Search by quote content
• Real-time filtering

• Results filter as you type
• Minimum 2 characters
• Searches name and description
• Case-insensitive

• X button in search field
• Or delete text
• Shows all quotes again

• Search works with tabs
• Example: "Smith" in "Open" tab
• Narrows results efficiently

• Filter by date range
• "This Week", "This Month"
• Custom date picker
• Useful for reporting

• Newest first (default)
• Oldest first
• Amount: High to Low
• Amount: Low to High
• Client name A-Z

Take actions directly from the quotes list:

• Click the quote card
• Opens full quote details
• Or click View button on hover

• Click Edit button (pencil icon)
• Opens quote editor
• Only available for drafts

• Click link icon
• URL copied to clipboard
• "Link copied!" toast appears
• Share via any channel

• Available for sent/viewed quotes
• Sends new email to client
• Updates "last sent" date
• Good for follow-ups

• Click trash icon or select from menu
• Confirmation dialog appears
• Type "DELETE" to confirm
• Cannot be undone

• Click duplicate icon
• Creates copy as new draft
• All content copied
• Edit and send as new

• View Quote
• Edit (if available)
• Duplicate
• Copy Link
• Resend (if sent)
• Delete

Deleting quotes requires confirmation to prevent accidents:

Delete Confirmation Dialog: When you click delete:

Dialog Title: "Delete this quote?"

• Client name shown
• Quote amount shown
• Warning about permanence
• "This action cannot be undone"

• Type "DELETE" to confirm
• Case-sensitive
• Button disabled until typed
• Prevents accidental deletion

• Red colored (danger)
• "Delete Quote" text
• Enabled only after typing DELETE
• Click to confirm deletion

• "Cancel" or X to close
• No changes made
• Quote remains

• Quote removed from list
• Toast: "Quote deleted"
• Cannot be recovered
• List refreshes automatically

Monitor quote progress through status changes:

Status Lifecycle: 1. Draft → Quote created, not sent 2. Sent → Email delivered to client 3. Viewed → Client opened the link 4. Signed → Client accepted and signed 5. Expired → Past validity date (if not signed)

• Draft → Deleted (if abandoned)
• Viewed → Expired (if no action)
• Any → Declined (if client rejects)

• Toast notifications on changes
• Email notifications (if enabled)
• Dashboard updates

• When quote was sent
• When client viewed
• Number of views
• Time spent viewing

• Full history of status changes
• Timestamps for each event
• Activity log

• Sent (no view): Check email was received
• Viewed (no action): Follow up call/email
• Expired: Offer to extend or create new

Actions trigger toast notifications for feedback:

• Quote sent successfully
• Link copied to clipboard
• Quote deleted
• Quote duplicated
• Error occurred

Toast Types:

• "Quote sent!"
• "Link copied!"
• "Quote saved"

• "Failed to send"
• "Error copying link"
• "Delete failed"

• "Email delivered"
• "Client viewed quote"

• Appears bottom-right
• Auto-dismisses after 3-4 seconds
• Click X to dismiss early
• Multiple toasts stack

• "View Quote" link
• "Undo" option (rare)
• "Learn More" link

What you see in different states:

• Skeleton cards appear
• Animated gray placeholders
• Maintains layout structure
• Usually 1-2 seconds

• Friendly illustration
• "No quotes yet" message
• "Create your first quote" CTA
• Links to AI and Manual options

• "No quotes match this filter"
• Suggestion to try different filter
• Clear filter button

• "No quotes found for [search term]"
• Suggestion to try different search
• Clear search button

• Error message displayed
• "Retry" button
• Check connection message
• Contact support link

Manage quotes efficiently at scale:

• Checkbox on each card
• "Select All" option
• Count shows selected

• Delete selected
• Export selected
• Limited bulk editing

• Export to CSV option
• Includes quote details
• Date range selection
• For reporting/accounting

• Old quotes can be archived
• Removes from main list
• Accessible in "Archived" section
• Keeps records without clutter

• Use filters to narrow list
• Archive old quotes
• Delete abandoned drafts
• Search is faster than scrolling

• Shows 20-50 per page
• "Load More" button
• Or page numbers
• Infinite scroll option