From 46fac18e28c205089465e531dd36c3a85c05fd84 Mon Sep 17 00:00:00 2001
From: Hermes <root@vm-nano>
Date: Wed, 19 Aug 2026 12:36:27 +0200
Subject: [PATCH] =?UTF-8?q?ui:=20restructure=20filters=20=E2=80=94=20searc?=
 =?UTF-8?q?h=20wider=20on=20row=201,=20SMS=20+=20hide-completed=20toggle?=
 =?UTF-8?q?=20switch=20on=20row=202?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/Switch.jsx           | 38 ++++++++++++++++++++
 src/components/orders/OrderFilters.jsx | 49 ++++++++++++--------------
 2 files changed, 60 insertions(+), 27 deletions(-)
 create mode 100644 src/components/UI/Switch.jsx

diff --git a/src/components/UI/Switch.jsx b/src/components/UI/Switch.jsx
new file mode 100644
index 0000000..1de7fed
--- /dev/null
+++ b/src/components/UI/Switch.jsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+/**
+ * Accessible iOS-style toggle switch.
+ * @param {object} props
+ * @param {boolean} props.checked
+ * @param {function} props.onChange  Called with the next boolean value.
+ * @param {string} [props.label]     Visible text next to the switch.
+ * @param {string} [props.title]     Hover tooltip.
+ * @param {string} [props.className]
+ */
+export const Switch = ({ checked = false, onChange, label, title, className = "" }) => {
+  const id = React.useId();
+  return (
+    <label htmlFor={id} className={`inline-flex cursor-pointer select-none items-center gap-2.5 text-sm text-[var(--color-text)] ${className}`} title={title}>
+      <button
+        type="button"
+        id={id}
+        role="switch"
+        aria-checked={checked}
+        onClick={() => onChange && onChange(!checked)}
+        className={`relative inline-flex h-6 w-11 shrink-0 items-center rounded-full border transition-colors ${
+          checked
+            ? "border-[var(--color-accent)] bg-[var(--color-accent)]"
+            : "border-[var(--color-border)] bg-[var(--color-surface-strong)]"
+        }`}
+      >
+        <span
+          aria-hidden="true"
+          className={`inline-block h-5 w-5 transform rounded-full bg-white shadow transition-transform ${
+            checked ? "translate-x-[22px]" : "translate-x-0.5"
+          }`}
+        />
+      </button>
+      {label ? <span>{label}</span> : null}
+    </label>
+  );
+};
diff --git a/src/components/orders/OrderFilters.jsx b/src/components/orders/OrderFilters.jsx
index 359657a..bd5c893 100644
--- a/src/components/orders/OrderFilters.jsx
+++ b/src/components/orders/OrderFilters.jsx
@@ -3,6 +3,7 @@ import { Button } from "../UI/Button";
 import { Input } from "../UI/Input";
 import { Panel } from "../UI/Panel";
 import { DatePicker } from "../UI/DatePicker";
+import { Switch } from "../UI/Switch";
 
 const DropdownSelect = ({ value, options, onChange, placeholder }) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -129,8 +130,8 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
   return (
     <Panel className="p-4">
       <div className="flex flex-col gap-3">
-        {/* Row 1: Status + City + DeliveryType + Search */}
-        <div className="grid gap-3 md:grid-cols-[minmax(12rem,0.7fr)_minmax(0,0.5fr)_minmax(0,0.5fr)_minmax(0,1.4fr)] md:items-end">
+        {/* Row 1: Status + City + DeliveryType + Search (search spans wider) */}
+        <div className="grid gap-3 md:grid-cols-[minmax(12rem,0.7fr)_minmax(0,0.5fr)_minmax(0,0.5fr)_minmax(0,1.6fr)] md:items-end">
           <div ref={statusMenuRef} className="relative flex min-w-0 flex-col gap-2">
             <button
               type="button"
@@ -196,29 +197,6 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
             placeholder="Тип получения"
           />
 
-          <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"
             placeholder="Поиск по группе, клиенту или телефону"
@@ -227,8 +205,8 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
           />
         </div>
 
-        {/* Row 2: Date range */}
-        <div className="flex items-end gap-3 flex-wrap">
+        {/* Row 2: Date range + SMS problems (width matches its text) + hide-completed toggle */}
+        <div className="flex flex-wrap items-end gap-3">
           <DatePicker
             value={filters.dateFrom || ""}
             onChange={(v) => updateFilter("dateFrom", v)}
@@ -252,6 +230,23 @@ export const OrderFilters = ({ filters, setFilters, statusOptions = [], cities =
               ✕ Сбросить
             </button>
           )}
+
+          <DropdownSelect
+            value={filters.smsStatus || "all"}
+            options={smsProblemOptions}
+            onChange={(v) => updateFilter("smsStatus", v)}
+            placeholder="Проблемы SMS"
+          />
+
+          {typeof onToggleHideCompleted === "function" && (
+            <Switch
+              checked={hideCompleted}
+              onChange={onToggleHideCompleted}
+              label="Скрыть завершённые"
+              title="Доставленные и отгруженные заказы скрыты"
+              className="mb-0.5"
+            />
+          )}
         </div>
       </div>
     </Panel>