From d7948a9afeb541222e6e0dc0b44c7f63f4ce3cef Mon Sep 17 00:00:00 2001
From: Krao Hasanee <kraohasanee@Kraos-MacBook-Pro.local>
Date: Fri, 27 Mar 2026 00:38:15 -0400
Subject: [PATCH] Replace filter dropdowns with toggle buttons on Requests page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/pages/team/Requests.jsx | 47 +++++++++++++++++++------------------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/src/pages/team/Requests.jsx b/src/pages/team/Requests.jsx
index a6ceacc..f3ccfeb 100755
--- a/src/pages/team/Requests.jsx
+++ b/src/pages/team/Requests.jsx
@@ -41,33 +41,34 @@ export default function Requests() {
         </div>
       </div>
 
-      <div style={{ display: 'flex', gap: 10, marginBottom: 20, flexWrap: 'wrap' }}>
-        <select
-          value={filterCompany}
-          onChange={e => setFilterCompany(e.target.value)}
-          style={{ minWidth: 160 }}
-        >
-          <option value="">All Companies</option>
+      {companies.length > 0 && (
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 10 }}>
+          <button className={`btn btn-sm ${!filterCompany ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterCompany('')}>All</button>
           {companies.map(co => (
-            <option key={co.id} value={co.id}>{co.name}</option>
+            <button
+              key={co.id}
+              className={`btn btn-sm ${filterCompany === co.id ? 'btn-primary' : 'btn-outline'}`}
+              onClick={() => setFilterCompany(f => f === co.id ? '' : co.id)}
+            >
+              {co.name}
+            </button>
           ))}
-        </select>
-        <select
-          value={filterUser}
-          onChange={e => setFilterUser(e.target.value)}
-          style={{ minWidth: 160 }}
-        >
-          <option value="">All Users</option>
+        </div>
+      )}
+      {[...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort().length > 0 && (
+        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 20 }}>
+          <button className={`btn btn-sm ${!filterUser ? 'btn-primary' : 'btn-outline'}`} onClick={() => setFilterUser('')}>All Users</button>
           {[...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort().map(name => (
-            <option key={name} value={name}>{name}</option>
+            <button
+              key={name}
+              className={`btn btn-sm ${filterUser === name ? 'btn-primary' : 'btn-outline'}`}
+              onClick={() => setFilterUser(f => f === name ? '' : name)}
+            >
+              {name}
+            </button>
           ))}
-        </select>
-        {(filterCompany || filterUser) && (
-          <button className="btn btn-outline btn-sm" onClick={() => { setFilterCompany(''); setFilterUser(''); }}>
-            Clear Filters
-          </button>
-        )}
-      </div>
+        </div>
+      )}
 
       {submissions.length === 0 ? (
         <div className="empty-state">