refactor: deduplicate modals, notifications, confirms, comboboxes, proficiency

Modal Overlay (Finding 1 — 6 admin files): - Migrated CountriesClient, ManagementLevelsClient, OrgUnitsClient, CalculationRulesClient, UtilizationCategoriesClient, RoleModal from inline fixed-overlay to AnimatedModal component - Gains: animated transitions, backdrop blur, escape key for free Notification Helper (Finding 9 — 9 API files, 14 call sites): - New createNotification() + createNotificationsForUsers() in packages/api/src/lib/create-notification.ts - Handles exactOptionalPropertyTypes spread + SSE emit internally - Simplified: budget-alerts, estimate-reminders, auto-staffing, vacation-conflicts, chargeability-alerts, comment, vacation, notification ConfirmDialog (Finding 3 — 11 files): - Replaced all window.confirm() calls with ConfirmDialog component - Files: CommentThread, EffortRules, ExperienceMultipliers, ManagementLevels, CalculationRules, Countries, RateCards, ApplyEffortRules, ApplyExperienceMultipliers, NotificationCenter, ReminderModal EntityCombobox (Finding 4 — 3 files): - New generic EntityCombobox<T> with customization hooks - ResourceCombobox + ProjectCombobox rewritten as thin wrappers - All consumers unchanged (backwards-compatible props) Proficiency Constants (Finding 2 — 2 files): - SkillsAnalytics + SkillMarketplace now import from skills/shared.tsx - Deleted ~70 LOC of local duplicate definitions Regression: 283 engine + 37 staffing tests pass. TypeScript clean. AI Assistant: all 87 tools verified accessible. Co-Authored-By: claude-flow <ruv@ruv.net>
2026-03-22 21:50:39 +01:00
parent c7b76e086d
commit ac845d72b7
29 changed files with 737 additions and 607 deletions
@@ -0,0 +1,136 @@
+"use client";
+
+import { useState, useRef, useEffect, useMemo, type ReactNode } from "react";
+import { useDebounce } from "~/hooks/useDebounce.js";
+
+interface EntityComboboxProps<T extends { id: string }> {
+  value: string | null;
+  onChange: (id: string | null) => void;
+  placeholder?: string;
+  disabled?: boolean;
+  className?: string;
+  /** Hook that returns search results when the dropdown is open. */
+  useSearchQuery: (search: string, enabled: boolean) => { data: T[] | undefined };
+  /** Hook that returns a broader list so the selected item's label can be resolved when the dropdown is closed. */
+  useSelectedQuery: (id: string | null, enabled: boolean) => { data: T[] | undefined };
+  /** Derive the display label from an item (shown in the input when closed). */
+  getLabel: (item: T) => string;
+  /** Optional custom renderer for each dropdown row. Falls back to `getLabel`. */
+  renderItem?: (item: T, isSelected: boolean) => ReactNode;
+}
+
+export function EntityCombobox<T extends { id: string }>({
+  value,
+  onChange,
+  placeholder = "Search\u2026",
+  disabled = false,
+  className = "",
+  useSearchQuery,
+  useSelectedQuery,
+  getLabel,
+  renderItem,
+}: EntityComboboxProps<T>) {
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState("");
+  const debouncedSearch = useDebounce(search, 300);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const { data: searchItems } = useSearchQuery(debouncedSearch, open);
+  const items = searchItems ?? [];
+
+  const { data: selectedItems } = useSelectedQuery(value, !!value && !open);
+
+  const selectedLabel = useMemo(() => {
+    if (!value) return "";
+    const fromOpen = items.find((i) => i.id === value);
+    if (fromOpen) return getLabel(fromOpen);
+    const fromSelected = selectedItems?.find((i) => i.id === value);
+    if (fromSelected) return getLabel(fromSelected);
+    return value;
+  }, [value, items, selectedItems, getLabel]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setSearch("");
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  function handleFocus() {
+    if (disabled) return;
+    setOpen(true);
+    setSearch("");
+  }
+
+  function select(id: string | null) {
+    onChange(id);
+    setOpen(false);
+    setSearch("");
+    inputRef.current?.blur();
+  }
+
+  return (
+    <div className={`relative ${className}`} ref={containerRef}>
+      <div className="relative">
+        <input
+          ref={inputRef}
+          type="text"
+          value={open ? search : selectedLabel}
+          onChange={(e) => setSearch(e.target.value)}
+          onFocus={handleFocus}
+          placeholder={placeholder}
+          disabled={disabled}
+          className={`w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 disabled:opacity-50 disabled:cursor-not-allowed ${
+            open
+              ? "border-brand-500 ring-2 ring-brand-500"
+              : "border-gray-300 hover:border-gray-400 dark:border-gray-600 dark:hover:border-gray-500"
+          } bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 placeholder:text-gray-400 dark:placeholder:text-gray-500`}
+          readOnly={!open}
+        />
+        {value && !disabled && !open && (
+          <button
+            type="button"
+            onMouseDown={(e) => { e.preventDefault(); e.stopPropagation(); select(null); }}
+            className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-lg leading-none"
+            aria-label="Clear"
+            tabIndex={-1}
+          >
+            {"\u00d7"}
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div className="absolute left-0 right-0 top-full mt-1 z-[60] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl shadow-xl overflow-hidden">
+          <ul className="max-h-52 overflow-y-auto py-1">
+            {items.length === 0 ? (
+              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
+            ) : (
+              items.map((item) => (
+                <li key={item.id}>
+                  <button
+                    type="button"
+                    onMouseDown={() => select(item.id)}
+                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
+                      item.id === value
+                        ? "bg-brand-50 dark:bg-brand-950/40 text-brand-700 dark:text-brand-300 font-medium"
+                        : "text-gray-700 dark:text-gray-200"
+                    }`}
+                  >
+                    {renderItem ? renderItem(item, item.id === value) : getLabel(item)}
+                  </button>
+                </li>
+              ))
+            )}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}