Replace field-specific search with global search input

- Remove dropdown selector and search button
- Use standalone woSearchInput class to avoid inherited border issues
- Single text input searches across all fields as you type
This commit is contained in:
Adam Moussa 2026-04-16 19:10:54 -04:00
parent fe62f5fb0a
commit 0d473b97db
2 changed files with 18 additions and 11 deletions

View file

@ -78,19 +78,12 @@ export default function WorkOrdersList() {
<div className="searchControls">
<div className="searchLeft">
<div className="searchInputGroup">
<select className="searchDropdown" defaultValue="Title">
<option>Title</option>
<option>WO #</option>
<option>Location</option>
<option>Status</option>
</select>
<input
className="searchInput"
className="woSearchInput"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Enter search criteria here..."
placeholder="Search work orders..."
/>
<button className="searchButton">Search!</button>
</div>
<div className="viewToggle">
<button

View file

@ -124,8 +124,6 @@
height: 38px;
padding: 6px 12px;
border: 1px solid #ccc;
border-left: none;
border-right: 1px solid #ccc;
flex: 1;
font-size: 14px;
outline: none;
@ -136,6 +134,22 @@
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.woSearchInput {
height: 38px;
padding: 6px 12px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 14px;
outline: none;
width: 100%;
box-sizing: border-box;
}
.woSearchInput:focus {
border-color: #66afe9;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
}
.searchButton {
height: 38px;
padding: 6px 20px;