Client Detail Page

The Client Detail page provides a comprehensive view of a single client record. It combines a header section with financial summary cards and a seven-tab interface covering overview, contacts, projects, communications, invoices, documents, and analytics. The URL updates as you switch tabs, enabling deep linking and browser history navigation.

Header section

The header displays the client's essential information at a glance:

• Avatar — An 80px circle showing the client's uploaded image or colour-coded initials
• Client name — The display name (company name for companies, full name for individuals)
• Status chip — Colour-coded chip: Active (green), Inactive (grey), On Hold (orange), or Archived (red)
• Pricing tier chip — Standard, Preferred, VIP, or Custom
• Primary contact — If a primary contact exists, their name, email (as a mailto link), phone (as a tel link), and website (as an external link) are shown
• Edit button — Opens the client form in edit mode
• More actions menu — Additional options including Send Email, Client Node Access, Create Project, and Log Call

Client notice banner

If the client has a client_notice value and a notice_type set, a prominent alert banner appears below the header:

• Warning type — Yellow alert with an mdi-alert icon. Use for payment issues, credit problems, or critical reminders.
• General type — Blue alert with an mdi-information icon. Use for general notes, special handling instructions, or contractual reminders.

Financial summary cards

Four summary cards are displayed in a row beneath the header, providing a quick financial snapshot:

1. Total Revenue — Lifetime revenue from paid invoices, with a percentage showing growth or decline compared to the previous year
2. Outstanding Balance — Sum of unpaid invoices (statuses: sent, viewed, partial, overdue), with the count of overdue invoices
3. Credit Available — Remaining credit calculated as credit_limit minus outstanding balance. Shows "Unlimited" if no credit limit is set.
4. Active Projects — Count of currently active projects, with the total project count

Tab 1 — Overview

The Overview tab consolidates the most important client information into a single view:

• Contact information — Client type, email, phone, mobile, website
• Addresses — Visiting, billing, delivery, and shipping addresses. Each address includes a Google Maps link for quick navigation.
• Financial details — Credit limit, payment terms, discount percentage, VAT number, currency
• Contact persons summary — Count of contacts with the primary contact highlighted. Contacts with Node access show a "Node User" badge. Contacts with portal access show a "Portal" badge.
• Client associations — For companies, a list of associated individuals. For individuals, a list of associated companies. Each association shows the role and primary status.
• Tags — All assigned tags displayed as chips
• Notes — Public notes and internal notes (staff only)

Tab 2 — Contacts

The Contacts tab hosts the full ContactManager component. From here you can add new contacts, edit existing ones, delete contacts, set the primary contact, manage portal access, and view Node synchronisation status. See the Managing Client Contacts article for full details.

Tab 3 — Projects

A data table listing all projects assigned to this client. Columns include:

• Project Name — Clickable link to the project detail page
• Status — Colour-coded status chip (e.g., Draft, Confirmed, Active, Completed, Cancelled)
• Dates — Start and end dates
• Total Value — Formatted in the client's currency
• Actions — View button to navigate to the project

Tab 4 — Communications

A threaded communication history for this client. Each thread displays:

• Subject — Thread title
• Status chip — Active or Archived
• Messages count — Number of messages in the thread
• Last activity — Relative timestamp
• Creator — Who started the thread
• Message preview — Truncated preview of the latest message
• Type icons — Icons indicating message type: message bubble for notes, email icon for emails, phone icon for calls, pound sign for payment-related

Click New Thread to start a new communication thread with the client.

Tab 5 — Invoices

A data table of all invoices, quotes, and credit notes linked to this client. Includes status chips, amounts, dates, and quick actions for viewing and downloading.

Tab 6 — Documents

A file list showing all documents attached to the client. Each file displays:

• Type icon — PDF, image, Word, Excel, or generic file icon
• File name
• File size
• Upload date
• Download button

Click Upload File to attach new documents such as contracts, insurance certificates, or photos.

Tab 7 — Analytics

The Analytics tab renders the ClientAnalyticsTab component, which provides revenue trends, project frequency analysis, payment behaviour patterns, and health score history over time.

Deep linking

When you select a tab, the URL updates with a ?tab= query parameter (e.g., /clients/{id}?tab=contacts). If you bookmark or share this URL, the page opens directly on the specified tab. The tab is also restored from the URL when the page mounts.

Mobile experience

On smaller screens, the tab labels are hidden and only icons are displayed. Cards and tables adapt to a single-column layout with touch-friendly tap targets.

Next steps

Continue to the next article to learn about managing client contacts, including adding contacts, setting the primary contact, managing portal access, and working with Node-synced contacts.