Dashboard Redesign — Card Grid

Proposal Dashboard Full mockup ↗
Problem & Goals

Dashboard Redesign

The current dashboard dedicates ~75% of the viewport to a single action queue list. Financial visibility — renewal values, status breakdown — is absent. The office manager and CEO need at-a-glance financial health alongside staff triage.

The redesign restructures the dashboard as a card grid: KPI strip at top for quick reads, workflow-specific cards below, and a more prominent renewals chart showing status and value.

Goals

  • Add renewal value as a KPI visible to office manager and CEO
  • Make the renewals chart more prominent with status breakdown and clickable bars
  • Separate action types into workflow-specific cards (renewals, signups, data issues)
  • Make the layout flexible for future dashboard cards
  • Activity feed fills available space with pagination

1 Layout — Card Grid

Three-column layout with a full-width KPI strip across the top. Each dashboard widget is a card placed into the grid. New cards can be added without changing the existing layout.

KPI STRIP — full width (Active · Pending · Renewals · Value · Quick Find) CARD GRID Renewals Chart cols 1–2 · stacked bars · clickable · values Activity Feed col 3 · spans all rows fills height · paginated Renewal Actions col 1 · overdue + due + upcoming New Signups col 2 · pending review Data Issues col 1 · missing email/address
Card grid layout — three columns, activity feed spanning all rows
Technical notes
  • CSS grid: grid-template-columns: 1fr 1fr 320px
  • Chart card: grid-column: 1 / 3
  • Activity feed: grid-column: 3; grid-row: 1 / 4
  • New cards slot into the grid by adding a grid item — no layout restructuring needed

2 KPI Strip

Four metric tiles plus a quick-find search, spanning the full width above the card grid.

287 Active Members
2 Pending
Awaiting approval
14 June Renewals
1 overdue
£4,280 June Value
Renewal revenue this month
  • Large numeral with small uppercase label — same pattern as current dashboard
  • Active, Pending and Renewals counts use existing data already shown on the current dashboard
  • June Value is a new capability — see Renewal Value
  • Quick Find searches by organisation name or account number
Technical notes
  • Active, Pending, Renewals: existing useKpiCounts hook
  • Quick Find: existing useQuickFind hook — ilike on name and account_number, limit 6
  • June Value: new hook required — data source TBD (see Renewal Value)

3 Renewal Value New

A new KPI tile showing the total monetary value of the current month's renewals. This is the key new financial metric requested by the office manager and CEO.

Blocked — data source TBD

The system has no membership pricing data. This tile requires a data source for monetary values per membership. Awaiting client input on whether pricing comes from Xero integration, manual entry, or a new subscription table.

The tile is included in the design. Implementation is blocked until the pricing data source is confirmed.

4 Renewals Chart

A much larger renewals chart spanning two columns of the dashboard. The current month breaks down into status segments; every bar is clickable and shows the monetary value.

Renewals by Month

2026 · showing count and value
Renewed / Paid
Pending / Due
Overdue

Features

  • Much larger than the current sidebar chart — takes a prominent position on the dashboard
  • Current month stacked by status: renewed/paid, pending/due, overdue
  • Clickable bars — navigates to Members list filtered by that month
  • Per-month £ value shown below each bar
  • Past months in neutral grey; future months as outlined placeholders
Technical notes
  • Spans grid-column: 1 / 3 — two of three grid columns
  • Current month stacked via CSS flex with column-reverse direction
  • Bar click navigates to /members?renewal_month=N
  • Renewal counts: existing useRenewalCounts hook, extended with status breakdown
  • Value data: new hook required — depends on pricing data source

5 Action Cards

Three separate cards, one per workflow: renewal management, signup review, and data cleanup. Each card shows top items with overflow linking to the Members list.

Renewal Actions

11 members
▶ Overdue 1
Renewal Overdue
Skye Smokery Ltd
April renewal — 18 days overdue
▶ Due This Month 6
Renewal Due
Ben Nevis Outdoor Gear
WHC-00094 · Not yet contacted
Renewal Due
Fort William Bakehouse
WHC-00076 · Not yet contacted
Renewal Due
Caledonian Cycles
WHC-00087 · Chasing
▶ Upcoming 4
Upcoming Renewal
Morvern Community Woodland
WHC-00038 · Renewal month: July
Upcoming Renewal
Arisaig Marine
WHC-00072 · Renewal month: July

Features

  • One card per workflow: renewal management, signup review, data cleanup
  • Renewal Actions has three collapsible tiers: overdue, due this month, upcoming
  • Whole item row is clickable — navigates to org record
  • Overflow links to Members list with the relevant filter pre-applied
  • Signups show sector, region and size band metadata for quick context
  • Data issues identify the specific problem (missing email vs missing address)
Technical notes
  • Renewal Actions: existing useActionQueue hook — overdue, due, upcoming tiers
  • New Signups: membership_status = 'new' from same hook
  • Data Issues: orgs missing primary email or contact address, from same hook
  • Overflow links require URL-driven filters on Members page (see Navigation Pattern)

6 Activity Feed

A timeline of recent membership activity shown in plain language. This is what staff see — a friendly narrative of what's happening, separate from the technical event log.

Recent Activity

New signup received
Highland Horizons B&B submitted a membership application
2 hours ago
Membership approved
Oban Print Workshop approved by Claire — Xero contact created
Yesterday 11:32
New signup received
Glencoe Outdoor Co. submitted a membership application
Yesterday 09:14
Webhook delivered
membership_approved → xero-contact-sync · 200 OK
Yesterday 11:33
Renewal paid
Ben Nevis Outdoor Gear — £320 received via Xero
Yesterday 09:50
Membership approved
Loch Lomond Activities approved by Claire
13 Jun · 14:07
Renewal paid
Caledonian Cycles — £280 received via Xero
11 Jun · 14:40

Features

  • Fills available space in the right column — shows as many events as will fit
  • Same event types as the current dashboard, displayed in a friendlier format
  • Load more appends the next page of events below — the feed grows, button moves down
  • Coloured dots by event type; connector lines between entries
Technical notes
  • Existing useRecentEvents hook, current limit of 10 removed
  • Pagination: offset-based, fetches next page on "Load more" click
  • Grid placement: grid-column: 3; grid-row: 1 / 4 — fills all rows
  • Not the admin /events page — same event types, friendlier display

8 URL-Driven Member Filters New

The Members page needs to support opening with filters already applied from a link. Today, filters reset every time you visit the page — there's no way to link someone to a filtered view.

Links to the Members list — from the dashboard, from emails, from bookmarks — will open with the right filters already applied. For example, a colleague can share a link to "all overdue renewals" and it just works.

Technical notes

This is a prerequisite for the dashboard overflow links and chart bar clicks. Without it, those links would land on an unfiltered Members page.

  • Replace local useState filter state with useSearchParams
  • Seed filters from URL on mount; update URL when filters change
  • Param mapping: renewal_status=due|upcoming|overdue, renewal_month=N, issue=missing_data, status=active|new
  • Existing filter UI unchanged — just wired to the URL

9 Clickable Items

Action items are clickable as a whole row — the entire item navigates to the member record, not just the explicit Open/Review button.

The button remains as a visible affordance, but the click target is the full item. This is a change from the current dashboard where only the button is clickable.

Change from current behaviour. Try clicking any item in the mockups above — the whole row responds, not just the button.

10 Open Questions

  • Membership pricing data source — The June Value KPI requires a monetary value per membership. This data doesn't currently exist in the system. Awaiting client input on where pricing data comes from (Xero integration? Manual entry? Subscription table?).