Ledger, Customer CRM

The brief and the build

Brief: Replace the spreadsheet with a purpose-built admin screen. Sortable and searchable customer table, inline editing, and permissions so viewers read, editors change, and only admins delete.

Internal tools succeed on small details. Column headers are buttons that set aria-sort, so sort state is available to screen readers. Rows edit in place with validation and an announced result, and the totals line updates with the current filter.

Switch the role in the header to see permissions change: viewers see no actions, editors can edit and add, and only admins can delete. In a real build the same checks run on the server, and the front end only hides what it already knows will be refused.

Light is a standard admin table. Dark is a dense monospace console. Creative is a bold, poster-style take on the same table.

Results

• Problem: A sales team kept customers in a shared spreadsheet that anyone could overwrite and nobody could sort.
• Built: A sortable, searchable customer table with inline editing and viewer, editor and admin roles.
• Lighthouse, light design, mobile profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100. Largest contentful paint 0.9 s, total blocking time 0 ms, layout shift 0. Desktop profile: Performance 100, Accessibility 100, Best Practices 100, SEO 100.
• Weight: page, stylesheet and script total 10.2 KB (4.2 KB gzipped). The script alone is 7.1 KB (2.9 KB gzipped).
• Requests: 3 (page, stylesheet, script). No external requests and no libraries beyond what the browser provides.
• Browser check: all three designs load at 1280 and 390 px wide with no console errors, failed requests or horizontal overflow. The dark and creative designs score 96 and 100 for accessibility (100 in the other three categories); the gap is colour contrast.

Measured on 2026-11-06 with Lighthouse 13.6 in headless Chromium against the built site. Mobile uses Lighthouse’s simulated throttling.

Stack

Highlights

• Sortable table
• Inline editing
• Role-based actions
• Pagination
• aria-sort headers