ui: move hide-completed toggle into filter bar as checkbox next to SMS filter

This commit is contained in:
Hermes 2026-08-19 12:16:52 +02:00
parent a3cd0838f0
commit 0cdd9f52a4
2 changed files with 26 additions and 28 deletions

View File

@ -487,27 +487,7 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], totalGroups: totalGr
Перетаскивайте секции за ручку слева, чтобы изменить порядок отображения.
</p>
</div>
<div className="flex items-center gap-2">
<Badge tone="neutral">{totalGroupsProp ?? totalGroups} групп</Badge>
{typeof onToggleHideCompleted === "function" && (
<button
type="button"
onClick={() => onToggleHideCompleted((prev) => !prev)}
title={hideCompleted ? "Показать доставленные/отгруженные" : "Скрыть доставленные/отгруженные"}
className={`inline-flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs font-medium transition ${
hideCompleted
? "border-[var(--color-border)] bg-[var(--color-surface)] text-[var(--color-text)]"
: "border-[var(--color-accent)] bg-[var(--color-accent-soft)] text-[var(--color-accent)]"
}`}
>
<span
aria-hidden="true"
className={`inline-block h-2 w-2 rounded-full ${hideCompleted ? "bg-[var(--color-accent)]" : "bg-[var(--color-text-muted)]"}`}
/>
{hideCompleted ? "Скрыть завершённые" : "Показать завершённые"}
</button>
)}
</div>
<Badge tone="neutral">{totalGroupsProp ?? totalGroups} групп</Badge>
</div>
<OrderFilters
@ -515,6 +495,8 @@ export const LogisticsReadinessBoard = ({ orderGroups = [], totalGroups: totalGr
setFilters={setFilters}
statusOptions={statusOptions}
cities={cities}
hideCompleted={hideCompleted}
onToggleHideCompleted={onToggleHideCompleted}
/>
{!hasActiveFilters && totalGroups > PAGE_SIZE && (

View File

@ -77,7 +77,7 @@ const DropdownSelect = ({ value, options, onChange, placeholder }) => {
);
};
export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities = [] }) => {
export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities = [], hideCompleted = true, onToggleHideCompleted }) => {
const statusValue = filters.displayStatus || filters.status || "all";
const selectedStatusLabel = statusOptions.find((option) => option.value === statusValue)?.label || statusValue;
const [isStatusOpen, setIsStatusOpen] = React.useState(false);
@ -196,12 +196,28 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
placeholder="Тип получения"
/>
<DropdownSelect
value={filters.smsStatus || "all"}
options={smsProblemOptions}
onChange={(v) => updateFilter("smsStatus", v)}
placeholder="Проблемы SMS"
/>
<div className="flex items-end gap-3">
<DropdownSelect
value={filters.smsStatus || "all"}
options={smsProblemOptions}
onChange={(v) => updateFilter("smsStatus", v)}
placeholder="Проблемы SMS"
/>
{typeof onToggleHideCompleted === "function" && (
<label
className="mb-0.5 flex shrink-0 cursor-pointer select-none items-center gap-2 text-sm text-[var(--color-text)]"
title="Доставленные и отгруженные заказы скрыты"
>
<input
type="checkbox"
checked={hideCompleted}
onChange={() => onToggleHideCompleted((prev) => !prev)}
className="h-4 w-4 cursor-pointer accent-[var(--color-accent)]"
/>
<span>Скрыть завершённые</span>
</label>
)}
</div>
<Input
className="h-[46px] py-0"