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>

apps/web/src/components/ui/ProjectCombobox.tsx

@@ -1,9 +1,11 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useCallback } from "react";
 import { trpc } from "~/lib/trpc/client.js";
-import { useDebounce } from "~/hooks/useDebounce.js";
 import type { ProjectStatus } from "@planarchy/shared";
+import { EntityCombobox } from "./EntityCombobox.js";
+
+type ProjectItem = { id: string; shortCode: string; name: string };
 
 interface ProjectComboboxProps {
   value: string | null;
@@ -15,122 +17,48 @@ interface ProjectComboboxProps {
 }
 
 export function ProjectCombobox({
-  value,
-  onChange,
-  placeholder = "Search project\u2026",
-  disabled = false,
   status,
-  className = "",
+  ...props
 }: ProjectComboboxProps) {
-  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 useSearchQuery = (search: string, enabled: boolean) => {
+    const { data } = trpc.project.list.useQuery(
+      { search: search || undefined, limit: 15, ...(status ? { status } : {}) },
+      { enabled, staleTime: 30_000 },
+    );
+    return { data: (data?.projects ?? []) as ProjectItem[] };
+  };
 
-  const { data } = trpc.project.list.useQuery(
-    { search: debouncedSearch || undefined, limit: 15, ...(status ? { status } : {}) },
-    { enabled: open, staleTime: 30_000 },
+  const useSelectedQuery = (_id: string | null, enabled: boolean) => {
+    const { data } = trpc.project.list.useQuery(
+      { limit: 500 },
+      { enabled, staleTime: 60_000 },
+    );
+    return { data: (data?.projects ?? []) as ProjectItem[] };
+  };
+
+  const getLabel = useCallback(
+    (p: ProjectItem) => `${p.shortCode} \u2014 ${p.name}`,
+    [],
   );
 
-  const projects = data?.projects ?? [];
-
-  const { data: allData } = trpc.project.list.useQuery(
-    { limit: 500 },
-    { enabled: !!value && !open, staleTime: 60_000 },
+  const renderItem = useCallback(
+    (p: ProjectItem) => (
+      <>
+        <span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
+        <span>{p.name}</span>
+      </>
+    ),
+    [],
   );
 
-  const selectedLabel = useMemo(() => {
-    if (!value) return "";
-    const fromOpen = projects.find((p) => p.id === value);
-    if (fromOpen) return `${fromOpen.shortCode} \u2014 ${fromOpen.name}`;
-    const fromAll = allData?.projects.find((p) => p.id === value);
-    if (fromAll) return `${fromAll.shortCode} \u2014 ${fromAll.name}`;
-    return value;
-  }, [value, projects, allData]);
-
-  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">
-            {projects.length === 0 ? (
-              <li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
-            ) : (
-              projects.map((p) => (
-                <li key={p.id}>
-                  <button
-                    type="button"
-                    onMouseDown={() => select(p.id)}
-                    className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
-                      p.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"
-                    }`}
-                  >
-                    <span className="font-medium text-xs text-gray-400 dark:text-gray-500 mr-1.5">{p.shortCode}</span>
-                    <span>{p.name}</span>
-                  </button>
-                </li>
-              ))
-            )}
-          </ul>
-        </div>
-      )}
-    </div>
+    <EntityCombobox<ProjectItem>
+      {...props}
+      placeholder={props.placeholder ?? "Search project\u2026"}
+      useSearchQuery={useSearchQuery}
+      useSelectedQuery={useSelectedQuery}
+      getLabel={getLabel}
+      renderItem={renderItem}
+    />
   );
 }