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/admin/CountriesClient.tsx

@@ -1,6 +1,8 @@
 "use client";
 
 import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
+import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { trpc } from "~/lib/trpc/client.js";
 
@@ -58,6 +60,7 @@ export function CountriesClient() {
   const [editing, setEditing] = useState<EditingCountry | null>(null);
   const [cityName, setCityName] = useState("");
   const [expandedId, setExpandedId] = useState<string | null>(null);
+  const [confirmDeleteCity, setConfirmDeleteCity] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
 
   const utils = trpc.useUtils();
@@ -236,11 +239,7 @@ export function CountriesClient() {
                   {city.name}
                   <button
                     type="button"
-                    onClick={() => {
-                      if (confirm(`Delete metro city "${city.name}"?`)) {
-                        deleteCityMut.mutate({ id: city.id });
-                      }
-                    }}
+                    onClick={() => setConfirmDeleteCity(city.id)}
                     className="text-gray-400 hover:text-red-500 text-xs leading-none ml-1"
                   >
                     &times;
@@ -274,9 +273,8 @@ export function CountriesClient() {
       })()}
 
       {/* Create/Edit Modal */}
-      {editing && (
-        <div className="fixed inset-0 bg-black/50 z-50 flex items-center justify-center p-4">
-          <div className="bg-white dark:bg-gray-900 rounded-xl shadow-2xl w-full max-w-lg mx-4 flex flex-col max-h-[90vh]">
+      <AnimatedModal open={editing !== null} onClose={() => setEditing(null)} maxWidth="max-w-lg" className="flex flex-col max-h-[90vh]">
+        {editing && (<>
             <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
               <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
                 {editing.id ? "Edit Country" : "Add Country"}
@@ -406,8 +404,21 @@ export function CountriesClient() {
                 {isPending ? "Saving..." : editing.id ? "Update" : "Create"}
               </button>
             </div>
-          </div>
-        </div>
+        </>)}
+      </AnimatedModal>
+
+      {confirmDeleteCity && (
+        <ConfirmDialog
+          title="Delete metro city"
+          message="Are you sure you want to delete this metro city?"
+          confirmLabel="Delete"
+          variant="danger"
+          onConfirm={() => {
+            deleteCityMut.mutate({ id: confirmDeleteCity });
+            setConfirmDeleteCity(null);
+          }}
+          onCancel={() => setConfirmDeleteCity(null)}
+        />
       )}
     </div>
   );