Hartmut
eb283147d1
- Fix sidebar double-highlight on /vacations/my (Gitea #6): add isNavItemActive() helper - Add project color picker (schema + API + modal + timeline rendering) - Add ProjectCombobox/ResourceCombobox to timeline toolbar - Show PENDING vacations on timeline with dashed/dimmed style - Add "show demand projects" preference with localStorage persistence - Add ProjectAssignmentsTable with total hours/cost columns - Extend vacation API to accept status arrays - Add GitLooper formal YAML agent configuration - Extend user admin with permission overrides UI - Add delete-assignment use case tests - Add status-styles.ts shared badge constants - Centralize formatMoney/formatCents in format.ts Co-Authored-By: claude-flow <ruv@ruv.net>
1135 lines
40 KiB
TypeScript
1135 lines
40 KiB
TypeScript
"use client";
|
|
|
|
import { clsx } from "clsx";
|
|
import { startTransition, useCallback, useEffect, useMemo, useRef, useState } from "react";
|
|
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
import {
|
|
useTimelineContext,
|
|
type TimelineAssignmentEntry,
|
|
type VacationEntry,
|
|
} from "./TimelineContext.js";
|
|
import { ConflictOverlay } from "./ConflictOverlay.js";
|
|
import { computeSubLanes } from "./utils.js";
|
|
import { heatmapBgColor, heatmapColor } from "./heatmapUtils.js";
|
|
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
|
import { formatDateLong } from "~/lib/format.js";
|
|
import {
|
|
ROW_HEIGHT,
|
|
SUB_LANE_HEIGHT,
|
|
LABEL_WIDTH,
|
|
ORDER_TYPE_COLORS,
|
|
} from "./timelineConstants.js";
|
|
import type {
|
|
DragState,
|
|
AllocDragState,
|
|
RangeState,
|
|
ShiftPreviewData,
|
|
} from "~/hooks/useTimelineDrag.js";
|
|
import type { HeatmapColorScheme } from "~/hooks/useAppPreferences.js";
|
|
|
|
// ─── Props ──────────────────────────────────────────────────────────────────
|
|
|
|
interface TimelineResourcePanelProps {
|
|
scrollContainerRef: React.RefObject<HTMLDivElement | null>;
|
|
dragState: DragState;
|
|
allocDragState: AllocDragState;
|
|
rangeState: RangeState;
|
|
shiftPreview: ShiftPreviewData | null;
|
|
contextResourceIds: string[];
|
|
onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void;
|
|
onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void;
|
|
onRowMouseDown: (e: React.MouseEvent, info: RowMouseDownInfo) => void;
|
|
onRowTouchStart: (e: React.TouchEvent, info: RowMouseDownInfo) => void;
|
|
onAllocationContextMenu: (
|
|
info: { allocationId: string; projectId: string },
|
|
anchorX: number,
|
|
anchorY: number,
|
|
) => void;
|
|
// Layout from useTimelineLayout
|
|
CELL_WIDTH: number;
|
|
dates: Date[];
|
|
totalCanvasWidth: number;
|
|
toLeft: (date: Date) => number;
|
|
toWidth: (start: Date, end: Date) => number;
|
|
gridLines: React.ReactNode;
|
|
xToDate: (clientX: number, rect: DOMRect) => Date;
|
|
}
|
|
|
|
export interface AllocMouseDownInfo {
|
|
mode: "move" | "resize-start" | "resize-end";
|
|
allocationId: string;
|
|
mutationAllocationId: string;
|
|
projectId: string;
|
|
projectName: string;
|
|
resourceId: string | null;
|
|
startDate: Date;
|
|
endDate: Date;
|
|
}
|
|
|
|
export interface RowMouseDownInfo {
|
|
resourceId: string;
|
|
startDate: Date;
|
|
suggestedProjectId?: string;
|
|
}
|
|
|
|
// ─── Component ──────────────────────────────────────────────────────────────
|
|
|
|
export function TimelineResourcePanel({
|
|
scrollContainerRef,
|
|
dragState,
|
|
allocDragState,
|
|
rangeState,
|
|
shiftPreview,
|
|
contextResourceIds,
|
|
onAllocMouseDown,
|
|
onAllocTouchStart,
|
|
onRowMouseDown,
|
|
onRowTouchStart,
|
|
onAllocationContextMenu,
|
|
CELL_WIDTH,
|
|
dates,
|
|
totalCanvasWidth,
|
|
toLeft,
|
|
toWidth,
|
|
gridLines,
|
|
xToDate,
|
|
}: TimelineResourcePanelProps) {
|
|
const {
|
|
resources,
|
|
allocsByResource,
|
|
vacationsByResource,
|
|
filters,
|
|
viewStart,
|
|
viewEnd,
|
|
displayMode,
|
|
heatmapScheme,
|
|
activeFilterCount,
|
|
} = useTimelineContext();
|
|
|
|
// ─── Heatmap hover state ────────────────────────────────────────────────────
|
|
const heatmapRafRef = useRef<number | null>(null);
|
|
const lastHeatmapDayRef = useRef<number>(-1);
|
|
const vacationHoverRafRef = useRef<number | null>(null);
|
|
const hoveredVacationKeyRef = useRef<string | null>(null);
|
|
const pendingHeatmapRef = useRef<{
|
|
clientX: number;
|
|
rect: DOMRect;
|
|
allocs: TimelineAssignmentEntry[];
|
|
} | null>(null);
|
|
const heatmapTooltipRef = useRef<HTMLDivElement | null>(null);
|
|
const vacationTooltipRef = useRef<HTMLDivElement | null>(null);
|
|
const heatmapTooltipPosRef = useRef({ left: 0, top: 0 });
|
|
const vacationTooltipPosRef = useRef({ left: 0, top: 0 });
|
|
|
|
const [heatmapHover, setHeatmapHover] = useState<{
|
|
date: Date;
|
|
totalH: number;
|
|
pct: number;
|
|
breakdown: {
|
|
projectId: string;
|
|
shortCode: string;
|
|
projectName: string;
|
|
orderType: string;
|
|
hoursPerDay: number;
|
|
responsiblePerson?: string | null;
|
|
}[];
|
|
} | null>(null);
|
|
|
|
const [vacationHover, setVacationHover] = useState<null | {
|
|
type: string;
|
|
startDate: Date | string;
|
|
endDate: Date | string;
|
|
note?: string | null;
|
|
requestedBy?: { name?: string | null; email: string } | null;
|
|
approvedBy?: { name?: string | null; email: string } | null;
|
|
approvedAt?: Date | string | null;
|
|
}>(null);
|
|
|
|
// ─── Virtual row list ────────────────────────────────────────────────────────
|
|
const rowVirtualizer = useVirtualizer({
|
|
count: resources.length,
|
|
getScrollElement: () => scrollContainerRef.current,
|
|
estimateSize: () => ROW_HEIGHT,
|
|
overscan: 5,
|
|
});
|
|
const virtualItems = rowVirtualizer.getVirtualItems();
|
|
const totalRowHeight = rowVirtualizer.getTotalSize();
|
|
|
|
// ─── Memo 1: resourceRows — which rows to render ─────────────────────────
|
|
// (virtualizer handles which subset is visible; this memo just pre-computes
|
|
// per-row data that the render loop needs)
|
|
const resourceRows = useMemo(() => {
|
|
return resources.map((resource) => {
|
|
const allocs = allocsByResource.get(resource.id) ?? [];
|
|
const isContextResource = contextResourceIds.includes(resource.id);
|
|
return { resource, allocs, isContextResource };
|
|
});
|
|
}, [resources, allocsByResource, contextResourceIds]);
|
|
|
|
// ─── Memo 2: vacationBlocks — vacation bar positions per resource ─────────
|
|
const vacationBlocksByResource = useMemo(() => {
|
|
if (!filters.showVacations) return new Map<string, VacationBlockInfo[]>();
|
|
|
|
const result = new Map<string, VacationBlockInfo[]>();
|
|
for (const [resourceId, vacations] of vacationsByResource) {
|
|
const blocks: VacationBlockInfo[] = [];
|
|
for (const v of vacations) {
|
|
const vStart = new Date(v.startDate);
|
|
const vEnd = new Date(v.endDate);
|
|
const left = toLeft(vStart);
|
|
const width = Math.max(CELL_WIDTH, toWidth(vStart, vEnd));
|
|
if (width <= 0 || left >= totalCanvasWidth) continue;
|
|
blocks.push({ vacation: v, left, width });
|
|
}
|
|
if (blocks.length > 0) {
|
|
result.set(resourceId, blocks);
|
|
}
|
|
}
|
|
return result;
|
|
}, [vacationsByResource, toLeft, toWidth, CELL_WIDTH, totalCanvasWidth, filters.showVacations]);
|
|
|
|
// ─── Memo 3: assignmentBlocks — pre-computed per resource for strip mode ──
|
|
// (Bar mode computes differently per-day, so we only pre-compute for strip.)
|
|
const assignmentBlocksByResource = useMemo(() => {
|
|
if (displayMode === "bar")
|
|
return new Map<string, { laneCount: number; blockData: AllocBlockData[] }>();
|
|
|
|
const result = new Map<string, { laneCount: number; blockData: AllocBlockData[] }>();
|
|
for (const { resource, allocs } of resourceRows) {
|
|
if (allocs.length === 0) continue;
|
|
|
|
const subLaneMap = computeSubLanes(
|
|
allocs.map((a) => ({
|
|
id: a.id,
|
|
startDate: new Date(a.startDate),
|
|
endDate: new Date(a.endDate),
|
|
})),
|
|
);
|
|
const laneCount = subLaneMap.size > 0 ? Math.max(...subLaneMap.values()) + 1 : 1;
|
|
const blockData: AllocBlockData[] = allocs.map((alloc) => ({
|
|
alloc,
|
|
lane: subLaneMap.get(alloc.id) ?? 0,
|
|
}));
|
|
result.set(resource.id, { laneCount, blockData });
|
|
}
|
|
return result;
|
|
}, [displayMode, resourceRows]);
|
|
|
|
// ─── Heatmap row hover handler ────────────────────────────────────────────
|
|
const handleRowHeatmapMove = useCallback(
|
|
(e: React.MouseEvent, allocs: TimelineAssignmentEntry[]) => {
|
|
heatmapTooltipPosRef.current = { left: e.clientX + 16, top: e.clientY - 52 };
|
|
if (heatmapTooltipRef.current) {
|
|
heatmapTooltipRef.current.style.left = `${heatmapTooltipPosRef.current.left}px`;
|
|
heatmapTooltipRef.current.style.top = `${heatmapTooltipPosRef.current.top}px`;
|
|
}
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const dayIndex = Math.floor((e.clientX - rect.left) / CELL_WIDTH);
|
|
if (dayIndex === lastHeatmapDayRef.current) return;
|
|
|
|
pendingHeatmapRef.current = { clientX: e.clientX, rect, allocs };
|
|
if (heatmapRafRef.current !== null) return;
|
|
|
|
heatmapRafRef.current = requestAnimationFrame(() => {
|
|
heatmapRafRef.current = null;
|
|
const pending = pendingHeatmapRef.current;
|
|
pendingHeatmapRef.current = null;
|
|
if (!pending) return;
|
|
|
|
const { clientX, rect: r, allocs: a } = pending;
|
|
const dayIdx = Math.floor((clientX - r.left) / CELL_WIDTH);
|
|
const date = dates[dayIdx];
|
|
if (!date) {
|
|
lastHeatmapDayRef.current = -1;
|
|
startTransition(() => setHeatmapHover(null));
|
|
return;
|
|
}
|
|
lastHeatmapDayRef.current = dayIdx;
|
|
|
|
const t = date.getTime();
|
|
const REF_H = 8;
|
|
const projectHours = new Map<
|
|
string,
|
|
{
|
|
shortCode: string;
|
|
projectName: string;
|
|
orderType: string;
|
|
hours: number;
|
|
responsiblePerson?: string | null;
|
|
}
|
|
>();
|
|
for (const alloc of a) {
|
|
const s = new Date(alloc.startDate);
|
|
s.setHours(0, 0, 0, 0);
|
|
const ev = new Date(alloc.endDate);
|
|
ev.setHours(0, 0, 0, 0);
|
|
if (t < s.getTime() || t > ev.getTime()) continue;
|
|
const existing = projectHours.get(alloc.projectId);
|
|
if (existing) {
|
|
existing.hours += alloc.hoursPerDay;
|
|
} else {
|
|
projectHours.set(alloc.projectId, {
|
|
shortCode: alloc.project.shortCode,
|
|
projectName: alloc.project.name,
|
|
orderType: alloc.project.orderType,
|
|
hours: alloc.hoursPerDay,
|
|
responsiblePerson:
|
|
(alloc.project as { responsiblePerson?: string | null }).responsiblePerson ?? null,
|
|
});
|
|
}
|
|
}
|
|
|
|
const breakdown = [...projectHours.entries()]
|
|
.map(([projectId, v]) => ({ projectId, ...v, hoursPerDay: v.hours }))
|
|
.sort((a, b) => b.hoursPerDay - a.hoursPerDay);
|
|
|
|
const totalH = breakdown.reduce((sum, b) => sum + b.hoursPerDay, 0);
|
|
startTransition(() => {
|
|
setHeatmapHover({ date, totalH, pct: (totalH / REF_H) * 100, breakdown });
|
|
});
|
|
});
|
|
},
|
|
[CELL_WIDTH, dates],
|
|
);
|
|
|
|
// ─── Vacation hover ───────────────────────────────────────────────────────
|
|
const handleRowVacationHover = useCallback(
|
|
(e: React.MouseEvent, resourceId: string) => {
|
|
vacationTooltipPosRef.current = { left: e.clientX + 14, top: e.clientY - 8 };
|
|
if (vacationTooltipRef.current) {
|
|
vacationTooltipRef.current.style.left = `${vacationTooltipPosRef.current.left}px`;
|
|
vacationTooltipRef.current.style.top = `${vacationTooltipPosRef.current.top}px`;
|
|
}
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const clientX = e.clientX;
|
|
|
|
if (vacationHoverRafRef.current !== null) return;
|
|
|
|
vacationHoverRafRef.current = requestAnimationFrame(() => {
|
|
vacationHoverRafRef.current = null;
|
|
const date = xToDate(clientX, rect);
|
|
const t = date.getTime();
|
|
const resourceVacations = vacationsByResource.get(resourceId) ?? [];
|
|
const hit =
|
|
resourceVacations.find((v) => {
|
|
const s = new Date(v.startDate);
|
|
s.setHours(0, 0, 0, 0);
|
|
const end = new Date(v.endDate);
|
|
end.setHours(0, 0, 0, 0);
|
|
return t >= s.getTime() && t <= end.getTime();
|
|
}) ?? null;
|
|
|
|
const nextKey = hit ? `${resourceId}:${hit.id}` : null;
|
|
if (nextKey === hoveredVacationKeyRef.current) return;
|
|
|
|
hoveredVacationKeyRef.current = nextKey;
|
|
startTransition(() => {
|
|
setVacationHover(hit);
|
|
});
|
|
});
|
|
},
|
|
[vacationsByResource, xToDate],
|
|
);
|
|
|
|
const clearHoverTooltips = useCallback(() => {
|
|
if (heatmapRafRef.current !== null) {
|
|
cancelAnimationFrame(heatmapRafRef.current);
|
|
heatmapRafRef.current = null;
|
|
}
|
|
if (vacationHoverRafRef.current !== null) {
|
|
cancelAnimationFrame(vacationHoverRafRef.current);
|
|
vacationHoverRafRef.current = null;
|
|
}
|
|
|
|
const shouldClearHeatmap = lastHeatmapDayRef.current !== -1;
|
|
const shouldClearVacation = hoveredVacationKeyRef.current !== null;
|
|
|
|
lastHeatmapDayRef.current = -1;
|
|
hoveredVacationKeyRef.current = null;
|
|
|
|
if (shouldClearHeatmap || shouldClearVacation) {
|
|
startTransition(() => {
|
|
if (shouldClearHeatmap) setHeatmapHover(null);
|
|
if (shouldClearVacation) setVacationHover(null);
|
|
});
|
|
}
|
|
}, []);
|
|
|
|
// ─── Cleanup rAF on unmount ───────────────────────────────────────────────
|
|
useEffect(
|
|
() => () => {
|
|
if (heatmapRafRef.current !== null) cancelAnimationFrame(heatmapRafRef.current);
|
|
if (vacationHoverRafRef.current !== null) cancelAnimationFrame(vacationHoverRafRef.current);
|
|
},
|
|
[],
|
|
);
|
|
|
|
// ─── Render helpers ───────────────────────────────────────────────────────
|
|
|
|
if (resources.length === 0) {
|
|
return (
|
|
<div className="text-center py-16 text-gray-400">
|
|
No allocations in this time range{activeFilterCount > 0 && " (filtered)"}.
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
height: totalRowHeight,
|
|
position: "relative",
|
|
}}
|
|
>
|
|
{virtualItems.map((virtualRow) => {
|
|
const rowData = resourceRows[virtualRow.index];
|
|
if (!rowData) return null;
|
|
const { resource, allocs, isContextResource } = rowData;
|
|
const inBarMode = displayMode === "bar";
|
|
const precomputed = assignmentBlocksByResource.get(resource.id);
|
|
const laneCount = inBarMode ? 1 : (precomputed?.laneCount ?? 1);
|
|
const rowHeight = inBarMode
|
|
? ROW_HEIGHT
|
|
: Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
|
|
|
|
return (
|
|
<div
|
|
key={resource.id}
|
|
data-index={virtualRow.index}
|
|
ref={rowVirtualizer.measureElement}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
width: "100%",
|
|
transform: `translateY(${virtualRow.start}px)`,
|
|
}}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"flex border-b border-gray-100 hover:bg-blue-50/20 group transition-colors",
|
|
dragState.isDragging && isContextResource && "border-l-4 border-l-brand-400",
|
|
)}
|
|
style={{ height: rowHeight }}
|
|
>
|
|
{/* Label column */}
|
|
<div
|
|
className={clsx(
|
|
"flex-shrink-0 border-r border-gray-200 flex items-center px-4 gap-2.5 bg-white sticky left-0 z-30 group-hover:bg-blue-50",
|
|
dragState.isDragging && isContextResource && "bg-brand-50",
|
|
)}
|
|
style={{ width: LABEL_WIDTH }}
|
|
>
|
|
<div className="w-8 h-8 rounded-full bg-brand-100 flex items-center justify-center text-xs font-bold text-brand-700 flex-shrink-0">
|
|
{resource.displayName.slice(0, 2).toUpperCase()}
|
|
</div>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 truncate">
|
|
{resource.displayName}
|
|
</div>
|
|
<div className="text-xs text-gray-400 truncate">
|
|
{resource.chapter ?? resource.eid}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Row canvas */}
|
|
<div
|
|
className="relative overflow-hidden touch-none"
|
|
style={{ width: totalCanvasWidth, height: rowHeight, touchAction: "none" }}
|
|
onMouseDown={(e) => {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const date = xToDate(e.clientX, rect);
|
|
onRowMouseDown(e, { resourceId: resource.id, startDate: date });
|
|
}}
|
|
onTouchStart={(e) => {
|
|
const rect = e.currentTarget.getBoundingClientRect();
|
|
const date = xToDate(e.touches[0]?.clientX ?? 0, rect);
|
|
onRowTouchStart(e, { resourceId: resource.id, startDate: date });
|
|
}}
|
|
onMouseMove={(e) => {
|
|
handleRowHeatmapMove(e, allocs);
|
|
handleRowVacationHover(e, resource.id);
|
|
}}
|
|
onMouseLeave={clearHoverTooltips}
|
|
>
|
|
{gridLines}
|
|
{inBarMode
|
|
? renderDailyBars(
|
|
allocs,
|
|
rowHeight,
|
|
CELL_WIDTH,
|
|
dates,
|
|
allocDragState,
|
|
onAllocMouseDown,
|
|
onAllocTouchStart,
|
|
onAllocationContextMenu,
|
|
toLeft,
|
|
toWidth,
|
|
totalCanvasWidth,
|
|
)
|
|
: renderAllocBlocksFromData(
|
|
precomputed?.blockData ?? [],
|
|
allocs,
|
|
dragState,
|
|
allocDragState,
|
|
toLeft,
|
|
toWidth,
|
|
CELL_WIDTH,
|
|
totalCanvasWidth,
|
|
onAllocMouseDown,
|
|
onAllocTouchStart,
|
|
onAllocationContextMenu,
|
|
)}
|
|
{renderVacationBlocksForRow(
|
|
vacationBlocksByResource.get(resource.id) ?? [],
|
|
rowHeight,
|
|
)}
|
|
{displayMode === "strip" && renderLoadGraph(allocs, dates, CELL_WIDTH)}
|
|
{displayMode === "heatmap" &&
|
|
renderHeatmapOverlay(allocs, dates, CELL_WIDTH, heatmapScheme)}
|
|
{renderRangeOverlay(
|
|
rangeState,
|
|
resource.id,
|
|
rowHeight,
|
|
toLeft,
|
|
toWidth,
|
|
CELL_WIDTH,
|
|
)}
|
|
|
|
{dragState.isDragging &&
|
|
dragState.projectId &&
|
|
shiftPreview &&
|
|
!shiftPreview.valid &&
|
|
shiftPreview.conflictCount > 0 &&
|
|
allocs.some((a) => a.projectId === dragState.projectId) && (
|
|
<ConflictOverlay
|
|
left={toLeft(dragState.currentStartDate ?? viewStart) + 2}
|
|
width={
|
|
toWidth(
|
|
dragState.currentStartDate ?? viewStart,
|
|
dragState.currentEndDate ?? viewEnd,
|
|
) - 4
|
|
}
|
|
height={rowHeight - 8}
|
|
type="availability"
|
|
message={`${shiftPreview.conflictCount} conflict(s)`}
|
|
/>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
|
|
{/* Tooltips rendered inside the panel so they live near their data source */}
|
|
<ResourcePanelTooltips
|
|
heatmapTooltipRef={heatmapTooltipRef}
|
|
heatmapTooltipPos={heatmapTooltipPosRef.current}
|
|
vacationTooltipRef={vacationTooltipRef}
|
|
vacationTooltipPos={vacationTooltipPosRef.current}
|
|
heatmapHover={heatmapHover}
|
|
vacationHover={vacationHover}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Tooltip sub-component (portal-free: positioned fixed) ──────────────────
|
|
|
|
function ResourcePanelTooltips({
|
|
heatmapTooltipRef,
|
|
heatmapTooltipPos,
|
|
vacationTooltipRef,
|
|
vacationTooltipPos,
|
|
heatmapHover,
|
|
vacationHover,
|
|
}: {
|
|
heatmapTooltipRef: React.RefObject<HTMLDivElement | null>;
|
|
heatmapTooltipPos: { left: number; top: number };
|
|
vacationTooltipRef: React.RefObject<HTMLDivElement | null>;
|
|
vacationTooltipPos: { left: number; top: number };
|
|
heatmapHover: {
|
|
date: Date;
|
|
totalH: number;
|
|
pct: number;
|
|
breakdown: {
|
|
projectId: string;
|
|
shortCode: string;
|
|
projectName: string;
|
|
orderType: string;
|
|
hoursPerDay: number;
|
|
responsiblePerson?: string | null;
|
|
}[];
|
|
} | null;
|
|
vacationHover: {
|
|
type: string;
|
|
startDate: Date | string;
|
|
endDate: Date | string;
|
|
note?: string | null;
|
|
requestedBy?: { name?: string | null; email: string } | null;
|
|
approvedBy?: { name?: string | null; email: string } | null;
|
|
approvedAt?: Date | string | null;
|
|
} | null;
|
|
}) {
|
|
return (
|
|
<>
|
|
{heatmapHover ? (
|
|
<div
|
|
ref={heatmapTooltipRef}
|
|
style={{
|
|
left: heatmapTooltipPos.left,
|
|
top: heatmapTooltipPos.top,
|
|
backgroundColor: "rgba(3, 7, 18, 0.96)",
|
|
}}
|
|
className="fixed z-40 max-w-sm pointer-events-none rounded-xl border border-gray-800 bg-gray-950/96 px-3 py-2 text-xs text-white shadow-2xl"
|
|
>
|
|
<div className="flex items-center justify-between gap-3">
|
|
<span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
|
|
<span className="text-[11px] text-gray-300">
|
|
{heatmapHover.totalH.toFixed(1)}h · {Math.round(heatmapHover.pct)}%
|
|
</span>
|
|
</div>
|
|
<div className="mt-2 space-y-1.5">
|
|
{heatmapHover.breakdown.length > 0 ? (
|
|
heatmapHover.breakdown.slice(0, 6).map((entry) => (
|
|
<div
|
|
key={`${entry.projectId}-${entry.shortCode}`}
|
|
className="flex items-start justify-between gap-3"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="truncate font-medium text-white">
|
|
{entry.shortCode ? `${entry.shortCode} · ` : ""}
|
|
{entry.projectName}
|
|
</div>
|
|
<div className="truncate text-[11px] text-gray-400">
|
|
{entry.responsiblePerson
|
|
? `Lead: ${entry.responsiblePerson}`
|
|
: entry.orderType}
|
|
</div>
|
|
</div>
|
|
<span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
|
|
{entry.hoursPerDay}h
|
|
</span>
|
|
</div>
|
|
))
|
|
) : (
|
|
<div className="text-[11px] text-gray-400">No bookings on this day.</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{vacationHover ? (
|
|
<div
|
|
ref={vacationTooltipRef}
|
|
style={{
|
|
left: vacationTooltipPos.left,
|
|
top: vacationTooltipPos.top,
|
|
backgroundColor: "rgba(120, 53, 15, 0.95)",
|
|
}}
|
|
className="fixed z-40 max-w-xs pointer-events-none rounded-xl border border-amber-700/50 bg-amber-950/95 px-3 py-2 text-xs text-amber-50 shadow-2xl"
|
|
>
|
|
<div className="font-semibold">{vacationHover.type.replaceAll("_", " ")}</div>
|
|
<div className="mt-1 text-[11px] text-amber-100/90">
|
|
{formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
|
|
</div>
|
|
{vacationHover.note ? (
|
|
<div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ─── Helper types ───────────────────────────────────────────────────────────
|
|
|
|
interface VacationBlockInfo {
|
|
vacation: VacationEntry;
|
|
left: number;
|
|
width: number;
|
|
}
|
|
|
|
interface AllocBlockData {
|
|
alloc: TimelineAssignmentEntry;
|
|
lane: number;
|
|
}
|
|
|
|
// ─── Pure render functions (no hooks, extracted from TimelineView) ───────────
|
|
|
|
const TYPE_COLORS: Record<string, string> = {
|
|
ANNUAL: "bg-orange-400/40",
|
|
SICK: "bg-red-500/40",
|
|
PUBLIC_HOLIDAY: "bg-violet-400/40",
|
|
OTHER: "bg-amber-400/40",
|
|
};
|
|
const TYPE_BORDER: Record<string, string> = {
|
|
ANNUAL: "border-orange-500",
|
|
SICK: "border-red-600",
|
|
PUBLIC_HOLIDAY: "border-violet-500",
|
|
OTHER: "border-amber-500",
|
|
};
|
|
const TYPE_LABELS_SHORT: Record<string, string> = {
|
|
ANNUAL: "Annual",
|
|
SICK: "Sick",
|
|
PUBLIC_HOLIDAY: "Holiday",
|
|
OTHER: "Other",
|
|
};
|
|
|
|
function renderVacationBlocksForRow(blocks: VacationBlockInfo[], rowHeight: number) {
|
|
if (blocks.length === 0) return null;
|
|
|
|
return blocks.map(({ vacation: v, left, width }) => {
|
|
const colorClass = TYPE_COLORS[v.type] ?? "bg-orange-400/40";
|
|
const borderClass = TYPE_BORDER[v.type] ?? "border-orange-500";
|
|
const label = TYPE_LABELS_SHORT[v.type] ?? v.type;
|
|
const isPending = v.status === "PENDING";
|
|
|
|
return (
|
|
<div
|
|
key={`vac-${v.id}`}
|
|
className={clsx(
|
|
"absolute z-[5] flex items-end px-1 pb-0.5 overflow-hidden pointer-events-none",
|
|
colorClass,
|
|
isPending ? "border-t-2 border-dashed opacity-60" : "border-t-2",
|
|
isPending ? "" : borderClass,
|
|
)}
|
|
style={{ left: left + 1, width: width - 2, top: 0, height: rowHeight }}
|
|
>
|
|
{width > 40 && (
|
|
<span className="text-[9px] font-bold truncate opacity-70 text-gray-700 dark:text-gray-200 pointer-events-none">
|
|
{isPending ? "\u23F3" : "\uD83C\uDFD6"} {label}
|
|
</span>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
|
|
function renderRangeOverlay(
|
|
rangeState: RangeState,
|
|
resourceId: string,
|
|
rowHeight: number,
|
|
toLeft: (d: Date) => number,
|
|
toWidth: (s: Date, e: Date) => number,
|
|
CELL_WIDTH: number,
|
|
) {
|
|
if (!rangeState.isSelecting || rangeState.resourceId !== resourceId || !rangeState.startDate) {
|
|
return null;
|
|
}
|
|
const end = rangeState.currentDate ?? rangeState.startDate;
|
|
const [selStart, selEnd] =
|
|
rangeState.startDate <= end ? [rangeState.startDate, end] : [end, rangeState.startDate];
|
|
|
|
const left = toLeft(selStart);
|
|
const width = Math.max(CELL_WIDTH, toWidth(selStart, selEnd));
|
|
|
|
return (
|
|
<div
|
|
className="absolute bg-brand-200/40 border-2 border-brand-400 rounded pointer-events-none z-10"
|
|
style={{ left, width, top: 4, height: rowHeight - 8 }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function renderAllocBlocksFromData(
|
|
blockData: AllocBlockData[],
|
|
_allocs: TimelineAssignmentEntry[],
|
|
dragState: DragState,
|
|
allocDragState: AllocDragState,
|
|
toLeft: (d: Date) => number,
|
|
toWidth: (s: Date, e: Date) => number,
|
|
CELL_WIDTH: number,
|
|
totalCanvasWidth: number,
|
|
onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
|
|
onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
|
|
onAllocationContextMenu: (
|
|
info: { allocationId: string; projectId: string },
|
|
anchorX: number,
|
|
anchorY: number,
|
|
) => void,
|
|
) {
|
|
const anyDragActive = dragState.isDragging || allocDragState.isActive;
|
|
|
|
return blockData.map(({ alloc, lane }) => {
|
|
const allocStart = new Date(alloc.startDate);
|
|
const allocEnd = new Date(alloc.endDate);
|
|
|
|
const isProjectShifted = dragState.isDragging && dragState.projectId === alloc.projectId;
|
|
const isAllocDragged = allocDragState.isActive && allocDragState.allocationId === alloc.id;
|
|
const isBeingDragged = isProjectShifted || isAllocDragged;
|
|
const isOtherDragged = anyDragActive && !isBeingDragged;
|
|
|
|
let dispStart = allocStart;
|
|
let dispEnd = allocEnd;
|
|
if (isProjectShifted && dragState.currentStartDate && dragState.currentEndDate) {
|
|
dispStart = dragState.currentStartDate;
|
|
dispEnd = dragState.currentEndDate;
|
|
} else if (isAllocDragged && allocDragState.currentStartDate && allocDragState.currentEndDate) {
|
|
dispStart = allocDragState.currentStartDate;
|
|
dispEnd = allocDragState.currentEndDate;
|
|
}
|
|
|
|
const left = toLeft(dispStart);
|
|
const width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
|
|
if (width <= 0 || left >= totalCanvasWidth) return null;
|
|
|
|
const blockTop = 8 + lane * SUB_LANE_HEIGHT;
|
|
const blockHeight = SUB_LANE_HEIGHT - 8;
|
|
|
|
const customColor = (alloc.project as { color?: string | null }).color;
|
|
const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
|
|
bg: "bg-gray-400",
|
|
text: "text-white",
|
|
light: "",
|
|
};
|
|
const HANDLE_W = width >= 48 ? 10 : 6;
|
|
const hasRecurrence = !!(alloc.metadata as Record<string, unknown> | null)?.recurrence;
|
|
|
|
const allocInfo: AllocMouseDownInfo = {
|
|
mode: "move",
|
|
allocationId: alloc.id,
|
|
mutationAllocationId: getPlanningEntryMutationId(alloc),
|
|
projectId: alloc.projectId,
|
|
projectName: alloc.project.name,
|
|
resourceId: alloc.resourceId,
|
|
startDate: allocStart,
|
|
endDate: allocEnd,
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={alloc.id}
|
|
className={clsx(
|
|
"absolute rounded-md flex items-stretch overflow-hidden transition-all duration-75 group/block",
|
|
!customColor && colors.bg,
|
|
customColor ? "text-white" : colors.text,
|
|
hasRecurrence && "opacity-80 border-2 border-dashed border-white/60",
|
|
isBeingDragged
|
|
? "opacity-90 shadow-2xl ring-2 ring-white ring-offset-1 z-20 scale-[1.01]"
|
|
: isOtherDragged
|
|
? "opacity-30 z-[10]"
|
|
: "hover:ring-2 hover:ring-white hover:ring-offset-1 z-[10]",
|
|
)}
|
|
style={{
|
|
left: left + 2,
|
|
width: width - 4,
|
|
top: blockTop,
|
|
height: blockHeight,
|
|
...(customColor ? { backgroundColor: customColor } : {}),
|
|
}}
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onAllocationContextMenu(
|
|
{ allocationId: alloc.id, projectId: alloc.projectId },
|
|
e.clientX,
|
|
e.clientY,
|
|
);
|
|
}}
|
|
>
|
|
{/* Left resize handle */}
|
|
<div
|
|
className="flex-shrink-0 flex items-center justify-center cursor-ew-resize hover:bg-black/20 transition-colors"
|
|
style={{ width: HANDLE_W }}
|
|
onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" })}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, { ...allocInfo, mode: "resize-start" });
|
|
}}
|
|
>
|
|
{HANDLE_W >= 10 && (
|
|
<div className="flex flex-col gap-0.5 opacity-60 group-hover/block:opacity-100">
|
|
<div className="w-px h-2.5 bg-white rounded" />
|
|
<div className="w-px h-2.5 bg-white rounded" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Center -- move */}
|
|
<div
|
|
className={clsx(
|
|
"flex-1 flex items-center gap-1 px-1 min-w-0 select-none",
|
|
isBeingDragged ? "cursor-grabbing" : "cursor-grab",
|
|
)}
|
|
onMouseDown={(e) => onAllocMouseDown(e, allocInfo)}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, allocInfo);
|
|
}}
|
|
>
|
|
{hasRecurrence && width > 28 && (
|
|
<span className="text-[10px] opacity-80 flex-shrink-0">↻</span>
|
|
)}
|
|
<span className="text-xs font-semibold truncate">{alloc.project.name}</span>
|
|
{width > 130 && <span className="text-[10px] opacity-75 truncate">{alloc.role}</span>}
|
|
{width > 190 && (
|
|
<span className="text-[10px] opacity-60 truncate">{alloc.hoursPerDay}h</span>
|
|
)}
|
|
</div>
|
|
|
|
{/* Right resize handle */}
|
|
<div
|
|
className="flex-shrink-0 flex items-center justify-center cursor-ew-resize hover:bg-black/20 transition-colors"
|
|
style={{ width: HANDLE_W }}
|
|
onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" })}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, { ...allocInfo, mode: "resize-end" });
|
|
}}
|
|
>
|
|
{HANDLE_W >= 10 && (
|
|
<div className="flex flex-col gap-0.5 opacity-60 group-hover/block:opacity-100">
|
|
<div className="w-px h-2.5 bg-white rounded" />
|
|
<div className="w-px h-2.5 bg-white rounded" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
});
|
|
}
|
|
|
|
// ─── Strip-mode: daily load graph ────────────────────────────────────────────
|
|
|
|
function renderLoadGraph(allocs: TimelineAssignmentEntry[], dates: Date[], CELL_WIDTH: number) {
|
|
const GRAPH_H = 12;
|
|
const REF_H = 8;
|
|
|
|
function hoursOnDay(list: TimelineAssignmentEntry[], t: number) {
|
|
return list.reduce((sum, 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 t >= s.getTime() && t <= e.getTime() ? sum + a.hoursPerDay : sum;
|
|
}, 0);
|
|
}
|
|
|
|
return (
|
|
<div className="absolute inset-x-0 bottom-1 pointer-events-none" style={{ height: GRAPH_H }}>
|
|
{dates.map((date, i) => {
|
|
const t = date.getTime();
|
|
const totalH = hoursOnDay(allocs, t);
|
|
if (totalH === 0) return null;
|
|
|
|
const totalBarH = Math.min(GRAPH_H, Math.round((totalH / REF_H) * GRAPH_H));
|
|
|
|
return (
|
|
<div
|
|
key={i}
|
|
className={clsx(
|
|
"absolute bottom-0 rounded-t-sm",
|
|
totalH > 12
|
|
? "bg-red-500 opacity-80"
|
|
: totalH > 8
|
|
? "bg-amber-400 opacity-80"
|
|
: "bg-brand-500 opacity-80",
|
|
)}
|
|
style={{ left: i * CELL_WIDTH + 3, width: CELL_WIDTH - 6, height: totalBarH }}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// ─── Heatmap-mode: utilisation colour overlay ────────────────────────────────
|
|
|
|
function renderHeatmapOverlay(
|
|
allocs: TimelineAssignmentEntry[],
|
|
dates: Date[],
|
|
CELL_WIDTH: number,
|
|
heatmapScheme: HeatmapColorScheme,
|
|
) {
|
|
const REF_H = 8;
|
|
return dates.map((date, i) => {
|
|
const t = date.getTime();
|
|
const totalH = allocs.reduce((sum, 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 t >= s.getTime() && t <= e.getTime() ? sum + a.hoursPerDay : sum;
|
|
}, 0);
|
|
const bg = heatmapBgColor((totalH / REF_H) * 100, heatmapScheme);
|
|
if (!bg) return null;
|
|
return (
|
|
<div
|
|
key={`hm-${i}`}
|
|
className="absolute top-0 bottom-0 pointer-events-none z-10"
|
|
style={{ left: i * CELL_WIDTH, width: CELL_WIDTH, backgroundColor: bg }}
|
|
/>
|
|
);
|
|
});
|
|
}
|
|
|
|
// ─── Bar-mode: stacked daily bars ────────────────────────────────────────────
|
|
|
|
function renderDailyBars(
|
|
allocs: TimelineAssignmentEntry[],
|
|
rowHeight: number,
|
|
CELL_WIDTH: number,
|
|
dates: Date[],
|
|
allocDragState: AllocDragState,
|
|
onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
|
|
onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
|
|
onAllocationContextMenu: (
|
|
info: { allocationId: string; projectId: string },
|
|
anchorX: number,
|
|
anchorY: number,
|
|
) => void,
|
|
toLeft: (d: Date) => number,
|
|
toWidth: (s: Date, e: Date) => number,
|
|
totalCanvasWidth: number,
|
|
) {
|
|
const BAR_AREA = rowHeight - 8;
|
|
const REF_H = 8;
|
|
|
|
return dates.flatMap((date, i) => {
|
|
const t = date.getTime();
|
|
|
|
const covering = allocs.filter((a) => {
|
|
const isDragged = allocDragState.isActive && allocDragState.allocationId === a.id;
|
|
const s = new Date(
|
|
isDragged && allocDragState.currentStartDate
|
|
? allocDragState.currentStartDate
|
|
: a.startDate,
|
|
);
|
|
const e = new Date(
|
|
isDragged && allocDragState.currentEndDate ? allocDragState.currentEndDate : a.endDate,
|
|
);
|
|
s.setHours(0, 0, 0, 0);
|
|
e.setHours(0, 0, 0, 0);
|
|
return t >= s.getTime() && t <= e.getTime();
|
|
});
|
|
|
|
if (covering.length === 0) return [];
|
|
|
|
const totalH = covering.reduce((sum, a) => sum + a.hoursPerDay, 0);
|
|
const isOver = totalH > REF_H;
|
|
let stackedH = 0;
|
|
|
|
const segs: React.ReactNode[] = covering.map((alloc) => {
|
|
const colors = ORDER_TYPE_COLORS[alloc.project.orderType] ?? {
|
|
bg: "bg-gray-400",
|
|
text: "text-white",
|
|
light: "",
|
|
};
|
|
const segH = Math.max(
|
|
2,
|
|
Math.min(BAR_AREA - stackedH, Math.round((alloc.hoursPerDay / REF_H) * BAR_AREA)),
|
|
);
|
|
const bottom = 4 + stackedH;
|
|
stackedH += segH;
|
|
const isBeingDragged = allocDragState.isActive && allocDragState.allocationId === alloc.id;
|
|
|
|
const dispStart = new Date(
|
|
isBeingDragged && allocDragState.currentStartDate
|
|
? allocDragState.currentStartDate
|
|
: alloc.startDate,
|
|
);
|
|
const dispEnd = new Date(
|
|
isBeingDragged && allocDragState.currentEndDate
|
|
? allocDragState.currentEndDate
|
|
: alloc.endDate,
|
|
);
|
|
dispStart.setHours(0, 0, 0, 0);
|
|
dispEnd.setHours(0, 0, 0, 0);
|
|
const isFirstDay = t === dispStart.getTime();
|
|
const isLastDay = t === dispEnd.getTime();
|
|
const EDGE_W = CELL_WIDTH >= 16 ? 4 : 0;
|
|
|
|
const allocInfo: AllocMouseDownInfo = {
|
|
mode: "move",
|
|
allocationId: alloc.id,
|
|
mutationAllocationId: getPlanningEntryMutationId(alloc),
|
|
projectId: alloc.projectId,
|
|
projectName: alloc.project.name,
|
|
resourceId: alloc.resourceId,
|
|
startDate: new Date(alloc.startDate),
|
|
endDate: new Date(alloc.endDate),
|
|
};
|
|
|
|
return (
|
|
<div
|
|
key={`bar-${i}-${alloc.id}`}
|
|
className={clsx(
|
|
"absolute rounded-sm transition-all duration-75 flex items-stretch overflow-hidden",
|
|
colors.bg,
|
|
isBeingDragged
|
|
? "opacity-90 ring-2 ring-white ring-offset-1 z-20"
|
|
: "hover:opacity-80 z-[10]",
|
|
)}
|
|
style={{ left: i * CELL_WIDTH + 2, width: CELL_WIDTH - 4, height: segH, bottom }}
|
|
onContextMenu={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
onAllocationContextMenu(
|
|
{ allocationId: alloc.id, projectId: alloc.projectId },
|
|
e.clientX,
|
|
e.clientY,
|
|
);
|
|
}}
|
|
>
|
|
{isFirstDay && EDGE_W > 0 && (
|
|
<div
|
|
className="flex-shrink-0 cursor-ew-resize hover:bg-black/20"
|
|
style={{ width: EDGE_W }}
|
|
onMouseDown={(e) => {
|
|
e.stopPropagation();
|
|
onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" });
|
|
}}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, { ...allocInfo, mode: "resize-start" });
|
|
}}
|
|
/>
|
|
)}
|
|
<div
|
|
className={clsx("flex-1 min-w-0", "cursor-grab")}
|
|
onMouseDown={(e) => {
|
|
e.stopPropagation();
|
|
onAllocMouseDown(e, allocInfo);
|
|
}}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, allocInfo);
|
|
}}
|
|
/>
|
|
{isLastDay && EDGE_W > 0 && (
|
|
<div
|
|
className="flex-shrink-0 cursor-ew-resize hover:bg-black/20"
|
|
style={{ width: EDGE_W }}
|
|
onMouseDown={(e) => {
|
|
e.stopPropagation();
|
|
onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" });
|
|
}}
|
|
onTouchStart={(e) => {
|
|
e.stopPropagation();
|
|
onAllocTouchStart(e, { ...allocInfo, mode: "resize-end" });
|
|
}}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
});
|
|
|
|
if (isOver) {
|
|
segs.push(
|
|
<div
|
|
key={`bar-${i}-over`}
|
|
className="absolute bg-red-500/70 rounded-t-sm pointer-events-none z-30"
|
|
style={{ left: i * CELL_WIDTH + 2, width: CELL_WIDTH - 4, top: 4, height: 3 }}
|
|
/>,
|
|
);
|
|
}
|
|
|
|
return segs;
|
|
});
|
|
}
|
|
|
|
// ─── Re-export tooltip types for the parent ─────────────────────────────────
|
|
export type { VacationBlockInfo, AllocBlockData };
|