From 79f7b4782a6b5fd53a28bf0494d201aabef92a48 Mon Sep 17 00:00:00 2001
From: Adam Moussa <166072409+amoussa1229@users.noreply.github.com>
Date: Fri, 17 Apr 2026 12:45:29 -0400
Subject: [PATCH] Add assigned to filter on work order list

- Dropdown filter next to status chips with All Assignees, Unassigned, and user list
- Filters combine with status filter
- Styled as rounded select matching filter bar aesthetic
---
 src/pages/workorders/list/List.js    | 28 ++++++++++++++++++++++++++--
 src/pages/workorders/list/styles.css | 23 +++++++++++++++++++++++
 2 files changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/pages/workorders/list/List.js b/src/pages/workorders/list/List.js
index a5ff8d3e..5970f835 100644
--- a/src/pages/workorders/list/List.js
+++ b/src/pages/workorders/list/List.js
@@ -1,8 +1,9 @@
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { useNavigate } from "react-router";
 import { toast } from "react-toastify";
 import usePaginatedList from "../../../hooks/usePaginatedList";
 import { fetchWorkOrdersPaged } from "./api";
+import { fetchUsers } from "../api";
 import Table from "./Table";
 import DeleteModal from "../../../components/DeleteModal";
 import "./styles.css";
@@ -47,8 +48,14 @@ export default function WorkOrdersList() {
   };
 
   const [statusFilter, setStatusFilter] = useState("");
+  const [assigneeFilter, setAssigneeFilter] = useState("");
+  const [users, setUsers] = useState([]);
   const statuses = ["Open", "In Progress", "On Hold", "Done", "Cancelled"];
 
+  useEffect(() => {
+    fetchUsers().then(setUsers).catch(() => {});
+  }, []);
+
   return (
     <>
       <section className="listPage">
@@ -86,12 +93,29 @@ export default function WorkOrdersList() {
               {s}
             </button>
           ))}
+          <span className="woFilterDivider" />
+          <select
+            className="woFilterSelect"
+            value={assigneeFilter}
+            onChange={(e) => setAssigneeFilter(e.target.value)}
+          >
+            <option value="">All Assignees</option>
+            <option value="__unassigned">Unassigned</option>
+            {users.map((u) => (
+              <option key={u.id} value={u.name}>{u.name}</option>
+            ))}
+          </select>
         </div>
 
         <Table
           loading={loading}
           error={err}
-          rows={statusFilter ? rows.filter((r) => r.status === statusFilter) : rows}
+          rows={rows.filter((r) => {
+            if (statusFilter && r.status !== statusFilter) return false;
+            if (assigneeFilter === "__unassigned" && r.assignedTo) return false;
+            if (assigneeFilter && assigneeFilter !== "__unassigned" && r.assignedTo !== assigneeFilter) return false;
+            return true;
+          })}
           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 707d262a..e08af143 100644
--- a/src/pages/workorders/list/styles.css
+++ b/src/pages/workorders/list/styles.css
@@ -418,6 +418,29 @@
   border-color: #007bff;
 }
 
+.woFilterDivider {
+  width: 1px;
+  height: 20px;
+  background: #ddd;
+  margin: 0 4px;
+}
+
+.woFilterSelect {
+  height: 28px;
+  padding: 0 10px;
+  border: 1px solid #ddd;
+  border-radius: 16px;
+  font-size: 12px;
+  color: #666;
+  background: #fff;
+  cursor: pointer;
+  outline: none;
+}
+
+.woFilterSelect:focus {
+  border-color: #007bff;
+}
+
 /* Table wrapper */
 .tableContainer {
   background: white;