Skip to content

Project Details - Customers Tab

Overview

The Project Details → Customers tab displays a paginated, searchable, and sortable list of customers associated with a project. This view is used to quickly inspect customer account information, balances, usage, and recent comments, and to access detailed customer profiles.

Page Structure

Top area: Project title and breadcrumb navigation. Tabs available at the top of the panel may include: - Customers (active tab) - Community Details - Distributors - Site Configurations

Customers Table

The main content is a table listing customers with the following columns: - ID (customer identifier / meter ID) - First Name - Middle Name - Last Name - Balance (displayed with currency, negative balances shown in red) - Average Weekly Usage (kWh) - Customer Category (e.g., Grid, Off-grid) - Status (badge indicating states like Meter ON, Meter OFF, Inactive, Turning Meter ON, etc.) - Latest Comment (short preview of most recent comment or 'No comments yet.') - Actions (View profile - eye icon, Delete - trash icon)

Search, Sorting & Pagination

  • Search: The 'Search Customer' box filters the table by customer name, ID, or meter_id.
  • Sorting: All table columns are sortable except for the 'Latest Comment' and 'Actions' columns.
  • Pagination: Users can select how many entries to show per page and use the pagination control to navigate between pages.

Row Actions & Behavior

  • View (eye icon): Opens the detailed customer profile view for that customer.
  • Delete (trash icon): Removes the customer record. The UI prompts for confirmation before permanent deletion.
  • Status and Latest Comment are display-only in this table; they cannot be edited directly from the list view.

Visual Details

  • Status badges use color-coded labels to quickly convey the customer's meter status.
  • Balances are shown with currency and negative balances are highlighted (red) for visibility.
  • The Latest Comment column displays a shortened preview of the most recent comment and timestamp.

Data Source

Customer list data is retrieved from the backend data store when the page loads and when filters or pagination controls are changed.

Notes & Recommendations

  • Consider adding inline editing or quick actions if admins need to change status/comments frequently.
  • Optionally include an export feature (CSV/Excel) if bulk reporting is required.
  • If performance becomes an issue for very large projects, implement server-side pagination and search.