From f8a190df60d8a1464cc7c613e0366bdd589b833d Mon Sep 17 00:00:00 2001
From: Arthur Bassi <arthur.winiarski.ranger@outlook.com>
Date: Tue, 21 Jul 2026 09:10:06 -0300
Subject: [PATCH] fix(work-orders): polish slide-over and advanced search
 visuals

---
 .../_components/detail/slide-over-footer.tsx  | 12 +++++++++-
 .../_components/detail/slide-over-header.tsx  |  9 +++++--
 .../work-orders-advanced-search-sheet.tsx     | 24 ++++++++++++-------
 src/components/ui/dot-toggle-pill.tsx         | 19 ++++++++-------
 4 files changed, 45 insertions(+), 19 deletions(-)

diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
index 30ce7084..61c5c555 100644
--- a/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-footer.tsx
@@ -131,7 +131,17 @@ export function SlideOverFooter({
             Save
           </Button>
         ) : (
-          <Button variant="default" className="gap-1.5 text-[12px]" onClick={onEdit}>
+          <Button
+            variant="default"
+            className="gap-1.5"
+            sx={{
+              padding: "3px 10px",
+              minWidth: 0,
+              fontSize: 12,
+              fontWeight: 500,
+            }}
+            onClick={onEdit}
+          >
             <Pencil size={13} />
             Edit WO
           </Button>
diff --git a/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
index 02f8fdf0..147535fe 100644
--- a/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
+++ b/src/app/(protected)/workorders/_components/detail/slide-over-header.tsx
@@ -27,8 +27,13 @@ export function SlideOverHeader({
     >
       <div className="flex min-w-0 flex-1 flex-wrap items-center gap-2">
         <h2
-          className="text-[15px] font-semibold leading-none"
-          style={{ color: "var(--color-text-primary)" }}
+          className="leading-none"
+          style={{
+            fontSize: 15,
+            fontWeight: 600,
+            lineHeight: "15px",
+            color: "var(--color-text-primary)",
+          }}
         >
           #{row.woNumber || "—"}
         </h2>
diff --git a/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx b/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx
index d0ca251f..d2a32105 100644
--- a/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx
+++ b/src/app/(protected)/workorders/_components/list/advanced-search/work-orders-advanced-search-sheet.tsx
@@ -15,6 +15,7 @@ import { AdvDocPill, AdvFilterPill, AdvStatusPill } from "./adv-filter-pill";
 import { AdvMultiSelect } from "./adv-multi-select";
 import { AdvSection } from "./adv-section";
 import { AdvTypeGrid } from "./adv-type-grid";
+import { getPmTypeIcon } from "@/app/(protected)/workorders/_components/list/table/pm-type-icons";
 import { Button } from "@/components/ui/button";
 import { DateField } from "@/components/ui/date-input";
 import { IconCloseButton } from "@/components/ui/icon-close-button";
@@ -37,6 +38,7 @@ import {
   countAdvancedFilters,
   isDefaultDateRange,
 } from "@/domain/work-orders/utils/advanced-filters-utils";
+import { getDispatcherAvatarColor } from "@/domain/work-orders/utils/dispatcher-avatar-color";
 
 type WorkOrdersAdvancedSearchSheetProps = {
   open: boolean;
@@ -221,13 +223,16 @@ export function WorkOrdersAdvancedSearchSheet({
             onToggle={(value) => toggleIn("dispatchers", value)}
             onBulkToggle={(values, select) => setMany("dispatchers", values, select)}
             placeholder="Search assigned to…"
-            renderLeft={(id) =>
-              id === ASSIGNEE_FILTER_UNASSIGNED ? (
-                <UserX size={14} className="shrink-0 text-muted-foreground" />
-              ) : (
-                <span className="size-2 shrink-0 rounded-full bg-muted-foreground" />
-              )
-            }
+            renderLeft={(id) => {
+              if (id === ASSIGNEE_FILTER_UNASSIGNED) {
+                return <UserX size={14} className="shrink-0 text-muted-foreground" />;
+              }
+              const user = users.find((u) => String(u.id) === id);
+              const color = getDispatcherAvatarColor(user ?? { id, name: id });
+              return (
+                <span className="size-2 shrink-0 rounded-full" style={{ background: color }} />
+              );
+            }}
           />
         </AdvSection>
 
@@ -240,7 +245,6 @@ export function WorkOrdersAdvancedSearchSheet({
                 label={status}
                 dotColor={WIZARD_STATUS_DOTS[status]}
                 selected={draft.statuses.has(status)}
-                selectedBg="var(--color-primary-tint)"
                 onClick={() => toggleIn("statuses", status)}
               />
             ))}
@@ -254,6 +258,10 @@ export function WorkOrdersAdvancedSearchSheet({
             onToggle={(value) => toggleIn("pmTypes", value)}
             onBulkToggle={(values, select) => setMany("pmTypes", values, select)}
             placeholder="Search pm type…"
+            renderLeft={(pmType) => {
+              const Icon = getPmTypeIcon(pmType);
+              return <Icon size={14} className="shrink-0 text-muted-foreground" />;
+            }}
           />
         </AdvSection>
 
diff --git a/src/components/ui/dot-toggle-pill.tsx b/src/components/ui/dot-toggle-pill.tsx
index cd68e7c0..d0f5bea9 100644
--- a/src/components/ui/dot-toggle-pill.tsx
+++ b/src/components/ui/dot-toggle-pill.tsx
@@ -22,8 +22,14 @@ export function DotTogglePill({
   style,
   ...props
 }: DotTogglePillProps) {
-  const selectedStyle: CSSProperties | undefined =
-    selected && selectedBg ? { background: selectedBg } : undefined;
+  const softBg = selected
+    ? (selectedBg ?? `color-mix(in srgb, ${dotColor} 18%, transparent)`)
+    : `color-mix(in srgb, ${dotColor} 10%, transparent)`;
+
+  const pillStyle: CSSProperties = {
+    background: softBg,
+    ...style,
+  };
 
   return (
     <button
@@ -31,18 +37,15 @@ export function DotTogglePill({
       disabled={disabled}
       className={cn(
         "inline-flex h-[26px] cursor-pointer items-center gap-1.5 rounded-full border px-2.5 transition-colors",
-        selected ? "border-primary" : "border-border bg-background",
+        selected ? "border-primary" : "border-border",
         disabled && "cursor-not-allowed opacity-50",
         className,
       )}
-      style={{ ...selectedStyle, ...style }}
+      style={pillStyle}
       {...props}
     >
       <span className="size-[7px] shrink-0 rounded-full" style={{ background: dotColor }} />
-      <span
-        className={cn("text-xs font-medium", !selected && "text-muted-foreground")}
-        style={selected && selectedText ? { color: selectedText } : undefined}
-      >
+      <span className="text-xs font-medium" style={{ color: selectedText ?? dotColor }}>
         {label}
       </span>
     </button>