Skip to content

feat: revamp codeplug summary page with channel map and improved layout #61

Description

@pskillen

Problem

The Summary page (/summary) is a sparse grid of five SummaryCard components (entity counts + name previews) and a single import timestamp line. It does not give operators a spatial overview of the active codeplug — where channels are, how zones relate geographically — despite CodeplugMap already supporting multi-channel plots and zone hulls.

As the default nav landing when a project is active, Summary should act as a dashboard, not just a table of contents.

Intended outcome

Revamp /summary into a project dashboard with an embedded channel map and improved information hierarchy.

Map

  • Embed CodeplugMap showing all geolocated channels in the active codeplug (respect hideFromMap and useLocation filters — same rules as channel list/map elsewhere).
  • Show zone hulls by default (toggle or match channel detail defaults — document choice).
  • Sensible default height (e.g. 360–480px) and responsive width; map fills content area on desktop.
  • Empty state when no geolocated channels: short message + link to Channels.
  • Reuse existing map settings (tile provider, Mapbox token, maidenhead grid from Settings) via useMapSettings.

Layout revamp

Replace the flat SimpleGrid of cards with a clearer hierarchy, for example:

┌─────────────────────────────────────────┐
│ Project header (name, description*)     │
│ Import meta · Edit project*             │
├─────────────────────────────────────────┤
│           CodeplugMap (channels)        │
├──────────────────┬──────────────────────┤
│ Entity summary   │ Quick stats / links  │
│ cards (compact)  │ (optional)           │
└──────────────────┴──────────────────────┘

*Description and Edit button ship with the metadata ticket if both land together; layout should accommodate them either way.

Concrete improvements:

  • Project context at top — active project name; import meta.importedAt / sourceFiles as secondary line.
  • Map as primary visual — above or beside entity cards depending on viewport (base: stack; md+: side-by-side or map-first).
  • Compact entity cards — retain count + preview names + "View all" links; consider smaller cards or a single row of stat chips on wide screens.
  • Optional: total geolocated channel count vs total channels near the map.

Components

  • Extend or compose SummaryCard only if needed; avoid duplicating map wiring already in CodeplugMap.
  • Add Summary.md sidecar if a new layout component is extracted.

Affected

  • src/routes/Summary.tsx — layout + CodeplugMap embed
  • src/components/report/SummaryCard.tsx — possible compact variant
  • src/App.test.tsx — update assertions if heading/structure changes
  • docs/features/codeplug-project/ or docs/features/map/ — note Summary as dashboard entry point

Notes / dependencies

  • Pairs with the codeplug-project metadata ticket (description/notes on Summary + edit route) — coordinate so header area is designed once.
  • Reuses CodeplugMap — no new map implementation.
  • Related: feat: import CSV into active codeplug #58 (import into active project) — Summary is a natural home for import-into-active UI later.
  • Performance: Summary map should use the same channel filtering as report pages; no extra data fetch.

Out of scope

  • Full-screen map route (channel list / detail already embed maps).
  • Editing channels or zones from Summary (links to list routes only).
  • Map-based CRUD (add channel by clicking map).

Manual verify

  1. Open active project → Summary shows map with channel markers for geolocated channels.
  2. Zones with geolocated members show hulls.
  3. hideFromMap channels excluded.
  4. Resize viewport — layout remains usable (stacked on mobile).
  5. Project with no locations — empty state, cards still show counts.

Workflow note

Branch from origin/main, atomic conventional commits (layout scaffold → map embed → card polish → docs/tests), PR linking Closes #.

Metadata

Metadata

Assignees

No one assigned

    Labels

    enhancementNew feature or request

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions