Skip to main content

Customers

Path: /customers

Image: Customers Page

Page Layout​

Left Panel: Customer List​

Search Bar:

  • Text input at top
  • Filters list as you type

Filter Drawer (accessed via button):

  • Hide Zeroes checkbox
  • Companies checkboxes:
    • United Tile
    • American Tile
    • Farley's Glass
    • Classic Stone

Customer Table Columns:

  • Name
  • Balance
  • Max Age (colored: green for 0-59, yellow for 60-89, red for 90+)

Table Footer:

  • Page controls
  • Rows per page dropdown

Right Panel: Customer Details​

When no customer selected:

  • Shows message: "No Customer Selected. Please Select One From The Left."

When customer selected:

  • Header shows customer name and location
  • Share link icon

Tabs:

  • Info
  • [Company Name] with balance amount for each company

Info Tab Contents​

Total Balance:

  • Dollar amount displayed
  • Download icon button (exports CSV report)

Contacts Section:

  • Cards showing contact information:
    • Name
    • Email address
    • Phone numbers
    • "Send Email" button (if email exists)

Activity Updates Section:

  • Text input field: "Add a note..."
  • Post button
  • List of previous updates with timestamps

Company Tab Contents​

Company Balance:

  • Dollar amount displayed
  • Three buttons:
    • Enter Payment
    • Enter Invoice
    • Generate Account Statement (downloads PDF)

Company Outstanding Invoices Table:

  • Columns: Invoice, Job, Description, Date, Amount, Paid, Balance, Days
  • Days column colored (green/yellow/red)
  • Three-dot menu per row with options:
    • Edit Invoice
    • View Payments
    • View Updates
    • Delete Invoice

What Happens When You...​

Double-click a customer row:

  • Right panel loads that customer's details
  • Info tab selected by default

Click a company tab:

  • Shows balance for that specific company
  • Shows invoices for that company only

Click "Enter Payment" or "Enter Invoice":

  • Navigates to respective form page
  • Pre-fills customer and company information

Click "Generate Account Statement":

  • Downloads PDF file
  • Filename: company-statement-[customer]-[company].pdf

Add a note in Activity Updates:

  1. Type text in input field
  2. Click "Post"
  3. Note appears in list below with timestamp

Click invoice menu → Edit:

  • Opens dialog with tabs:
    • Edit Invoice (form with date, amount, description)
    • View Payments (table of payments applied)
    • View Updates (activity log)
    • Delete Invoice (confirmation required)

Click download icon (Total Balance section):

  • Exports CSV file with customer report data
  • Filename: customer-report-[name]-[date].csv