gabriel/beetask
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: redesign task filter bar UI

Browse source
This commit is contained in:
Gabriel Menezes 2026-10-08 10:22:49 -04:00
parent b399992dc5
commit ec9cf347ec
1 changed files with 52 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
frontend/src/components/TaskFilterBar.tsx
View file

@ -1,8 +1,7 @@
import { Filter, RefreshCw, Search } from 'lucide-react'
import { RefreshCw, Search } from 'lucide-react'
import { TASK_STATUS_LABELS, TASK_STATUS_OPTIONS, type TaskStatus } from '../types/task'
import type { Project } from '../services/projectService'
import type { Category } from '../types/category'
import { MultiSelectChips } from './MultiSelectChips'
import { CategoryIcon } from './CategoryIcon'
import { MultiSelectDropdown } from './MultiSelectDropdown'
import type { TaskFilters } from './taskFilters'
@ -68,39 +67,65 @@ export function TaskFilterBar({
)}
</div>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
{projects.length > 0 && (
<div className="flex items-center gap-2">
<Filter size={16} className="shrink-0 text-text-muted" />
<span className="text-[10px] font-black uppercase tracking-widest text-text-muted whitespace-nowrap">Projetos</span>
<MultiSelectChips
<MultiSelectDropdown
label="Projetos"
allLabel="Todos os projetos"
options={projects.map((p) => ({
value: p.id,
label: p.name,
color: p.color ?? undefined,
icon: p.icon ? <CategoryIcon iconName={p.icon} size={14} /> : undefined,
}))}
selected={filters.projectIds}
onChange={(projectIds) => update({ projectIds })}
/>
</div>
)}
<div className="flex items-center gap-2">
<Filter size={16} className="shrink-0 text-text-muted" />
<span className="text-[10px] font-black uppercase tracking-widest text-text-muted whitespace-nowrap">Status</span>
<MultiSelectChips
<MultiSelectDropdown
label="Status"
allLabel="Todos os status"
options={TASK_STATUS_OPTIONS.map((s) => ({
value: s,
label: TASK_STATUS_LABELS[s],
color: STATUS_CHIP_COLORS[s],
icon: (
<div
className="h-3 w-3 shrink-0 rounded-full"
style={{ backgroundColor: STATUS_CHIP_COLORS[s] }}
/>
),
}))}
selected={filters.statuses}
onChange={(statuses) => update({ statuses })}
/>
</div>
{categories.length > 0 && (
<MultiSelectDropdown
label="Categorias"
allLabel="Todas as categorias"
options={categories.map((c) => ({
value: c.id,
label: c.name,
icon: <CategoryIcon iconName={c.icon} size={14} />,
}))}
selected={filters.categoryIds}
onChange={(categoryIds) => update({ categoryIds })}
/>
)}
{assignees.length > 0 && (
<div className="grid gap-2">
<div className="flex flex-col gap-2">
<MultiSelectDropdown
label="Funcionário"
allLabel="Todos os funcionários"
options={assignees.map((assignee) => ({
value: assignee.id,
label: assignee.name,
icon: <UserAvatar name={assignee.name} photo={assignee.photo} size="sm" />,
}))}
selected={filters.userIds}
onChange={(userIds) => update({ userIds })}
/>
{currentUserId !== undefined && (
<label className="flex cursor-pointer items-center gap-2 self-start">
<input
@ -116,36 +141,9 @@ export function TaskFilterBar({
</span>
</label>
)}
<MultiSelectDropdown
label="Funcionario"
allLabel="Todos os funcionarios"
options={assignees.map((assignee) => ({
value: assignee.id,
label: assignee.name,
icon: <UserAvatar name={assignee.name} photo={assignee.photo} size="sm" />,
}))}
selected={filters.userIds}
onChange={(userIds) => update({ userIds })}
/>
</div>
)}
{categories.length > 0 && (
<div className="flex items-center gap-2">
<Filter size={16} className="shrink-0 text-text-muted" />
<span className="text-[10px] font-black uppercase tracking-widest text-text-muted whitespace-nowrap">Categorias</span>
<MultiSelectChips
options={categories.map((c) => ({
value: c.id,
label: c.name,
color: c.color,
icon: <CategoryIcon iconName={c.icon} size={14} />,
}))}
selected={filters.categoryIds}
onChange={(categoryIds) => update({ categoryIds })}
/>
</div>
)}
</div>
)
}