kimai-plugin-heatmap/.planning/seeds/SEED-001-native-entity-pickers.md

id	title	planted	trigger	status
SEED-001	Replace basic dropdown with Kimai's native TomSelect entity pickers	2026-04-08	next milestone focused on UX polish, or when activity filtering gets added	planted

SEED-001: Native Entity Pickers

Why

Phase 4 shipped a plain <select> dropdown for project filtering. Kimai has a production-ready cascading picker system (Customer → Project → Activity) built on TomSelect with autocomplete, search, color-coded options, and consistent styling. Using it would:

• Enable activity filtering (currently descoped)
• Add customer-level filtering (cascade: customer → project)
• Match Kimai's native UX patterns
• Get autocomplete/search for free

What

Replace the <select class="form-select"> in heatmap.ts with Kimai's KimaiFormSelect.js + TomSelect integration. Use data-api-url, data-related-select, and data-empty-url attributes to wire up cascading.

Breadcrumbs

• dev/kimai/assets/js/forms/KimaiFormSelect.js — cascading logic (lines 386-447)
• dev/kimai/assets/js/forms/KimaiFormTomselectPlugin.js — base TomSelect wrapper
• dev/kimai/src/Form/Type/ProjectType.php — Symfony form type with api_data config
• dev/kimai/src/Form/Type/ActivityType.php — activity picker form type
• API routes: get_customers, get_projects, get_activities
• Current implementation: assets/src/heatmap.ts init() function, lines 236-276

Scope Estimate

Medium — needs backend changes (new API endpoint or reuse existing routes) + frontend refactor of the filter section. Tests need updating.