---
id: SEED-001
title: Replace basic dropdown with Kimai's native TomSelect entity pickers
planted: 2026-04-08
trigger: next milestone focused on UX polish, or when activity filtering gets added
status: 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.