Redesign work order list toolbar with inline search and filter chips

- Replace ActionBar dropdown and search section with clean toolbar
- Prominent "+ New Work Order" button on the right
- Inline search input in the toolbar
- Status filter chips (All, Open, In Progress, On Hold, Done, Cancelled)
- Show total count next to title
- Remove unused ActionBar import and viewMode state

src/pages/workorders/list/List.js

@@ -5,7 +5,6 @@ import usePaginatedList from "../../../hooks/usePaginatedList";
 import { fetchWorkOrdersPaged } from "./api";
 import Table from "./Table";
 import DeleteModal from "../../../components/DeleteModal";
-import ActionBar from "../../../components/ActionBar";
 import "./styles.css";
 
 export default function WorkOrdersList() {
@@ -23,7 +22,6 @@ export default function WorkOrdersList() {
     err
   } = usePaginatedList(fetchWorkOrdersPaged);
 
-  const [viewMode, setViewMode] = useState("list");
   const [deleteModal, setDeleteModal] = useState({
     isOpen: false,
     item: null,
@@ -48,87 +46,52 @@ export default function WorkOrdersList() {
     }
   };
 
+  const [statusFilter, setStatusFilter] = useState("");
+  const statuses = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
+
   return (
     <>
-      <ActionBar
-        moduleName="Work Orders"
-        moduleIcon="fa-clipboard"
-        onNew={() => navigate("/workorders/new")}
-        onBulkEdit={() => console.log("Bulk edit")}
-        selectedCount={0}
-      />
-
       <section className="listPage">
-        <div className="breadcrumb">
+        <div className="woListToolbar">
-          <span className="breadcrumbItem active">Work Orders</span>
+          <div className="woListToolbarLeft">
+            <h2 className="woListTitle">Work Orders</h2>
+            <span className="woListCount">{totalCount} total</span>
+          </div>
+          <div className="woListToolbarRight">
+            <input
+              className="woSearchInput"
+              value={search}
+              onChange={(e) => { setSearch(e.target.value); setPage(1); }}
+              placeholder="Search..."
+            />
+            <button className="woNewBtn" onClick={() => navigate("/workorders/new")}>
+              + New Work Order
+            </button>
+          </div>
         </div>
 
-        <div className="searchSection">
+        <div className="woFilterBar">
-          <div className="searchHeader">
+          <button
-            <h3 className="searchHeading">
+            className={`woFilterChip ${statusFilter === "" ? "active" : ""}`}
-              <span className="fa-stack iconStack">
+            onClick={() => setStatusFilter("")}
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
+          >
-                <i className="fa fa-clipboard fa-stack-1x fa-inverse"></i>
+            All
-              </span>
+          </button>
-              <span>Search for Work Orders</span>
+          {statuses.map((s) => (
-            </h3>
+            <button
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
+              key={s}
-          </div>
+              className={`woFilterChip ${statusFilter === s ? "active" : ""}`}
-
+              onClick={() => setStatusFilter(statusFilter === s ? "" : s)}
-          <div className="searchControls">
+            >
-            <div className="searchLeft">
+              {s}
-              <div className="searchInputGroup">
+            </button>
-                <input
+          ))}
-                  className="woSearchInput"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Search work orders..."
-                />
-              </div>
-              <div className="viewToggle">
-                <button
-                  className={`viewBtn ${viewMode === "list" ? "active" : ""}`}
-                  title="List view"
-                  onClick={() => setViewMode("list")}
-                >
-                  <i className="fa fa-navicon"></i>
-                </button>
-                <button
-                  className={`viewBtn ${viewMode === "card" ? "active" : ""}`}
-                  title="Card view"
-                  onClick={() => setViewMode("card")}
-                >
-                  <i className="fa fa-th-large"></i>
-                </button>
-              </div>
-            </div>
-
-            <div className="searchRight">
-              <div className="paginationTop">
-                <button
-                  className="pageBtn"
-                  disabled={page === 1}
-                  onClick={() => setPage(page - 1)}
-                >
-                  «
-                </button>
-                <span className="pageNumber">{page}</span>
-                <button
-                  className="pageBtn"
-                  disabled={page >= totalPages}
-                  onClick={() => setPage(page + 1)}
-                >
-                  »
-                </button>
-              </div>
-            </div>
-          </div>
         </div>
 
         <Table
           loading={loading}
           error={err}
-          rows={rows}
+          rows={statusFilter ? rows.filter((r) => r.status === statusFilter) : rows}
           onEdit={(item) => navigate(`/workorders/${item.id}`)}
           onDelete={handleDeleteClick}
           page={page}

src/pages/workorders/list/styles.css

@@ -337,6 +337,87 @@
   margin-left: 4px;
 }
 
+.woListToolbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 16px 20px;
+  border-bottom: 1px solid #e5e5e5;
+}
+
+.woListToolbarLeft {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+}
+
+.woListTitle {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+}
+
+.woListCount {
+  font-size: 13px;
+  color: #999;
+}
+
+.woListToolbarRight {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.woListToolbarRight .woSearchInput {
+  width: 260px;
+}
+
+.woNewBtn {
+  padding: 8px 16px;
+  background: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.woNewBtn:hover {
+  background: #0069d9;
+}
+
+.woFilterBar {
+  display: flex;
+  gap: 6px;
+  padding: 10px 20px;
+  border-bottom: 1px solid #e5e5e5;
+  background: #fafafa;
+}
+
+.woFilterChip {
+  padding: 5px 14px;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+  background: #fff;
+  font-size: 12px;
+  color: #666;
+  cursor: pointer;
+}
+
+.woFilterChip:hover {
+  border-color: #007bff;
+  color: #007bff;
+}
+
+.woFilterChip.active {
+  background: #007bff;
+  color: #fff;
+  border-color: #007bff;
+}
+
 /* Table wrapper */
 .tableContainer {
   background: white;