From 959dda08feea812ca26a2c9a49866b73fb527fcf Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.bassi@luby.com.br>
Date: Thu, 20 Aug 2026 09:40:02 -0300
Subject: [PATCH] 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 &&.
---
 .../_components/list/filter-bar/day-tabs.tsx  |  6 +----
 .../list/filter-bar/week-selector.tsx         |  2 +-
 .../filter-bar/work-orders-filter-bar.tsx     | 27 ++++++++++++-------
 3 files changed, 19 insertions(+), 16 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx
index 94308b41..1745af5a 100644
--- a/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/day-tabs.tsx
@@ -12,11 +12,7 @@ export function DayTabs({ weekMonday, selectedDayIso, onChange, disabled = false
   const days = weekdaysMonFri(weekMonday);
 
   return (
-    <div
-      className="flex items-center gap-1.5 overflow-x-auto px-4 pb-2"
-      role="tablist"
-      aria-label="Weekdays"
-    >
+    <div className="flex items-center gap-1.5 overflow-x-auto" role="tablist" aria-label="Weekdays">
       {days.map((iso) => {
         const label = formatDayTabLabel(iso);
         const active = iso === selectedDayIso;
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx
index b7403964..49f985f4 100644
--- a/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/week-selector.tsx
@@ -62,7 +62,7 @@ export function WeekSelector({ weekMonday, onChange, disabled = false }: WeekSel
         )}
       >
         {label}
-        {live && <WeekLiveBadge />}
+        {Boolean(live) && <WeekLiveBadge />}
         <ChevronDown size={14} aria-hidden />
       </MenuAnchorButton>
       <Popover
diff --git a/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx b/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx
index 85c71275..3f0bdb13 100644
--- a/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx
+++ b/src/app/(protected)/workorders/_components/list/filter-bar/work-orders-filter-bar.tsx
@@ -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 { 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 { Text } from "@/components/ui/text";
 
 type WorkOrdersFilterBarProps = {
   weekMonday: string;
@@ -45,7 +46,7 @@ export function WorkOrdersFilterBar({
       className="-mx-2.5 shrink-0 border-b border-(--color-border) bg-(--color-bg-surface)"
       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
           selectedIds={dispatcherIds}
           onChange={onDispatcherChange}
@@ -54,17 +55,23 @@ export function WorkOrdersFilterBar({
           currentUserId={currentUserId}
           disabled={disabled}
         />
-        <WeekSelector weekMonday={weekMonday} onChange={onWeekChange} disabled={disabled} />
-        <WoTypeSegment value={typeFilter} onChange={onTypeChange} disabled={disabled} />
         <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>
-      <DayTabs
-        weekMonday={weekMonday}
-        selectedDayIso={selectedDayIso}
-        onChange={onSelectedDayChange}
-        disabled={disabled}
-      />
     </div>
   );
 }