Replace filter dropdowns with toggle buttons on Requests page

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Krao Hasanee
2026-03-27 00:38:15 -04:00
parent 989ebcb024
commit d7948a9afe
+24 -23
View File
@@ -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>
))}
</select>
<select
value={filterUser}
onChange={e => setFilterUser(e.target.value)}
style={{ minWidth: 160 }}
<button
key={co.id}
className={`btn btn-sm ${filterCompany === co.id ? 'btn-primary' : 'btn-outline'}`}
onClick={() => setFilterCompany(f => f === co.id ? '' : co.id)}
>
<option value="">All Users</option>
{[...new Set(submissions.map(s => s.submitted_by_name).filter(Boolean))].sort().map(name => (
<option key={name} value={name}>{name}</option>
))}
</select>
{(filterCompany || filterUser) && (
<button className="btn btn-outline btn-sm" onClick={() => { setFilterCompany(''); setFilterUser(''); }}>
Clear Filters
{co.name}
</button>
)}
))}
</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 => (
<button
key={name}
className={`btn btn-sm ${filterUser === name ? 'btn-primary' : 'btn-outline'}`}
onClick={() => setFilterUser(f => f === name ? '' : name)}
>
{name}
</button>
))}
</div>
)}
{submissions.length === 0 ? (
<div className="empty-state">