Hartmut
ddec3a927a
Major timeline enhancements: - Right-click drag multi-selection with floating action bar (batch delete/assign) - DemandPopover for demand strip details (replaces broken "Loading" modal) - ResourceHoverCard on name hover showing skills, rates, role, chapter - Merged heatmap+vacation tooltips into unified TimelineTooltip component - Fixed overbooking blink animation (date normalization, z-index ordering) - Fixed dark mode sticky column bleed-through in project view - System roles admin page, notification task management, performance review docs Co-Authored-By: claude-flow <ruv@ruv.net>
252 lines
10 KiB
TypeScript
252 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { clsx } from "clsx";
|
|
import { useEffect, useRef, useState } from "react";
|
|
import { AllocationStatus } from "@planarchy/shared";
|
|
import { trpc } from "~/lib/trpc/client.js";
|
|
import { DateInput } from "~/components/ui/DateInput.js";
|
|
|
|
interface NewAllocationPopoverProps {
|
|
resourceId: string;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
/** Pre-selected project (from project-view sub-row context) */
|
|
suggestedProjectId?: string | null;
|
|
anchorX: number;
|
|
anchorY: number;
|
|
onClose: () => void;
|
|
onCreated: () => void;
|
|
}
|
|
|
|
function toDateInput(d: Date): string {
|
|
const y = d.getFullYear();
|
|
const m = String(d.getMonth() + 1).padStart(2, "0");
|
|
const day = String(d.getDate()).padStart(2, "0");
|
|
return `${y}-${m}-${day}`;
|
|
}
|
|
|
|
export function NewAllocationPopover({
|
|
resourceId,
|
|
startDate,
|
|
endDate,
|
|
suggestedProjectId,
|
|
anchorX,
|
|
anchorY,
|
|
onClose,
|
|
onCreated,
|
|
}: NewAllocationPopoverProps) {
|
|
const ref = useRef<HTMLDivElement>(null);
|
|
const utils = trpc.useUtils();
|
|
|
|
const [search, setSearch] = useState("");
|
|
const [selectedProjectId, setSelectedProjectId] = useState<string | null>(
|
|
suggestedProjectId ?? null,
|
|
);
|
|
const [role, setRole] = useState("Team Member");
|
|
const [hoursPerDay, setHoursPerDay] = useState(8);
|
|
const [start, setStart] = useState(toDateInput(startDate));
|
|
const [end, setEnd] = useState(toDateInput(endDate));
|
|
const [dropdownOpen, setDropdownOpen] = useState(!suggestedProjectId);
|
|
|
|
const { data: projectsData } = trpc.project.list.useQuery(
|
|
{ search, limit: 20 },
|
|
{ staleTime: 30_000 },
|
|
);
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const projects = (projectsData?.projects ?? []) as Array<{ id: string; name: string; orderType?: string }>;
|
|
const selectedProject = projects.find((p) => p.id === selectedProjectId)
|
|
?? (suggestedProjectId ? projects.find((p) => p.id === suggestedProjectId) : null);
|
|
|
|
const createMutation = trpc.timeline.quickAssign.useMutation({
|
|
onSuccess: () => {
|
|
void utils.timeline.getEntries.invalidate();
|
|
void utils.timeline.getEntriesView.invalidate();
|
|
void utils.timeline.getProjectContext.invalidate();
|
|
void utils.timeline.getBudgetStatus.invalidate();
|
|
onCreated();
|
|
onClose();
|
|
},
|
|
});
|
|
|
|
// Close on outside click
|
|
useEffect(() => {
|
|
function handleClick(e: MouseEvent) {
|
|
if (ref.current && !ref.current.contains(e.target as Node)) {
|
|
onClose();
|
|
}
|
|
}
|
|
document.addEventListener("mousedown", handleClick);
|
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
}, [onClose]);
|
|
|
|
function handleCreate() {
|
|
if (!selectedProjectId) return;
|
|
createMutation.mutate({
|
|
resourceId,
|
|
projectId: selectedProjectId,
|
|
startDate: new Date(start),
|
|
endDate: new Date(end),
|
|
hoursPerDay,
|
|
role,
|
|
status: AllocationStatus.PROPOSED,
|
|
});
|
|
}
|
|
|
|
const canCreate = !!selectedProjectId && !!start && !!end && hoursPerDay > 0;
|
|
|
|
const left = Math.min(anchorX - 10, typeof window !== "undefined" ? window.innerWidth - 340 : anchorX);
|
|
const top = Math.min(anchorY + 8, typeof window !== "undefined" ? window.innerHeight - 440 : anchorY);
|
|
|
|
return (
|
|
<div
|
|
ref={ref}
|
|
style={{ position: "fixed", left, top, zIndex: 60, width: 320 }}
|
|
className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-4 py-3 bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
|
|
<span className="text-sm font-semibold text-gray-700 dark:text-gray-200">Assign to Project</span>
|
|
<button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none">×</button>
|
|
</div>
|
|
|
|
<div className="p-4 space-y-3">
|
|
{/* Date range */}
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Start</label>
|
|
<DateInput
|
|
value={start}
|
|
onChange={setStart}
|
|
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">End</label>
|
|
<DateInput
|
|
value={end}
|
|
onChange={setEnd}
|
|
min={start}
|
|
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Project picker */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Project</label>
|
|
{selectedProject && !dropdownOpen ? (
|
|
<div
|
|
className="flex items-center gap-2 border border-brand-300 dark:border-sky-700 rounded-lg px-3 py-2 cursor-pointer bg-brand-50 dark:bg-sky-950/30"
|
|
onClick={() => { setDropdownOpen(true); setSearch(""); }}
|
|
>
|
|
<span className="text-sm text-gray-800 dark:text-gray-200 truncate flex-1">{selectedProject.name}</span>
|
|
<span className="text-xs text-gray-400 dark:text-gray-500">▾</span>
|
|
</div>
|
|
) : (
|
|
<div className="relative">
|
|
<input
|
|
autoFocus={dropdownOpen}
|
|
type="text"
|
|
placeholder="Search projects…"
|
|
value={search}
|
|
onChange={(e) => setSearch(e.target.value)}
|
|
onFocus={() => setDropdownOpen(true)}
|
|
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 dark:placeholder-gray-400 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
|
/>
|
|
{dropdownOpen && projects.length > 0 && (
|
|
<div className="absolute top-full left-0 right-0 z-50 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-lg dark:shadow-black/40 mt-1 max-h-44 overflow-y-auto">
|
|
{projects.map((p) => (
|
|
<button
|
|
key={p.id}
|
|
type="button"
|
|
onClick={() => { setSelectedProjectId(p.id); setDropdownOpen(false); setSearch(""); }}
|
|
className="w-full text-left px-3 py-2 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center gap-2 border-b border-gray-50 dark:border-gray-700 last:border-0"
|
|
>
|
|
<span className="text-sm text-gray-800 dark:text-gray-200 truncate">{p.name}</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Role */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Role</label>
|
|
<input
|
|
type="text"
|
|
value={role}
|
|
onChange={(e) => setRole(e.target.value)}
|
|
className="w-full border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
|
/>
|
|
</div>
|
|
|
|
{/* Hours per day */}
|
|
<div>
|
|
<label className="block text-xs font-medium text-gray-600 dark:text-gray-400 mb-1">Hours / day</label>
|
|
<div className="flex items-center gap-2">
|
|
<input
|
|
type="number"
|
|
min={0.5}
|
|
max={24}
|
|
step={0.5}
|
|
value={hoursPerDay}
|
|
onChange={(e) => setHoursPerDay(parseFloat(e.target.value))}
|
|
className="w-24 border border-gray-200 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-200 rounded-lg px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
|
/>
|
|
<div className="flex gap-1">
|
|
{[4, 6, 8].map((h) => (
|
|
<button
|
|
key={h}
|
|
type="button"
|
|
onClick={() => setHoursPerDay(h)}
|
|
className={clsx(
|
|
"px-2 py-1 rounded text-xs font-medium border transition-colors",
|
|
hoursPerDay === h
|
|
? "bg-brand-600 text-white border-brand-600"
|
|
: "border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700",
|
|
)}
|
|
>
|
|
{h}h
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Overbooking notice */}
|
|
<p className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 px-3 py-2 rounded-lg">
|
|
Overlapping allocations are allowed — resource may be overbooked.
|
|
</p>
|
|
|
|
{/* Error */}
|
|
{createMutation.isError && (
|
|
<p className="text-xs text-red-600 dark:text-red-400">{createMutation.error.message}</p>
|
|
)}
|
|
|
|
{/* Actions */}
|
|
<div className="flex gap-2 pt-1">
|
|
<button
|
|
onClick={handleCreate}
|
|
disabled={!canCreate || createMutation.isPending}
|
|
className={clsx(
|
|
"flex-1 py-2 rounded-lg text-sm font-medium transition-colors",
|
|
"bg-brand-600 text-white hover:bg-brand-700 disabled:opacity-40 disabled:cursor-not-allowed",
|
|
)}
|
|
>
|
|
{createMutation.isPending ? "Creating…" : "Assign"}
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 py-2 rounded-lg text-sm font-medium border border-gray-200 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|