# Themed Status Dropdown Implementation Plan

> **For agentic workers:** REQUIRED: Use superpowers:subagent-driven-development (if subagents available) or superpowers:executing-plans to implement this plan. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Replace the native status `<select>` in the delivery filters with a themed dropdown that matches the app styling and does not expose browser-default chrome.

**Architecture:** Keep the change local to the existing filters component so behavior stays the same while the rendering shifts from a native form control to an app-styled button plus floating menu. Reuse the existing filter state and active-chip logic so downstream list filtering does not change.

**Tech Stack:** React 18, Vitest, Tailwind utility classes with CSS variables.

---

## File Structure

- Modify: `src/components/orders/OrderFilters.jsx`
  Responsible for rendering the search field and the themed status dropdown, including open/close behavior and option selection.

- Modify: `src/components/orders/OrderFilters.test.jsx`
  Server-rendered tests for the new dropdown markup and the existing active-chip behavior.

## Chunk 1: Themed Dropdown Rendering

### Task 1: Replace the Native `<select>` With a Custom Dropdown

**Files:**
- Modify: `src/components/orders/OrderFilters.jsx`

- [ ] **Step 1: Replace the status `<select>` with a button-triggered dropdown**

Use the existing `statusOptions` array and `filters.displayStatus` state, but render a button that opens a floating menu of options instead of the browser's native select chrome.

- [ ] **Step 2: Keep the current filter semantics unchanged**

Selecting an option must still call `setFilters((current) => ({ ...current, displayStatus: value }))`.

- [ ] **Step 3: Keep the component visually aligned with the app theme**

Use the same rounded borders, surface/background colors, accent border on focus/open, and muted text used elsewhere in the dashboard.

### Task 2: Update the Component Test

**Files:**
- Modify: `src/components/orders/OrderFilters.test.jsx`

- [ ] **Step 1: Update the expectation that currently checks for `<select>`**

Assert that the markup no longer contains a native `select` element.

- [ ] **Step 2: Add a markup assertion for the custom trigger**

Verify that the closed state still renders the selected label and the status control remains present.

- [ ] **Step 3: Run the focused test**

Run: `npm test -- --run src/components/orders/OrderFilters.test.jsx`

Expected: PASS.

### Task 3: Build Verification

**Files:**
- None

- [ ] **Step 1: Run the production build**

Run: `npm run build`

Expected: PASS.