From 9dec7cb4483085326bb35a4447d458267dd7b802 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Thu, 16 Apr 2026 19:13:30 -0400
Subject: [PATCH] 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    | 109 +++++++++------------------
 src/pages/workorders/list/styles.css |  81 ++++++++++++++++++++
 2 files changed, 117 insertions(+), 73 deletions(-)

diff --git a/src/pages/workorders/list/List.js b/src/pages/workorders/list/List.js
index 9d2681ac..a5ff8d3e 100644
--- a/src/pages/workorders/list/List.js
+++ b/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">
-          <span className="breadcrumbItem active">Work Orders</span>
+        <div className="woListToolbar">
+          <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="searchHeader">
-            <h3 className="searchHeading">
-              <span className="fa-stack iconStack">
-                <i className="fa fa-square fa-stack-2x text-primary"></i>
-                <i className="fa fa-clipboard fa-stack-1x fa-inverse"></i>
-              </span>
-              <span>Search for Work Orders</span>
-            </h3>
-            <span className="searchSubheading">Use the settings menu to adjust how to filter the list, and which columns to display.</span>
-          </div>
-
-          <div className="searchControls">
-            <div className="searchLeft">
-              <div className="searchInputGroup">
-                <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 className="woFilterBar">
+          <button
+            className={`woFilterChip ${statusFilter === "" ? "active" : ""}`}
+            onClick={() => setStatusFilter("")}
+          >
+            All
+          </button>
+          {statuses.map((s) => (
+            <button
+              key={s}
+              className={`woFilterChip ${statusFilter === s ? "active" : ""}`}
+              onClick={() => setStatusFilter(statusFilter === s ? "" : s)}
+            >
+              {s}
+            </button>
+          ))}
         </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}
diff --git a/src/pages/workorders/list/styles.css b/src/pages/workorders/list/styles.css
index 86aa788f..707d262a 100644
--- a/src/pages/workorders/list/styles.css
+++ b/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;