diff --git a/src/components/estimate-builder/UnassignedItemsSection.tsx b/src/components/estimate-builder/UnassignedItemsSection.tsx index 0c3d0b5..5f6f3a3 100644 --- a/src/components/estimate-builder/UnassignedItemsSection.tsx +++ b/src/components/estimate-builder/UnassignedItemsSection.tsx @@ -1,6 +1,6 @@ import type { Component, Accessor } from 'solid-js'; -import { Show, For } from 'solid-js'; -import { ListTree } from 'lucide-solid'; +import { Show, For, createSignal, createMemo } from 'solid-js'; +import { ListTree, Search, X } from 'lucide-solid'; import ItemRow from '../ItemRow'; import LazyItem from '../LazyItem'; import type { EstimateItem } from '../../types'; @@ -20,6 +20,16 @@ interface UnassignedItemsSectionProps { } export const UnassignedItemsSection: Component = (props) => { + const [filterText, setFilterText] = createSignal(''); + + const filteredItems = createMemo(() => { + const text = filterText().toLowerCase().trim(); + if (!text) return props.unassignedItems; + return props.unassignedItems.filter(item => + (item.description || '').toLowerCase().includes(text) + ); + }); + return ( 0}>
= (p

Drag these items into scopes to begin your estimate.

- - {props.unassignedItems.length} Items Pending - +
+
+ + setFilterText(e.currentTarget.value)} + placeholder="Filter unassigned items..." + class="pl-10 pr-10 py-2 bg-card border border-border rounded-xl text-sm focus:border-primary focus:ring-4 focus:ring-primary/10 outline-none transition-all w-64 shadow-sm" + /> + + + +
+ + {filteredItems().length} of {props.unassignedItems.length} Items + +
{ if (e.target === e.currentTarget) props.clearSelection(e); }} @@ -64,7 +94,7 @@ export const UnassignedItemsSection: Component = (p
- + {(item) => (