hotel-manage-stack/maintenance
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Collapse status and filter chip bars on mobile

Browse source 
Both chip bars now start collapsed with a summary header showing
the active selection (e.g. "In Progress" / "Rooms view · Mine only").
Tap the header to expand and change filters.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jtricerolph 2026-07-20 22:35:30 +00:00
parent 06d1d01f91
commit fc993c63bc
2 changed files with 85 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

97
frontend/src/pages/Summary.tsx
View file

@ -1,5 +1,5 @@
import { useCallback, useEffect, useMemo, useState } from 'react'
import { Plus, RefreshCw, Camera, BedDouble, Layers } from 'lucide-react'
import { Plus, RefreshCw, Camera, BedDouble, Layers, ChevronDown } from 'lucide-react'
import type { Task, Category, Location, AppConfig, TaskStatus } from '../types'
import { STATUS_LABELS, can } from '../types'
import { fetchTasks, fetchLocations, fetchConfig, fetchOccupancy } from '../api'
@ -27,6 +27,9 @@ export default function Summary() {
const [roomsView, setRoomsView] = useState(false)
const [groupByLocation, setGroupByLocation] = useState(false)
const [statusOpen, setStatusOpen] = useState(false)
const [filtersOpen, setFiltersOpen] = useState(false)
const [showNew, setShowNew] = useState(false)
const [openTask, setOpenTask] = useState<number | null>(null)
@ -118,42 +121,68 @@ export default function Summary() {
{error && <div className="error-banner">{error}</div>}
<div className="chip-bar">
<button className={`chip ${statusFilter === null ? 'active' : ''}`} onClick={() => setStatusFilter(null)}>
All open
</button>
{OPEN_STATUSES.map(s => (
<button key={s} className={`chip ${statusFilter === s ? 'active' : ''}`} onClick={() => setStatusFilter(statusFilter === s ? null : s)}>
{STATUS_LABELS[s]}{counts[s] ? ` (${counts[s]})` : ''}
</button>
))}
<div className="filter-section">
<div className="filter-section-header" onClick={() => setStatusOpen(v => !v)}>
<span className="filter-section-label">Status</span>
<span className={`filter-section-summary${statusFilter === null ? ' muted' : ''}`}>
{statusFilter === null ? 'All open' : `${STATUS_LABELS[statusFilter]}${counts[statusFilter] ? ` (${counts[statusFilter]})` : ''}`}
</span>
<ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${statusOpen ? ' open' : ''}`} />
</div>
{statusOpen && (
<div className="chip-bar">
<button className={`chip ${statusFilter === null ? 'active' : ''}`} onClick={() => setStatusFilter(null)}>
All open
</button>
{OPEN_STATUSES.map(s => (
<button key={s} className={`chip ${statusFilter === s ? 'active' : ''}`} onClick={() => setStatusFilter(statusFilter === s ? null : s)}>
{STATUS_LABELS[s]}{counts[s] ? ` (${counts[s]})` : ''}
</button>
))}
</div>
)}
</div>
<div className="chip-bar">
{/* Category chips hidden while in rooms-view (rooms filter is the active "category") */}
{!roomsView && categories.map(c => (
<button key={c.id} className={`chip ${categoryFilter === c.id ? 'active' : ''}`} onClick={() => setCategoryFilter(categoryFilter === c.id ? null : c.id)}>
{c.name}{categoryCounts[c.id] ? ` (${categoryCounts[c.id]})` : ''}
</button>
))}
<button className={`chip ${mineOnly ? 'active' : ''}`} onClick={() => setMineOnly(!mineOnly)}>
Mine
</button>
{roomsCategoryExists && (
<button
className={`chip ${roomsView ? 'active' : ''}`}
title="Show all rooms tasks — greyed tasks have an in-house guest so access may be limited"
onClick={toggleRoomsView}
>
<BedDouble size={13} strokeWidth={1.75} />
{roomsView && roomsCounts
? `Rooms (${roomsCounts.free} free${roomsCounts.arriving ? ` • ${roomsCounts.arriving} arriving` : ''}${roomsCounts.occupied ? ` • ${roomsCounts.occupied} occupied` : ''})`
: 'Rooms Accessible View'}
</button>
<div className="filter-section">
<div className="filter-section-header" onClick={() => setFiltersOpen(v => !v)}>
<span className="filter-section-label">Filters</span>
<span className={`filter-section-summary${!categoryFilter && !mineOnly && !roomsView && !groupByLocation ? ' muted' : ''}`}>
{[
!roomsView && categoryFilter ? categories.find(c => c.id === categoryFilter)?.name : null,
roomsView ? 'Rooms view' : null,
mineOnly ? 'Mine only' : null,
groupByLocation ? 'Grouped' : null,
].filter(Boolean).join(' · ') || 'All categories'}
</span>
<ChevronDown size={14} strokeWidth={1.75} className={`filter-section-chevron${filtersOpen ? ' open' : ''}`} />
</div>
{filtersOpen && (
<div className="chip-bar">
{!roomsView && categories.map(c => (
<button key={c.id} className={`chip ${categoryFilter === c.id ? 'active' : ''}`} onClick={() => setCategoryFilter(categoryFilter === c.id ? null : c.id)}>
{c.name}{categoryCounts[c.id] ? ` (${categoryCounts[c.id]})` : ''}
</button>
))}
<button className={`chip ${mineOnly ? 'active' : ''}`} onClick={() => setMineOnly(!mineOnly)}>
Mine
</button>
{roomsCategoryExists && (
<button
className={`chip ${roomsView ? 'active' : ''}`}
title="Show all rooms tasks — greyed tasks have an in-house guest so access may be limited"
onClick={toggleRoomsView}
>
<BedDouble size={13} strokeWidth={1.75} />
{roomsView && roomsCounts
? `Rooms (${roomsCounts.free} free${roomsCounts.arriving ? ` • ${roomsCounts.arriving} arriving` : ''}${roomsCounts.occupied ? ` • ${roomsCounts.occupied} occupied` : ''})`
: 'Rooms Accessible View'}
</button>
)}
<button className={`chip ${groupByLocation ? 'active' : ''}`} onClick={() => setGroupByLocation(v => !v)}>
<Layers size={13} strokeWidth={1.75} /> Group by location
</button>
</div>
)}
<button className={`chip ${groupByLocation ? 'active' : ''}`} onClick={() => setGroupByLocation(v => !v)}>
<Layers size={13} strokeWidth={1.75} /> Group by location
</button>
</div>
{tasks.length === 0 && !loading && (