diff --git a/apps/edr-freight-web/backoffice/src/components/filters/FilterBar.tsx b/apps/edr-freight-web/backoffice/src/components/filters/FilterBar.tsx index 6a0aaac96..e42b70252 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/FilterBar.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/FilterBar.tsx @@ -84,7 +84,16 @@ export function FilterBar({ onChange={(e) => controls.setSearchText(e.currentTarget.value)} size="xs" radius="lg" - styles={{ input: { fontWeight: 400 } }} + // Regular weight (not the Button-driven 600 the rest of the bar + // uses) and a solid, fully-opaque border/text — same "opaque, not + // faint" fix the inactive pill trigger got. + styles={{ + input: { + fontWeight: 400, + borderColor: "var(--mantine-color-gray-6)", + color: "var(--mantine-color-gray-9)", + }, + }} style={{ minWidth: 160, flex: "1 1 160px" }} /> )} diff --git a/apps/edr-freight-web/backoffice/src/components/filters/FilterPill.tsx b/apps/edr-freight-web/backoffice/src/components/filters/FilterPill.tsx index 0275f67ad..af97d2fcf 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/FilterPill.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/FilterPill.tsx @@ -20,6 +20,10 @@ const BODIES: Record> = { route: RouteBody, }; +// Most bodies fit a narrow popover; a date range needs room for the presets +// sidebar next to the calendar, so it gets a wider minimum. +const DROPDOWN_WIDTH: Partial> = { date: 340 }; + export interface FilterPillProps { def: FilterDef; value: FilterValue | undefined; @@ -57,7 +61,7 @@ export function FilterPill({ def, value, onChange, autoOpen }: FilterPillProps) active ? ( - + ) : ( @@ -77,7 +81,7 @@ export function FilterPill({ def, value, onChange, autoOpen }: FilterPillProps) {active ? `${def.label} | ${formatFilterValue(def, value!)}` : def.label} - + setOpened(false)} /> diff --git a/apps/edr-freight-web/backoffice/src/components/filters/bodies/BooleanBody.tsx b/apps/edr-freight-web/backoffice/src/components/filters/bodies/BooleanBody.tsx index fc59fa3bb..cd9f8ed11 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/bodies/BooleanBody.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/bodies/BooleanBody.tsx @@ -1,5 +1,5 @@ import { useState } from "react"; -import { Button, Radio, Stack } from "@mantine/core"; +import { Radio, Stack } from "@mantine/core"; import { DEFAULT_OP } from "../types"; import type { BooleanFilterDef, Operator } from "../types"; @@ -10,23 +10,23 @@ export function BooleanBody({ def, value, onChange, onClose }: FilterBodyProps(value?.op ?? DEFAULT_OP.boolean); const [v, setV] = useState(value?.v[0] ?? ""); - const apply = () => { - onChange(v ? { op, v: [v] } : undefined); + // Two mutually-exclusive options — apply the moment one is picked, same as + // EnumBody's single-select radio. No Apply button needed. + const pick = (next: string) => { + setV(next); + onChange({ op, v: [next] }); onClose(); }; return ( - + - ); } diff --git a/apps/edr-freight-web/backoffice/src/components/filters/bodies/DateBody.tsx b/apps/edr-freight-web/backoffice/src/components/filters/bodies/DateBody.tsx index a7c90c8c9..b2032170d 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/bodies/DateBody.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/bodies/DateBody.tsx @@ -1,6 +1,7 @@ import { useState } from "react"; import { Button, Stack } from "@mantine/core"; import { DatePickerInput } from "@mantine/dates"; +import { CalendarDays } from "lucide-react"; import { getDateRangePresets } from "@/components/common/dateRangePresets"; import { startOfDayIso, endOfDayIso, parseDateStr } from "../dates"; @@ -58,6 +59,8 @@ export function DateBody({ def, value, onChange, onClose }: FilterBodyProps} placeholder="Any" value={[from, to]} onChange={([f, t]) => { @@ -71,6 +74,8 @@ export function DateBody({ def, value, onChange, onClose }: FilterBodyProps ) : ( } placeholder="Any" value={from} onChange={setFrom} diff --git a/apps/edr-freight-web/backoffice/src/components/filters/bodies/EnumBody.tsx b/apps/edr-freight-web/backoffice/src/components/filters/bodies/EnumBody.tsx index 459246dff..3bc352dcb 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/bodies/EnumBody.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/bodies/EnumBody.tsx @@ -56,11 +56,20 @@ export function EnumBody({ def, value, onChange, onClose }: FilterBodyProps { - onChange(selected.length ? { op, v: selected } : undefined); + const apply = (v: string[] = selected) => { + onChange(v.length ? { op, v } : undefined); onClose(); }; + // Single-select is a radio pick, not a build-up-a-set gesture — apply the + // instant one is chosen, same as picking an option in a plain Select. + // Checkbox (multiple) still needs the explicit Apply: picking several + // options is a multi-step gesture the popover shouldn't close mid-way through. + const applyRadio = (v: string) => { + setSelected([v]); + apply([v]); + }; + return ( @@ -95,7 +104,7 @@ export function EnumBody({ def, value, onChange, onClose }: FilterBodyProps setSelected(v ? [v] : [])} + onChange={(v) => v && applyRadio(v)} aria-label={`Filter by ${def.label}`} > @@ -120,9 +129,11 @@ export function EnumBody({ def, value, onChange, onClose }: FilterBodyProps )} - + {multiple && ( + + )} ); } diff --git a/apps/edr-freight-web/backoffice/src/components/filters/bodies/RouteBody.tsx b/apps/edr-freight-web/backoffice/src/components/filters/bodies/RouteBody.tsx index 9e86199a9..55097b05b 100644 --- a/apps/edr-freight-web/backoffice/src/components/filters/bodies/RouteBody.tsx +++ b/apps/edr-freight-web/backoffice/src/components/filters/bodies/RouteBody.tsx @@ -20,6 +20,13 @@ export function RouteBody({ def, value, onChange, onClose }: FilterBodyProps