fix(work-orders): stack week selector with day tabs in the filter bar

Keep SH-240 nav grouped under the type row and coerce the Live badge for JSX &&.
This commit is contained in:
Arthur Bassi 2026-08-20 09:40:02 -03:00
parent 0c75bd42f4
commit 959dda08fe
3 changed files with 19 additions and 16 deletions

View file

@ -12,11 +12,7 @@ export function DayTabs({ weekMonday, selectedDayIso, onChange, disabled = false
const days = weekdaysMonFri(weekMonday); const days = weekdaysMonFri(weekMonday);
return ( return (
<div <div className="flex items-center gap-1.5 overflow-x-auto" role="tablist" aria-label="Weekdays">
className="flex items-center gap-1.5 overflow-x-auto px-4 pb-2"
role="tablist"
aria-label="Weekdays"
>
{days.map((iso) => { {days.map((iso) => {
const label = formatDayTabLabel(iso); const label = formatDayTabLabel(iso);
const active = iso === selectedDayIso; const active = iso === selectedDayIso;

View file

@ -62,7 +62,7 @@ export function WeekSelector({ weekMonday, onChange, disabled = false }: WeekSel
)} )}
> >
{label} {label}
{live && <WeekLiveBadge />} {Boolean(live) && <WeekLiveBadge />}
<ChevronDown size={14} aria-hidden /> <ChevronDown size={14} aria-hidden />
</MenuAnchorButton> </MenuAnchorButton>
<Popover <Popover

View file

@ -4,6 +4,7 @@ import { DayTabs } from "@/app/(protected)/workorders/_components/list/filter-ba
import { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter"; import { DispatcherFilter } from "@/app/(protected)/workorders/_components/list/filter-bar/dispatcher-filter";
import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector"; import { WeekSelector } from "@/app/(protected)/workorders/_components/list/filter-bar/week-selector";
import { WoTypeSegment } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-segment"; import { WoTypeSegment } from "@/app/(protected)/workorders/_components/list/filter-bar/wo-type-segment";
import { Text } from "@/components/ui/text";
type WorkOrdersFilterBarProps = { type WorkOrdersFilterBarProps = {
weekMonday: string; weekMonday: string;
@ -45,7 +46,7 @@ export function WorkOrdersFilterBar({
className="-mx-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface)" className="-mx-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface)"
aria-disabled={disabled} aria-disabled={disabled}
> >
<div className="flex h-14 items-center gap-3 px-4"> <div className="flex items-center gap-3 px-4 pt-2">
<DispatcherFilter <DispatcherFilter
selectedIds={dispatcherIds} selectedIds={dispatcherIds}
onChange={onDispatcherChange} onChange={onDispatcherChange}
@ -54,17 +55,23 @@ export function WorkOrdersFilterBar({
currentUserId={currentUserId} currentUserId={currentUserId}
disabled={disabled} disabled={disabled}
/> />
<WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
<WoTypeSegment value={typeFilter} onChange={onTypeChange} disabled={disabled} />
<div className="flex-1" /> <div className="flex-1" />
<span className="shrink-0 text-xs font-medium text-muted-foreground">{resultLabel}</span> <Text variant="caption" tone="muted" className="shrink-0">
{resultLabel}
</Text>
</div>
<div className="flex flex-col gap-1 px-4 pt-1" aria-label="Week and day">
<WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
<DayTabs
weekMonday={weekMonday}
selectedDayIso={selectedDayIso}
onChange={onSelectedDayChange}
disabled={disabled}
/>
</div>
<div className="flex items-center gap-3 px-4 pt-1 pb-2">
<WoTypeSegment value={typeFilter} onChange={onTypeChange} disabled={disabled} />
</div> </div>
<DayTabs
weekMonday={weekMonday}
selectedDayIso={selectedDayIso}
onChange={onSelectedDayChange}
disabled={disabled}
/>
</div> </div>
); );
} }