golomazov/hotelsync
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: compact filters row with dropdowns for floor and category

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
HotelSync
2026-03-23 14:04:17 +03:00
parent 3e9622d281
commit d46101b032
1 changed files with 28 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/pages/RoomsPage.tsx
View File

@@ -171,83 +171,36 @@ export function RoomsPage() {
))} ))}
</div> </div>
{/* Filters */} {/* Filters — one row */}
<div className="space-y-2"> <div className="flex items-center gap-2">
<div className="flex gap-3 flex-wrap"> <div className="relative flex-1 max-w-xs">
<div className="relative flex-1 min-w-48"> <Search size={14} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-slate-400" />
<Search size={15} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-400" />
<input <input
type="text" type="text"
className="input pl-9" className="input pl-8 text-sm"
placeholder="Поиск номера..." placeholder="Поиск номера..."
value={search} value={search}
onChange={e => setSearch(e.target.value)} onChange={e => setSearch(e.target.value)}
/> />
</div> </div>
<div className="flex gap-1.5 flex-wrap"> <select
<button className="input text-sm w-36 shrink-0"
onClick={() => setFloorFilter('all')} value={floorFilter === 'all' ? 'all' : String(floorFilter)}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors', onChange={e => setFloorFilter(e.target.value === 'all' ? 'all' : Number(e.target.value))}
floorFilter === 'all'
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
> >
Все этажи <option value="all">Все этажи</option>
</button> {floors.map(f => <option key={f} value={f}>{f} этаж</option>)}
{floors.map(f => ( </select>
<button
key={f}
onClick={() => setFloorFilter(f)}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
floorFilter === f
? 'bg-brand-600 text-white border-brand-600'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
{f} эт.
</button>
))}
</div>
</div>
{/* Category filter */}
{categories.length > 0 && ( {categories.length > 0 && (
<div className="flex gap-1.5 flex-wrap"> <select
<button className="input text-sm w-44 shrink-0"
onClick={() => setCategoryFilter('all')} value={categoryFilter}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors', onChange={e => setCategoryFilter(e.target.value)}
categoryFilter === 'all'
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
> >
Все категории <option value="all">Все категории</option>
</button> {categories.map(cat => <option key={cat.id} value={cat.id}>{cat.name}</option>)}
{categories.map(cat => ( <option value="">Без категории</option>
<button </select>
key={cat.id}
onClick={() => setCategoryFilter(cat.id)}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
categoryFilter === cat.id
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
{cat.name}
</button>
))}
<button
onClick={() => setCategoryFilter('')}
className={cn('px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors',
categoryFilter === ''
? 'bg-slate-700 text-white border-slate-700 dark:bg-slate-200 dark:text-slate-900 dark:border-slate-200'
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-slate-200 dark:border-slate-600',
)}
>
Без категории
</button>
</div>
)} )}
</div> </div>