Customer CRM

A lightweight browser CRM for tracking accounts, interactions, and customer lifetime value.

Overview

Customer CRM is a single-page app for sales and account teams who need a simple customer database without enterprise software overhead. Browse and edit customers in an AG-Grid table, log call and email notes, filter by status or segment, and see value distribution at a glance. All data persists in your browser via localStorage.

Key features

Customer database

• AG-Grid table with Customer Name, Company, Contact, Email, Last Interaction, Value, Status, and Segment columns
• Eight sample accounts on first load; inline cell editing in the grid
• Pinned total row summing customer value
• Color-coded status labels: Active, Prospect, At Risk, Churned

Add and edit customers

• Alpine.js form to add new customers or edit existing ones via the grid Edit button
• Fields for name, company, contact, email, status, segment, last interaction date, and lifetime value
• Cancel edit returns the form to add mode

Search and filters

• Text search across name, company, contact, email, status, and segment
• Dropdown filters for status and segment
• Live count of filtered vs total customers

Grouping and KPIs

• Four summary cards: Total Customers, Active Accounts, At Risk / Churned, and Total Value
• Group the grid by status or segment with expandable group rows

Interaction log

• Click Log on any customer row to open their notes panel
• Add dated interaction notes (calls, emails, meetings)
• Last interaction date updates automatically when a note is logged

Charts

• Bar chart showing customer count by value bucket ($0–25k, $25k–75k, $75k–150k, $150k+)
• Chart refreshes when filters change

Import and export

• Export filtered customers to Excel (.xlsx) via SheetJS
• Import customers from Excel to append new rows

Data & persistence

• Customer records and interaction notes auto-save to localStorage on every change
• Dark mode preference is remembered separately
• Reload the page to restore your last session; clear browser storage to reset to sample data

Charts & reporting

• Value distribution bar chart (Chart.js)
• KPI summary cards driven by the current filter set

Built with

Tailwind CSS, AG-Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.