fix(dashboard): re-apply filter clear/toggle, 3-level drill-down, Persian formatting + wire /dashboard route

frontend/src/components/Combobox.tsx

@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState, type RefObject } from "react";
+import { useEffect, useMemo, useRef, useState, type RefObject } from "react";
+import { X } from "lucide-react";
 import { normalize } from "../lib/normalize";
 import { cn } from "../lib/utils";
 import { useClickOutside } from "./useClickOutside";
@@ -26,6 +27,9 @@ export interface ComboboxProps {
   onAdd?: (val: string) => void;
   onInputChange?: (val: string) => void;
   onBlur?: () => void;
+  // با ارائه‌ی این تابع، دکمه‌ی «×» داخل فیلد ظاهر می‌شود تا انتخاب فعلی
+  // (و فیلتر وابسته به آن) به‌تنهایی پاک شود.
+  onClear?: () => void;
   // برای فوکوس برنامه‌ای (مثل بازگشت فوکوس پس از ثبت پیوسته)
   inputRef?: RefObject<HTMLInputElement | null>;
   // با false، فوکوسِ برنامه‌ای (مثل فوکوسِ خودکار Dialog) منو را باز نمی‌کند —
@@ -56,12 +60,17 @@ export function Combobox({
   onAdd,
   onInputChange,
   onBlur,
+  onClear,
   inputRef,
   openOnFocus = true,
 }: ComboboxProps) {
   const [text, setText] = useState(value ?? "");
   const [open, setOpen] = useState(false);
   const [highlight, setHighlight] = useState(-1);
+  // کلیکِ روی اینپوتِ در حالت فوکوس‌نشده، اول onFocus را صدا می‌زند و منو باز
+  // می‌شود؛ این نشانگر می‌گوید «همین لحظه با فوکوس باز شد» تا همان کلیک
+  // دوباره منو را نبندد. کلیک‌های بعدی = تاگل باز/بسته.
+  const justOpenedByFocus = useRef(false);
 
   useEffect(() => {
     setText(value ?? "");
@@ -82,6 +91,8 @@ export function Combobox({
   const showAdd =
     allowAdd && q.length > 0 && !filtered.some((x) => normalize(x.label) === q);
 
+  const showClear = Boolean(onClear) && !disabled && text.length > 0;
+
   const listCount = filtered.length + (showAdd ? 1 : 0);
 
   const ref = useClickOutside<HTMLDivElement>(() => setOpen(false));
@@ -133,6 +144,7 @@ export function Combobox({
         ref={inputRef}
         className={cn(
           "flex h-9 w-full rounded-lg border border-line bg-panel px-3 py-1 text-sm text-ink shadow-sm transition-colors placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-50",
+          showClear && "pe-8",
           inputClassName,
         )}
         value={text}
@@ -146,12 +158,40 @@ export function Combobox({
           onInputChange?.(e.target.value);
         }}
         onFocus={() => {
-          if (openOnFocus) setOpen(true);
+          if (openOnFocus && !open) {
+            setOpen(true);
+            justOpenedByFocus.current = true;
+          }
+        }}
+        onClick={() => {
+          // اولین کلیک بعد از فوکوس = همان بازشدن؛ کلیک‌های بعدی تاگل می‌کنند
+          if (justOpenedByFocus.current) {
+            justOpenedByFocus.current = false;
+            return;
+          }
+          setOpen((o) => !o);
         }}
-        onClick={() => setOpen(true)}
         onBlur={onBlur}
         onKeyDown={onKeyDown}
       />
+      {showClear && (
+        <button
+          type="button"
+          aria-label="پاک کردن"
+          title="پاک کردن"
+          className="absolute end-2 top-1/2 z-10 flex h-5 w-5 -translate-y-1/2 items-center justify-center rounded-full text-muted transition-colors hover:bg-slate-bg hover:text-ink"
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={(e) => {
+            e.stopPropagation();
+            setText("");
+            setHighlight(-1);
+            setOpen(true);
+            onClear?.();
+          }}
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      )}
       {open && (
         <div className="absolute inset-x-0 top-full z-30 mt-1 max-h-56 overflow-y-auto rounded-lg border border-line bg-panel py-1 shadow-lg">
           {listCount === 0 && (