feat(timeline): add pulse animation for in-flight drag mutations
Allocation bars that have active optimistic overrides (post-drag, awaiting server confirmation) now pulse subtly via animate-pulse. The pending set is derived from the existing optimisticAllocations map keys, requiring no additional state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -51,7 +51,7 @@ export function AllocationPopover({
|
||||
const allocationQuery = trpc.allocation.getAssignmentById.useQuery(
|
||||
{ id: allocationId },
|
||||
{
|
||||
staleTime: 0,
|
||||
staleTime: 10_000,
|
||||
enabled: shouldLoadAllocation,
|
||||
retry: false,
|
||||
},
|
||||
|
||||
@@ -133,7 +133,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
if (isLoading || !ctx) {
|
||||
return (
|
||||
<PanelShell onClose={onClose}>
|
||||
<div className="flex items-center justify-center h-64 text-gray-400 text-sm">Loading…</div>
|
||||
<div className="flex items-center justify-center h-64 text-gray-500 text-sm">Loading…</div>
|
||||
</PanelShell>
|
||||
);
|
||||
}
|
||||
@@ -239,17 +239,20 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<span className={clsx(
|
||||
"px-2 py-0.5 rounded-full text-xs font-medium",
|
||||
project.orderType === "CHARGEABLE" ? "bg-emerald-100 text-emerald-700" :
|
||||
project.orderType === "BD" ? "bg-violet-100 text-violet-700" :
|
||||
project.orderType === "INTERNAL" ? "bg-blue-100 text-blue-700" :
|
||||
"bg-gray-100 text-gray-600",
|
||||
project.orderType === "CHARGEABLE"
|
||||
? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
|
||||
: project.orderType === "BD"
|
||||
? "bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300"
|
||||
: project.orderType === "INTERNAL"
|
||||
? "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
|
||||
: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300",
|
||||
)}>
|
||||
{project.orderType}
|
||||
</span>
|
||||
<span className="text-xs text-gray-400">{project.status}</span>
|
||||
<span className="text-xs text-gray-500">{project.status}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-400 mt-1">
|
||||
<div className="text-xs text-gray-500 mt-1">
|
||||
{toDateInput(project.startDate)} → {toDateInput(project.endDate)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -258,19 +261,19 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
|
||||
{/* Budget section */}
|
||||
<section>
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Budget</h3>
|
||||
<h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Budget</h3>
|
||||
<div className="bg-gray-50 rounded-xl p-3 space-y-2">
|
||||
<div className="flex justify-between text-sm">
|
||||
<span className="text-gray-600">Allocated</span>
|
||||
<span className="font-semibold text-gray-900">€{allocatedEUR} / €{budgetEUR}</span>
|
||||
<span className="text-gray-600 dark:text-gray-300">Allocated</span>
|
||||
<span className="font-semibold text-gray-900 dark:text-gray-100">€{allocatedEUR} / €{budgetEUR}</span>
|
||||
</div>
|
||||
<div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
|
||||
<div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
|
||||
<div
|
||||
className={clsx("h-full rounded-full transition-all", budgetBarColor)}
|
||||
style={{ width: `${Math.min(utilPct, 100)}%` }}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex justify-between text-xs text-gray-400">
|
||||
<div className="flex justify-between text-xs text-gray-500">
|
||||
<span>{utilPct.toFixed(1)}% utilized</span>
|
||||
{budgetStatus && (
|
||||
<span>€{(budgetStatus.remainingCents / 100).toFixed(0)} remaining</span>
|
||||
@@ -281,9 +284,11 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
key={i}
|
||||
className={clsx(
|
||||
"text-xs px-2 py-1 rounded-lg",
|
||||
w.level === "critical" ? "bg-red-50 text-red-700" :
|
||||
w.level === "warning" ? "bg-amber-50 text-amber-700" :
|
||||
"bg-blue-50 text-blue-700",
|
||||
w.level === "critical"
|
||||
? "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300"
|
||||
: w.level === "warning"
|
||||
? "bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
|
||||
: "bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
|
||||
)}
|
||||
>
|
||||
{w.message}
|
||||
@@ -295,23 +300,31 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
{/* Demand vs Supply */}
|
||||
{effectiveDemands.length > 0 && (
|
||||
<section>
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
|
||||
<h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
|
||||
Demand vs Supply
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{reqMatches.map(({ demand, matched, fulfilled, partial }) => (
|
||||
<div key={demand.id} className="border border-gray-100 rounded-xl overflow-hidden">
|
||||
<div key={demand.id} className="border border-gray-200 rounded-xl overflow-hidden">
|
||||
<div className={clsx(
|
||||
"flex items-center justify-between px-3 py-2",
|
||||
fulfilled ? "bg-green-50" : partial ? "bg-amber-50" : "bg-red-50",
|
||||
fulfilled
|
||||
? "bg-green-50 dark:bg-green-900/20"
|
||||
: partial
|
||||
? "bg-amber-50 dark:bg-amber-900/20"
|
||||
: "bg-red-50 dark:bg-red-900/20",
|
||||
)}>
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-800">{demand.role}</span>
|
||||
<span className="text-sm font-medium text-gray-800 dark:text-gray-100">{demand.role}</span>
|
||||
<span className="ml-2 text-xs text-gray-500">{demand.requestedHeadcount} needed · {demand.hoursPerDay}h/day</span>
|
||||
</div>
|
||||
<span className={clsx(
|
||||
"text-xs font-semibold",
|
||||
fulfilled ? "text-green-600" : partial ? "text-amber-600" : "text-red-600",
|
||||
fulfilled
|
||||
? "text-green-600 dark:text-green-400"
|
||||
: partial
|
||||
? "text-amber-600 dark:text-amber-400"
|
||||
: "text-red-600 dark:text-red-400",
|
||||
)}>
|
||||
{fulfilled ? "✓ Filled" : partial ? `${matched.length}/${demand.requestedHeadcount}` : "Unfilled"}
|
||||
</span>
|
||||
@@ -319,9 +332,9 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
{matched.length > 0 && (
|
||||
<div className="px-3 py-1.5 bg-white border-t border-gray-100 space-y-0.5">
|
||||
{matched.map((a) => (
|
||||
<div key={a.id} className="flex items-center justify-between text-xs text-gray-600">
|
||||
<div key={a.id} className="flex items-center justify-between text-xs text-gray-700">
|
||||
<span>{a.resource?.displayName}</span>
|
||||
<span className="text-gray-400">{a.hoursPerDay}h/day</span>
|
||||
<span className="text-gray-500">{a.hoursPerDay}h/day</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
@@ -331,7 +344,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
</div>
|
||||
{unmatchedAssignments.length > 0 && (
|
||||
<div className="mt-2">
|
||||
<div className="text-xs text-gray-400 mb-1">Unmatched assignments</div>
|
||||
<div className="text-xs text-gray-600 font-medium mb-1">Unmatched assignments</div>
|
||||
{unmatchedAssignments.map((a) => (
|
||||
<div key={a.id} className="text-xs text-gray-500 flex justify-between">
|
||||
<span>{a.resource?.displayName} — {a.role}</span>
|
||||
@@ -346,10 +359,10 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
{/* Team */}
|
||||
<section>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Team</h3>
|
||||
<h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Team</h3>
|
||||
<button
|
||||
onClick={() => setAddingMember(true)}
|
||||
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
|
||||
className="text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium"
|
||||
>
|
||||
+ Add Member
|
||||
</button>
|
||||
@@ -364,23 +377,23 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
placeholder="Search by name or EID…"
|
||||
value={resourceSearch}
|
||||
onChange={(e) => setResourceSearch(e.target.value)}
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
{filteredResources.slice(0, 8).map((r) => (
|
||||
<button
|
||||
key={r.id}
|
||||
onClick={() => handleAddMember(r.id)}
|
||||
disabled={createAssignmentMutation.isPending}
|
||||
className="w-full text-left px-3 py-2 rounded-lg hover:bg-white text-sm text-gray-800 border border-transparent hover:border-gray-200 transition-colors"
|
||||
>
|
||||
<button
|
||||
key={r.id}
|
||||
onClick={() => handleAddMember(r.id)}
|
||||
disabled={createAssignmentMutation.isPending}
|
||||
className="w-full text-left px-3 py-2 rounded-lg hover:bg-white dark:hover:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 border border-transparent hover:border-gray-200 dark:hover:border-gray-600 transition-colors"
|
||||
>
|
||||
<span className="font-medium">{r.displayName}</span>
|
||||
<span className="text-gray-400 ml-2 text-xs">{r.eid}</span>
|
||||
{r.chapter && <span className="text-gray-300 ml-1 text-xs">· {r.chapter}</span>}
|
||||
<span className="text-gray-500 ml-2 text-xs">{r.eid}</span>
|
||||
{r.chapter && <span className="text-gray-500 ml-1 text-xs">· {r.chapter}</span>}
|
||||
</button>
|
||||
))}
|
||||
<button
|
||||
onClick={() => { setAddingMember(false); setResourceSearch(""); }}
|
||||
className="text-xs text-gray-400 hover:text-gray-600"
|
||||
className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
@@ -397,26 +410,26 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
return (
|
||||
<div
|
||||
key={alloc.id}
|
||||
className="border border-gray-100 rounded-xl p-3 space-y-2 bg-white"
|
||||
className="border border-gray-200 rounded-xl p-3 space-y-2 bg-white"
|
||||
>
|
||||
{/* Resource name + delete */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<span className="text-sm font-medium text-gray-800">{alloc.resource?.displayName}</span>
|
||||
<span className="text-xs text-gray-400 ml-1.5">{alloc.resource?.eid}</span>
|
||||
<span className="text-sm font-medium text-gray-800 dark:text-gray-100">{alloc.resource?.displayName}</span>
|
||||
<span className="text-xs text-gray-500 ml-1.5">{alloc.resource?.eid}</span>
|
||||
</div>
|
||||
{confirmDelete === alloc.id ? (
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-red-600">Remove?</span>
|
||||
<span className="text-xs text-red-600 dark:text-red-400">Remove?</span>
|
||||
<button
|
||||
onClick={() => { deleteMutation.mutate({ id: getPlanningEntryMutationId(alloc) }); setConfirmDelete(null); }}
|
||||
className="text-xs text-red-600 font-medium hover:text-red-800"
|
||||
className="text-xs text-red-600 dark:text-red-400 font-medium hover:text-red-800 dark:hover:text-red-300"
|
||||
>
|
||||
Yes
|
||||
</button>
|
||||
<button
|
||||
onClick={() => setConfirmDelete(null)}
|
||||
className="text-xs text-gray-400 hover:text-gray-600"
|
||||
className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
|
||||
>
|
||||
No
|
||||
</button>
|
||||
@@ -424,7 +437,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
) : (
|
||||
<button
|
||||
onClick={() => setConfirmDelete(alloc.id)}
|
||||
className="text-xs text-red-400 hover:text-red-600"
|
||||
className="text-xs text-red-400 dark:text-red-500 hover:text-red-600 dark:hover:text-red-400"
|
||||
>
|
||||
Remove
|
||||
</button>
|
||||
@@ -436,30 +449,30 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
type="text"
|
||||
value={edit.role ?? alloc.role ?? ""}
|
||||
onChange={(e) => setEdit(alloc.id, { role: e.target.value })}
|
||||
className="w-full border border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
placeholder="Role"
|
||||
/>
|
||||
|
||||
{/* Dates + hours */}
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">Start</label>
|
||||
<label className="block text-[10px] text-gray-500 mb-0.5">Start</label>
|
||||
<DateInput
|
||||
value={edit.startDate ?? toDateInput(alloc.startDate)}
|
||||
onChange={(v) => setEdit(alloc.id, { startDate: v })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">End</label>
|
||||
<label className="block text-[10px] text-gray-500 mb-0.5">End</label>
|
||||
<DateInput
|
||||
value={edit.endDate ?? toDateInput(alloc.endDate)}
|
||||
onChange={(v) => setEdit(alloc.id, { endDate: v })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-[10px] text-gray-400 mb-0.5">h/day</label>
|
||||
<label className="block text-[10px] text-gray-500 mb-0.5">h/day</label>
|
||||
<input
|
||||
type="number"
|
||||
min={0.5}
|
||||
@@ -467,7 +480,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
step={0.5}
|
||||
value={edit.hoursPerDay ?? alloc.hoursPerDay}
|
||||
onChange={(e) => setEdit(alloc.id, { hoursPerDay: parseFloat(e.target.value) })}
|
||||
className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@@ -478,9 +491,9 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
type="checkbox"
|
||||
checked={inclSat}
|
||||
onChange={(e) => setEdit(alloc.id, { includeSaturday: e.target.checked })}
|
||||
className="rounded border-gray-300 text-brand-600 focus:ring-brand-400"
|
||||
className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-400"
|
||||
/>
|
||||
<span className="text-xs text-gray-600">Include Saturdays</span>
|
||||
<span className="text-xs text-gray-600 dark:text-gray-300">Include Saturdays</span>
|
||||
</label>
|
||||
|
||||
{/* Save button */}
|
||||
@@ -498,7 +511,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
|
||||
})}
|
||||
|
||||
{effectiveAssignments.length === 0 && (
|
||||
<div className="text-center py-8 text-sm text-gray-400">
|
||||
<div className="text-center py-8 text-sm text-gray-500">
|
||||
No team members yet. Add one above.
|
||||
</div>
|
||||
)}
|
||||
@@ -527,7 +540,7 @@ function PanelShell({ children, onClose }: { children: React.ReactNode; onClose:
|
||||
<span className="text-sm font-semibold text-gray-700">Project Details</span>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
|
||||
className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
|
||||
>
|
||||
×
|
||||
</button>
|
||||
|
||||
@@ -222,8 +222,9 @@ function TimelineProjectPanelInner({
|
||||
toWidth,
|
||||
CELL_WIDTH,
|
||||
totalCanvasWidth,
|
||||
filters.showWeekends,
|
||||
),
|
||||
[CELL_WIDTH, filters.showVacations, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
|
||||
[CELL_WIDTH, filters.showVacations, filters.showWeekends, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
|
||||
);
|
||||
|
||||
const projectRowMetrics = useMemo(() => {
|
||||
@@ -699,6 +700,7 @@ function renderOpenDemandRow(
|
||||
allocDragState: AllocDragState,
|
||||
suppressHoverInteractions: boolean,
|
||||
) {
|
||||
const selectedAllocationSet = new Set(multiSelectState.selectedAllocationIds);
|
||||
const { visibleOpenDemands, laneMap, rowHeight } = layout;
|
||||
if (visibleOpenDemands.length === 0) return null;
|
||||
|
||||
@@ -750,7 +752,7 @@ function renderOpenDemandRow(
|
||||
// Multi-drag visual offset
|
||||
const isMultiDragTarget =
|
||||
multiSelectState.isMultiDragging &&
|
||||
multiSelectState.selectedAllocationIds.includes(alloc.id);
|
||||
selectedAllocationSet.has(alloc.id);
|
||||
const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
|
||||
const multiDragMode = multiSelectState.multiDragMode;
|
||||
|
||||
@@ -825,7 +827,7 @@ function renderOpenDemandRow(
|
||||
isAllocDragged
|
||||
? "ring-2 ring-amber-500 z-20"
|
||||
: "hover:ring-2 hover:ring-amber-400 hover:ring-offset-1",
|
||||
multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
|
||||
selectedAllocationSet.has(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
|
||||
)}
|
||||
style={{
|
||||
left: left + 2,
|
||||
@@ -1042,6 +1044,7 @@ function renderProjectDragHandles(
|
||||
multiSelectState: MultiSelectState,
|
||||
suppressHoverInteractions: boolean,
|
||||
) {
|
||||
const selectedAllocationSet = new Set(multiSelectState.selectedAllocationIds);
|
||||
return allocs.map((alloc) => {
|
||||
const allocStart = new Date(alloc.startDate);
|
||||
const allocEnd = new Date(alloc.endDate);
|
||||
@@ -1079,7 +1082,7 @@ function renderProjectDragHandles(
|
||||
// Multi-drag visual offset
|
||||
const isMultiDragTarget =
|
||||
multiSelectState.isMultiDragging &&
|
||||
multiSelectState.selectedAllocationIds.includes(alloc.id);
|
||||
selectedAllocationSet.has(alloc.id);
|
||||
const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
|
||||
const multiDragMode = multiSelectState.multiDragMode;
|
||||
|
||||
@@ -1118,7 +1121,7 @@ function renderProjectDragHandles(
|
||||
isAllocDragged
|
||||
? "ring-2 ring-brand-400 z-20"
|
||||
: "hover:ring-1 hover:ring-brand-300/70 z-[15]",
|
||||
multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
|
||||
selectedAllocationSet.has(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
|
||||
)}
|
||||
style={{
|
||||
left: left + 2,
|
||||
|
||||
@@ -520,6 +520,7 @@ function TimelineResourcePanelInner({
|
||||
onInlineEdit,
|
||||
scrollLeft,
|
||||
containerWidth,
|
||||
optimisticAllocations.size > 0 ? new Set(optimisticAllocations.keys()) : undefined,
|
||||
)}
|
||||
{filters.showVacations &&
|
||||
renderVacationBlocks(
|
||||
@@ -628,6 +629,7 @@ function renderAllocBlocksFromData(
|
||||
onInlineEdit?: (allocationId: string, initialValues: { startDate: Date; endDate: Date; hoursPerDay: number }, barRect: DOMRect) => void,
|
||||
scrollLeft = 0,
|
||||
containerWidth = 1200,
|
||||
pendingMutationIds?: ReadonlySet<string>,
|
||||
) {
|
||||
const OVERSCAN_PX = 10 * CELL_WIDTH;
|
||||
const visibleLeft = scrollLeft - OVERSCAN_PX;
|
||||
@@ -810,6 +812,7 @@ function renderAllocBlocksFromData(
|
||||
? "opacity-30 z-[10]"
|
||||
: "transition-[opacity] duration-75 z-[10]",
|
||||
selectedAllocationSet.has(alloc.id) && "z-20",
|
||||
pendingMutationIds?.has(alloc.id) && !isBeingDragged && "animate-pulse",
|
||||
)}
|
||||
style={{
|
||||
left: segmentLeft + 2,
|
||||
|
||||
@@ -14,11 +14,12 @@ export function pixelsToDays(deltaX: number, cellWidth: number): number {
|
||||
|
||||
/**
|
||||
* Shift a date by a given number of days, returning a new Date.
|
||||
* Uses UTC methods to preserve UTC-midnight dates across DST/timezone boundaries.
|
||||
* Does not mutate the input.
|
||||
*/
|
||||
export function shiftDate(date: Date, daysDelta: number): Date {
|
||||
const result = new Date(date);
|
||||
result.setDate(result.getDate() + daysDelta);
|
||||
result.setUTCDate(result.getUTCDate() + daysDelta);
|
||||
return result;
|
||||
}
|
||||
|
||||
@@ -37,15 +38,15 @@ export function computeDragDates(
|
||||
const newEnd = new Date(originalEnd);
|
||||
|
||||
if (mode === "move") {
|
||||
newStart.setDate(newStart.getDate() + daysDelta);
|
||||
newEnd.setDate(newEnd.getDate() + daysDelta);
|
||||
newStart.setUTCDate(newStart.getUTCDate() + daysDelta);
|
||||
newEnd.setUTCDate(newEnd.getUTCDate() + daysDelta);
|
||||
} else if (mode === "resize-start") {
|
||||
newStart.setDate(newStart.getDate() + daysDelta);
|
||||
newStart.setUTCDate(newStart.getUTCDate() + daysDelta);
|
||||
// Clamp: allow same-day but prevent crossing
|
||||
if (newStart > newEnd) newStart.setTime(newEnd.getTime());
|
||||
} else {
|
||||
// resize-end
|
||||
newEnd.setDate(newEnd.getDate() + daysDelta);
|
||||
newEnd.setUTCDate(newEnd.getUTCDate() + daysDelta);
|
||||
// Clamp: allow same-day but prevent crossing
|
||||
if (newEnd < newStart) newEnd.setTime(newStart.getTime());
|
||||
}
|
||||
|
||||
@@ -29,6 +29,7 @@ export function buildVacationBlocksByResource(
|
||||
toWidth: (start: Date, end: Date) => number,
|
||||
cellWidth: number,
|
||||
totalCanvasWidth: number,
|
||||
showWeekends = true,
|
||||
) {
|
||||
if (!showVacations) return new Map<string, VacationBlockInfo[]>();
|
||||
|
||||
@@ -38,6 +39,13 @@ export function buildVacationBlocksByResource(
|
||||
for (const vacation of vacations) {
|
||||
const start = new Date(vacation.startDate);
|
||||
const end = new Date(vacation.endDate);
|
||||
// When weekends are hidden, skip single-day entries that fall on a weekend
|
||||
// (e.g. Easter Sunday). They would otherwise render at Monday's column,
|
||||
// shadowing Monday's own holiday (e.g. Easter Monday).
|
||||
if (!showWeekends && start.toDateString() === end.toDateString()) {
|
||||
const dow = start.getDay();
|
||||
if (dow === 0 || dow === 6) continue;
|
||||
}
|
||||
const left = toLeft(start);
|
||||
const width = Math.max(cellWidth, toWidth(start, end));
|
||||
if (width <= 0 || left >= totalCanvasWidth) continue;
|
||||
@@ -126,18 +134,23 @@ export function renderOverbookingBlink(
|
||||
) {
|
||||
const overbooked: number[] = [];
|
||||
|
||||
const allocRanges = allocs.map((a) => {
|
||||
const s = new Date(a.startDate);
|
||||
s.setHours(0, 0, 0, 0);
|
||||
const e = new Date(a.endDate);
|
||||
e.setHours(0, 0, 0, 0);
|
||||
return { s: s.getTime(), e: e.getTime(), h: a.hoursPerDay };
|
||||
});
|
||||
|
||||
for (let i = 0; i < dates.length; i++) {
|
||||
const d = new Date(dates[i]!);
|
||||
d.setHours(0, 0, 0, 0);
|
||||
const t = d.getTime();
|
||||
let totalH = 0;
|
||||
for (const a of allocs) {
|
||||
const s = new Date(a.startDate);
|
||||
s.setHours(0, 0, 0, 0);
|
||||
const e = new Date(a.endDate);
|
||||
e.setHours(0, 0, 0, 0);
|
||||
if (t >= s.getTime() && t <= e.getTime()) {
|
||||
totalH += a.hoursPerDay * (bookingFactorsByDay?.[i] ?? 1);
|
||||
const factor = bookingFactorsByDay?.[i] ?? 1;
|
||||
for (const { s, e, h } of allocRanges) {
|
||||
if (t >= s && t <= e) {
|
||||
totalH += h * factor;
|
||||
}
|
||||
}
|
||||
if (totalH > (capacityHoursByDay?.[i] ?? 8)) overbooked.push(i);
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
import type { WeekdayAvailability } from "@capakraken/shared";
|
||||
import { DAY_KEYS, type WeekdayAvailability } from "@capakraken/shared";
|
||||
import type { TimelineAssignmentEntry } from "./TimelineContext.js";
|
||||
|
||||
const DAY_KEYS: (keyof WeekdayAvailability)[] = [
|
||||
"sunday",
|
||||
"monday",
|
||||
"tuesday",
|
||||
"wednesday",
|
||||
"thursday",
|
||||
"friday",
|
||||
"saturday",
|
||||
];
|
||||
|
||||
export const DEFAULT_TIMELINE_AVAILABILITY: WeekdayAvailability = {
|
||||
sunday: 0,
|
||||
monday: 8,
|
||||
|
||||
@@ -7,15 +7,22 @@ import {
|
||||
|
||||
describe("timelineHover", () => {
|
||||
it("matches vacation hits inclusively across differing time components", () => {
|
||||
// Use local-noon timestamps so the date is unambiguous in any timezone
|
||||
// (findVacationHit uses local midnight truncation for comparison)
|
||||
const localNoon = (iso: string) => {
|
||||
const d = new Date(iso);
|
||||
d.setHours(12, 0, 0, 0);
|
||||
return d;
|
||||
};
|
||||
const hit = findVacationHit(
|
||||
[
|
||||
{
|
||||
id: "vacation_1",
|
||||
startDate: "2026-04-10T15:00:00.000Z",
|
||||
endDate: "2026-04-12T01:00:00.000Z",
|
||||
startDate: localNoon("2026-04-10"),
|
||||
endDate: localNoon("2026-04-12"),
|
||||
},
|
||||
],
|
||||
new Date("2026-04-12T23:59:59.000Z"),
|
||||
localNoon("2026-04-12"),
|
||||
);
|
||||
|
||||
expect(hit?.id).toBe("vacation_1");
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
|
||||
import type { MutableRefObject, RefObject } from "react";
|
||||
import type { TimelineDemandEntry, VacationEntry } from "./TimelineContext.js";
|
||||
import type { DemandHoverData } from "./TimelineTooltip.js";
|
||||
@@ -7,9 +8,10 @@ export type TooltipPosition = {
|
||||
top: number;
|
||||
};
|
||||
|
||||
function toUtcDayTimestamp(value: Date | string): number {
|
||||
function toLocalDayTimestamp(value: Date | string): number {
|
||||
const date = new Date(value);
|
||||
return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
|
||||
date.setHours(0, 0, 0, 0);
|
||||
return date.getTime();
|
||||
}
|
||||
|
||||
export function updateTooltipPosition(
|
||||
@@ -37,12 +39,12 @@ export function findVacationHit<T extends { startDate: Date | string; endDate: D
|
||||
vacations: T[],
|
||||
date: Date,
|
||||
): T | null {
|
||||
const target = toUtcDayTimestamp(date);
|
||||
const target = toLocalDayTimestamp(date);
|
||||
|
||||
return (
|
||||
vacations.find((vacation) => {
|
||||
const start = toUtcDayTimestamp(vacation.startDate);
|
||||
const end = toUtcDayTimestamp(vacation.endDate);
|
||||
const start = toLocalDayTimestamp(vacation.startDate);
|
||||
const end = toLocalDayTimestamp(vacation.endDate);
|
||||
return target >= start && target <= end;
|
||||
}) ?? null
|
||||
);
|
||||
@@ -100,7 +102,7 @@ export function scheduleVacationHoverUpdate<T extends { id: string; startDate: D
|
||||
export function buildDemandHoverData(demand: TimelineDemandEntry): DemandHoverData {
|
||||
const startDate = new Date(demand.startDate);
|
||||
const endDate = new Date(demand.endDate);
|
||||
const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / 86_400_000) + 1);
|
||||
const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1);
|
||||
|
||||
return {
|
||||
roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
|
||||
|
||||
Reference in New Issue
Block a user