mirror of
https://github.com/Sea-Haven-Industries/shoc-frontend-new.git
synced 2026-10-06 21:42:06 +00:00
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:
parent
0c75bd42f4
commit
959dda08fe
3 changed files with 19 additions and 16 deletions
|
|
@ -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;
|
||||||
|
|
|
||||||
|
|
@ -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
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue