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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
"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 { EntityCombobox } from "./EntityCombobox.js";
|
||||
|
||||
type ResourceItem = { id: string; displayName: string; eid: string };
|
||||
|
||||
interface ResourceComboboxProps {
|
||||
value: string | null;
|
||||
@@ -14,123 +16,48 @@ interface ResourceComboboxProps {
|
||||
}
|
||||
|
||||
export function ResourceCombobox({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "Search resource\u2026",
|
||||
disabled = false,
|
||||
isActive = true,
|
||||
className = "",
|
||||
...props
|
||||
}: ResourceComboboxProps) {
|
||||
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.resource.list.useQuery(
|
||||
{ search: search || undefined, limit: 15, isActive },
|
||||
{ enabled, staleTime: 30_000 },
|
||||
);
|
||||
return { data: (data?.resources ?? []) as ResourceItem[] };
|
||||
};
|
||||
|
||||
const { data } = trpc.resource.list.useQuery(
|
||||
{ search: debouncedSearch || undefined, limit: 15, isActive },
|
||||
{ enabled: open, staleTime: 30_000 },
|
||||
const useSelectedQuery = (_id: string | null, enabled: boolean) => {
|
||||
const { data } = trpc.resource.list.useQuery(
|
||||
{ limit: 500 },
|
||||
{ enabled, staleTime: 60_000 },
|
||||
);
|
||||
return { data: (data?.resources ?? []) as ResourceItem[] };
|
||||
};
|
||||
|
||||
const getLabel = useCallback(
|
||||
(r: ResourceItem) => `${r.displayName} (${r.eid})`,
|
||||
[],
|
||||
);
|
||||
|
||||
const resources = (data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
|
||||
|
||||
const selectedQuery = trpc.resource.list.useQuery(
|
||||
{ limit: 500 },
|
||||
{ enabled: !!value && !open, staleTime: 60_000 },
|
||||
const renderItem = useCallback(
|
||||
(r: ResourceItem) => (
|
||||
<>
|
||||
<span>{r.displayName}</span>
|
||||
<span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
|
||||
</>
|
||||
),
|
||||
[],
|
||||
);
|
||||
const selectedResources = (selectedQuery.data?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
|
||||
|
||||
const selectedLabel = useMemo(() => {
|
||||
if (!value) return "";
|
||||
const fromOpen = resources.find((r) => r.id === value);
|
||||
if (fromOpen) return `${fromOpen.displayName} (${fromOpen.eid})`;
|
||||
const fromSelected = selectedResources.find((r) => r.id === value);
|
||||
if (fromSelected) return `${fromSelected.displayName} (${fromSelected.eid})`;
|
||||
return value;
|
||||
}, [value, resources, selectedResources]);
|
||||
|
||||
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">
|
||||
{resources.length === 0 ? (
|
||||
<li className="px-3 py-2 text-sm text-gray-400 dark:text-gray-500">No results</li>
|
||||
) : (
|
||||
resources.map((r) => (
|
||||
<li key={r.id}>
|
||||
<button
|
||||
type="button"
|
||||
onMouseDown={() => select(r.id)}
|
||||
className={`w-full text-left px-3 py-1.5 text-sm hover:bg-brand-50 dark:hover:bg-brand-950/40 ${
|
||||
r.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>{r.displayName}</span>
|
||||
<span className="ml-1.5 text-xs text-gray-400 dark:text-gray-500">{r.eid}</span>
|
||||
</button>
|
||||
</li>
|
||||
))
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<EntityCombobox<ResourceItem>
|
||||
{...props}
|
||||
placeholder={props.placeholder ?? "Search resource\u2026"}
|
||||
useSearchQuery={useSearchQuery}
|
||||
useSelectedQuery={useSelectedQuery}
|
||||
getLabel={getLabel}
|
||||
renderItem={renderItem}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user