feat(platform): checkpoint current implementation state

2026-04-01 07:42:03 +02:00
parent 3e53471f05
commit 8c5be51251
125 changed files with 10269 additions and 17808 deletions
@@ -1,5 +1,6 @@
 "use client";

+import type { CommentEntityType } from "@capakraken/shared";
 import { useState } from "react";
 import { clsx } from "clsx";
 import { trpc } from "~/lib/trpc/client.js";
@@ -7,6 +8,11 @@ import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { CommentInput } from "./CommentInput.js";
 import { sanitizeHtml } from "~/lib/sanitize.js";

+interface CommentTarget {
+  entityType: CommentEntityType;
+  entityId: string;
+}
+
 interface CommentAuthor {
  id: string;
  name: string | null;
@@ -32,7 +38,7 @@ interface CommentItem {
 }

 interface CommentThreadProps {
-  entityId: string;
+  commentTarget: CommentTarget;
 }

 function formatRelativeTime(date: Date | string): string {
@@ -110,18 +116,16 @@ function CommentBody({ body }: { body: string }) {

 function SingleComment({
  comment,
-  entityId,
+  commentTarget,
  isReply = false,
 }: {
  comment: CommentItem | CommentReply;
-  entityId: string;
+  commentTarget: CommentTarget;
  isReply?: boolean;
 }) {
  const [showReplyInput, setShowReplyInput] = useState(false);
  const [confirmDelete, setConfirmDelete] = useState(false);
  const utils = trpc.useUtils();
-  const commentTarget = { entityType: "estimate" as const, entityId };
-
  const createMutation = trpc.comment.create.useMutation({
    onSuccess: () => {
      setShowReplyInput(false);
@@ -212,17 +216,17 @@ function SingleComment({
          {/* Inline reply input */}
          {showReplyInput && (
            <div className="mt-3">
-              <CommentInput
-                entityType={commentTarget.entityType}
-                entityId={entityId}
-                parentId={comment.id}
-                onSubmit={(replyBody) => {
-                  createMutation.mutate({
-                    entityType: commentTarget.entityType,
-                    entityId,
-                    parentId: comment.id,
-                    body: replyBody,
-                  });
+                <CommentInput
+                  entityType={commentTarget.entityType}
+                  entityId={commentTarget.entityId}
+                  parentId={comment.id}
+                  onSubmit={(replyBody) => {
+                    createMutation.mutate({
+                      entityType: commentTarget.entityType,
+                      entityId: commentTarget.entityId,
+                      parentId: comment.id,
+                      body: replyBody,
+                    });
                }}
                onCancel={() => setShowReplyInput(false)}
                isSubmitting={createMutation.isPending}
@@ -255,7 +259,7 @@ function SingleComment({
            <SingleComment
              key={reply.id}
              comment={reply}
-              entityId={entityId}
+              commentTarget={commentTarget}
              isReply
            />
          ))}
@@ -265,9 +269,8 @@ function SingleComment({
  );
 }

-export function CommentThread({ entityId }: CommentThreadProps) {
+export function CommentThread({ commentTarget }: CommentThreadProps) {
  const utils = trpc.useUtils();
-  const commentTarget = { entityType: "estimate" as const, entityId };

  const commentsQuery = trpc.comment.list.useQuery(
    commentTarget,
@@ -308,7 +311,7 @@ export function CommentThread({ entityId }: CommentThreadProps) {
            <SingleComment
              key={comment.id}
              comment={comment}
-              entityId={entityId}
+              commentTarget={commentTarget}
            />
          ))}
        </div>
@@ -318,11 +321,11 @@ export function CommentThread({ entityId }: CommentThreadProps) {
      <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
        <CommentInput
          entityType={commentTarget.entityType}
-          entityId={entityId}
+          entityId={commentTarget.entityId}
          onSubmit={(body) => {
            createMutation.mutate({
              entityType: commentTarget.entityType,
-              entityId,
+              entityId: commentTarget.entityId,
              body,
            });
          }}
@@ -42,6 +42,19 @@ type BudgetForecastRow = {
  pctUsed: number;
  activeAssignmentCount?: number;
  calendarLocations?: BudgetForecastLocation[];
+  derivation?: {
+    periodStart: string;
+    periodEnd: string;
+    calendarContextCount: number;
+    holidayAwareAssignmentCount: number;
+    fallbackAssignmentCount: number;
+    baseBurnRateCents: number;
+    adjustedBurnRateCents: number;
+    publicHolidayDayEquivalent: number;
+    publicHolidayCostDeductionCents: number;
+    absenceDayEquivalent: number;
+    absenceCostDeductionCents: number;
+  } | null;
 };

 function formatCurrency(cents: number | undefined): string {
@@ -49,6 +62,11 @@ function formatCurrency(cents: number | undefined): string {
  return `${(cents / 100).toLocaleString("de-DE", { maximumFractionDigits: 0 })} €`;
 }

+function formatDayEquivalent(value: number | undefined): string {
+  if (value === undefined) return "—";
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
 function formatLocation(location: BudgetForecastLocation): string {
  const parts = [
    location.countryCode ?? location.countryName ?? null,
@@ -65,7 +83,7 @@ function SummaryCard({
 }: {
  label: string;
  value: string;
-  helper: string;
+  helper?: string;
 }) {
  return (
    <div className="rounded-2xl border border-gray-200 bg-gray-50/80 px-3 py-2 dark:border-gray-800 dark:bg-gray-950/40">
@@ -73,7 +91,9 @@ function SummaryCard({
        {label}
      </div>
      <div className="mt-1 text-sm font-semibold text-gray-900 dark:text-gray-100">{value}</div>
-      <div className="mt-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">{helper}</div>
+      {helper ? (
+        <div className="mt-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">{helper}</div>
+      ) : null}
    </div>
  );
 }
@@ -113,6 +133,9 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
    acc.remainingCents += row.remainingCents ?? Math.max(0, row.budgetCents - row.spentCents);
    acc.burnRate += row.burnRate;
    acc.activeAssignmentCount += row.activeAssignmentCount ?? 0;
+    acc.baseBurnRateCents += row.derivation?.baseBurnRateCents ?? row.burnRate;
+    acc.publicHolidayCostDeductionCents += row.derivation?.publicHolidayCostDeductionCents ?? 0;
+    acc.absenceCostDeductionCents += row.derivation?.absenceCostDeductionCents ?? 0;
    return acc;
  }, {
    budgetCents: 0,
@@ -120,6 +143,9 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
    remainingCents: 0,
    burnRate: 0,
    activeAssignmentCount: 0,
+    baseBurnRateCents: 0,
+    publicHolidayCostDeductionCents: 0,
+    absenceCostDeductionCents: 0,
  }), [rows]);

  if (isLoading && !data) {
@@ -154,22 +180,26 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
        <SummaryCard
          label="Projects"
          value={String(rows.length)}
-          helper={`${totals.activeAssignmentCount} active assignments in scope`}
+          {...(showDetails ? { helper: `${totals.activeAssignmentCount} active assignments in scope` } : {})}
        />
        <SummaryCard
          label="Budget"
          value={formatCurrency(totals.budgetCents)}
-          helper={`${formatCurrency(totals.spentCents)} spent`}
+          {...(showDetails ? { helper: `${formatCurrency(totals.spentCents)} spent` } : {})}
        />
        <SummaryCard
          label="Remaining"
          value={formatCurrency(totals.remainingCents)}
-          helper={`${rows.filter((row) => row.remainingCents !== undefined && row.remainingCents <= 0).length} exhausted`}
+          {...(showDetails
+            ? { helper: `${rows.filter((row) => row.remainingCents !== undefined && row.remainingCents <= 0).length} exhausted` }
+            : {})}
        />
        <SummaryCard
          label="Burn / Month"
          value={formatCurrency(totals.burnRate)}
-          helper="Holiday- and absence-adjusted active burn"
+          {...(showDetails ? {
+            helper: `Base ${formatCurrency(totals.baseBurnRateCents)} · Hol -${formatCurrency(totals.publicHolidayCostDeductionCents)} · Abs -${formatCurrency(totals.absenceCostDeductionCents)}`,
+          } : {})}
        />
      </div>
      <div className="overflow-auto flex-1">
@@ -200,15 +230,21 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
                  </div>
                  <div className="mt-1 text-[10px] font-normal leading-4 text-gray-500 dark:text-gray-400">
                    {row.clientName ?? "No client"}
-                    {!showDetails && row.calendarLocations && row.calendarLocations.length > 0
-                      ? ` · ${formatLocation(row.calendarLocations[0]!)}`
-                      : ""}
                  </div>
                  {showDetails ? (
                    <div className="mt-1 space-y-1 text-[10px] font-normal leading-4 text-gray-500 dark:text-gray-400">
                      <div className="grid gap-x-3 gap-y-0.5 sm:grid-cols-2">
                        <div>{row.activeAssignmentCount ?? 0} active assignments</div>
                        <div>Remaining {formatCurrency(row.remainingCents ?? Math.max(0, row.budgetCents - row.spentCents))}</div>
+                        {row.derivation ? (
+                          <>
+                            <div>{row.derivation.calendarContextCount} calendar bases</div>
+                            <div>
+                              {row.derivation.holidayAwareAssignmentCount} holiday-aware
+                              {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                            </div>
+                          </>
+                        ) : null}
                      </div>
                      <div className="flex flex-wrap gap-1">
                        {row.calendarLocations && row.calendarLocations.length > 0 ? (
@@ -254,7 +290,22 @@ export function BudgetForecastWidget({ config, onConfigChange }: WidgetProps) {
                  </div>
                  {showDetails ? (
                    <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500 dark:text-gray-400">
-                      <div>{row.activeAssignmentCount ?? 0} active assignments</div>
+                      {row.derivation ? (
+                        <>
+                          <div>
+                            Base {formatCurrency(row.derivation.baseBurnRateCents)} {"->"} Adj {formatCurrency(row.derivation.adjustedBurnRateCents)}
+                          </div>
+                          <div>
+                            Hol -{formatCurrency(row.derivation.publicHolidayCostDeductionCents)} ({formatDayEquivalent(row.derivation.publicHolidayDayEquivalent)}d) · Abs -{formatCurrency(row.derivation.absenceCostDeductionCents)} ({formatDayEquivalent(row.derivation.absenceDayEquivalent)}d)
+                          </div>
+                          <div>
+                            {row.derivation.holidayAwareAssignmentCount} holiday-aware assignment{row.derivation.holidayAwareAssignmentCount === 1 ? "" : "s"}
+                            {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                          </div>
+                        </>
+                      ) : (
+                        <div>{row.activeAssignmentCount ?? 0} active assignments</div>
+                      )}
                      {(row.calendarLocations ?? []).slice(0, 3).map((location) => (
                        <div key={`${location.countryCode ?? location.countryName ?? "na"}:${location.federalState ?? "na"}:${location.metroCityName ?? "na"}`}>
                          {formatLocation(location)} · {location.activeAssignmentCount ?? 0}x · {formatCurrency(location.burnRateCents)}
@@ -53,6 +53,17 @@ function formatDemandSource(source: DemandDerivation["demandSource"] | undefined
  return "No demand basis";
 }

+function renderCalendarBasis(derivation: DemandDerivation): string {
+  if (derivation.calendarLocations.length === 0) {
+    return "No location-based booking basis";
+  }
+
+  return derivation.calendarLocations
+    .slice(0, 2)
+    .map((location) => `${formatLocation(location)} (${formatHours(location.allocatedHours)})`)
+    .join(" · ");
+}
+
 export function DemandWidget({ config, onConfigChange }: WidgetProps) {
  const showDetails = config.showDetails === true;
  const groupBy = (config.groupBy as GroupBy) || "project";
@@ -198,21 +209,15 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                      row.name
                    )}
                  </div>
-                  {showDetails && groupBy === "project" && row.derivation ? (
+                  {showDetails && row.derivation ? (
                    <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500">
                      <div>
                        {row.derivation.periodStart} to {row.derivation.periodEnd}
                      </div>
-                      <div>
-                        {row.derivation.calendarLocations.length > 0
-                          ? row.derivation.calendarLocations
-                            .slice(0, 2)
-                            .map((location) =>
-                              `${formatLocation(location)} (${formatHours(location.allocatedHours)})`,
-                            )
-                            .join(" · ")
-                          : "No location-based booking basis"}
-                      </div>
+                      <div>{renderCalendarBasis(row.derivation)}</div>
+                      {groupBy !== "project" ? (
+                        <div>{formatHours(row.derivation.periodWorkingHoursBase)} per 1.0 FTE base</div>
+                      ) : null}
                      {row.derivation.calendarLocations.length > 2 ? (
                        <div>+ {row.derivation.calendarLocations.length - 2} more calendar contexts</div>
                      ) : null}
@@ -221,7 +226,7 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                </td>
                <td className="px-3 py-2 text-right align-top">
                  <div className="text-gray-700">{row.allocatedHours}h</div>
-                  {showDetails && groupBy === "project" && row.derivation ? (
+                  {showDetails && row.derivation ? (
                    <div className="mt-1 space-y-0.5 text-[10px] leading-4 text-gray-500">
                      <div>{row.derivation.calendarLocations.length} calendar basis{row.derivation.calendarLocations.length === 1 ? "" : "es"}</div>
                      <div>{row.resourceCount} resource{row.resourceCount === 1 ? "" : "s"} in scope</div>
@@ -262,7 +267,7 @@ export function DemandWidget({ config, onConfigChange }: WidgetProps) {
                )}
                <td className="px-3 py-2 text-right align-top text-gray-500">
                  <div>{row.resourceCount}</div>
-                  {showDetails && groupBy === "project" && row.derivation?.calendarLocations.length ? (
+                  {showDetails && row.derivation?.calendarLocations.length ? (
                    <div className="mt-1 text-[10px] leading-4 text-gray-500">
                      {row.derivation.calendarLocations.reduce((sum, location) => sum + location.resourceCount, 0)} resource entries across locations
                    </div>
@@ -7,10 +7,23 @@ type PeakTimesChartRow = {
  label: string;
  bookedHours: number;
  capacityHours: number;
+  baseAvailableHours: number;
+  holidayHoursDeduction: number;
+  absenceDayEquivalent: number;
+  absenceHoursDeduction: number;
  utilizationPct: number;
  remainingHours: number;
  overbookedHours: number;
  isCurrentPeriod: boolean;
+  calendarContextCount: number;
+  calendarLocations: Array<{
+    countryCode: string | null;
+    countryName: string | null;
+    federalState: string | null;
+    metroCityName: string | null;
+    resourceCount: number;
+    effectiveAvailableHours: number;
+  }>;
 };

 interface PeakTimesChartProps {
@@ -26,6 +39,16 @@ function formatHours(value: number): string {
  }).format(value);
 }

+function formatDayEquivalent(value: number): string {
+  return Number.isInteger(value) ? value.toFixed(0) : value.toFixed(1);
+}
+
+function formatLocation(input: PeakTimesChartRow["calendarLocations"][number]): string {
+  const parts = [input.countryCode ?? input.countryName, input.federalState, input.metroCityName]
+    .filter((part): part is string => Boolean(part));
+  return parts.length > 0 ? parts.join(" / ") : "No calendar context";
+}
+
 function utilizationBarTone(utilizationPct: number): string {
  if (utilizationPct > 100) return "bg-red-500";
  if (utilizationPct > 75) return "bg-emerald-500";
@@ -132,7 +155,19 @@ export default function PeakTimesChart({
                  key={row.period}
                  type="button"
                  className="group flex h-full min-w-0 flex-col items-center rounded-2xl px-1 text-left transition-colors"
-                  title={`${row.label}: ${row.utilizationPct}% utilization, ${formatHours(row.bookedHours)}h booked, ${formatHours(row.capacityHours)}h capacity, ${formatHours(row.remainingHours)}h free, ${formatHours(row.overbookedHours)}h overbooked`}
+                  title={[
+                    `${row.label}: ${row.utilizationPct}% utilization`,
+                    `${formatHours(row.bookedHours)}h booked`,
+                    `${formatHours(row.capacityHours)}h effective capacity`,
+                    `${formatHours(row.baseAvailableHours)}h base`,
+                    `${formatHours(row.holidayHoursDeduction)}h holidays`,
+                    `${formatHours(row.absenceHoursDeduction)}h absences (${formatDayEquivalent(row.absenceDayEquivalent)}d)`,
+                    `${row.calendarContextCount} calendar base${row.calendarContextCount === 1 ? "" : "s"}`,
+                    ...row.calendarLocations.slice(0, 3).map((location) =>
+                      `${formatLocation(location)}: ${location.resourceCount}x, ${formatHours(location.effectiveAvailableHours)}h capacity`),
+                    `${formatHours(row.remainingHours)}h free`,
+                    `${formatHours(row.overbookedHours)}h overbooked`,
+                  ].join(", ")}
                  onMouseEnter={() => setHoveredPeriod(row.period)}
                  onMouseLeave={() => setHoveredPeriod((current) => (current === row.period ? null : current))}
                  onClick={() => onSelectedPeriodChange?.(row.period)}
@@ -10,6 +10,51 @@ import { WidgetFilterBar, type WidgetFilter } from "~/components/dashboard/Widge
 import { useWidgetFilterOptions } from "~/hooks/useWidgetFilterOptions.js";
 import { formatMoney } from "~/lib/format.js";

+type ProjectHealthRow = {
+  id: string;
+  projectName: string;
+  shortCode: string;
+  status: string;
+  clientId: string | null;
+  clientName: string | null;
+  budgetHealth: number;
+  staffingHealth: number;
+  timelineHealth: number;
+  compositeScore: number;
+  budgetCents?: number | null;
+  spentCents?: number;
+  remainingBudgetCents?: number | null;
+  budgetUtilizationPercent?: number | null;
+  demandHeadcountTotal?: number;
+  demandHeadcountFilled?: number;
+  demandHeadcountOpen?: number;
+  demandRequirementCount?: number;
+  plannedEndDate?: string | Date | null;
+  daysUntilEndDate?: number | null;
+  timelineStatus?: "ON_TRACK" | "DUE_SOON" | "OVERDUE" | "UNSCHEDULED" | null;
+  calendarLocations?: Array<{
+    countryCode?: string | null;
+    countryName?: string | null;
+    federalState?: string | null;
+    metroCityName?: string | null;
+    assignmentCount: number;
+    spentCents: number;
+  }>;
+  derivation?: {
+    periodStart: string;
+    periodEnd: string;
+    calendarContextCount: number;
+    holidayAwareAssignmentCount: number;
+    fallbackAssignmentCount: number;
+    baseSpentCents: number;
+    adjustedSpentCents: number;
+    publicHolidayDayEquivalent: number;
+    publicHolidayCostDeductionCents: number;
+    absenceDayEquivalent: number;
+    absenceCostDeductionCents: number;
+  } | null;
+};
+
 function healthDot(value: number): string {
  if (value >= 70) return "bg-green-500";
  if (value >= 40) return "bg-amber-400";
@@ -69,6 +114,11 @@ function formatLocation(location: {
  return parts.length > 0 ? parts.join(" / ") : "No calendar context";
 }

+function formatDayEquivalent(value?: number | null): string {
+  if (value == null) return "—";
+  return Number.isInteger(value) ? String(value) : value.toFixed(1);
+}
+
 export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
  const showDetails = config.showDetails === true;
  const { clients } = useWidgetFilterOptions({ clients: true });
@@ -90,7 +140,7 @@ export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
  const clientId = (config.clientId as string) ?? "";

  const rows = useMemo(() => {
-    const all = data ?? [];
+    const all = (data ?? []) as ProjectHealthRow[];
    return all.filter((r) => {
      if (search && !r.projectName.toLowerCase().includes(search) && !r.shortCode.toLowerCase().includes(search)) return false;
      if (clientId && r.clientId !== clientId) return false;
@@ -174,6 +224,22 @@ export function ProjectHealthWidget({ config, onConfigChange }: WidgetProps) {
                      <div>
                        Timeline: {formatShortDate(row.plannedEndDate)} · {formatTimeline(row.daysUntilEndDate, row.timelineStatus)}
                      </div>
+                      {row.derivation ? (
+                        <>
+                          <div>
+                            Spend basis: {row.derivation.calendarContextCount} calendar bases · {row.derivation.holidayAwareAssignmentCount} holiday-aware
+                            {row.derivation.fallbackAssignmentCount > 0 ? ` · ${row.derivation.fallbackAssignmentCount} fallback` : ""}
+                          </div>
+                          <div>
+                            Base {formatMoney(row.derivation.baseSpentCents)} {"->"} Effective {formatMoney(row.derivation.adjustedSpentCents)}
+                          </div>
+                          <div>
+                            Holidays -{formatMoney(row.derivation.publicHolidayCostDeductionCents)} ({formatDayEquivalent(row.derivation.publicHolidayDayEquivalent)}d)
+                            {" · "}
+                            Absence -{formatMoney(row.derivation.absenceCostDeductionCents)} ({formatDayEquivalent(row.derivation.absenceDayEquivalent)}d)
+                          </div>
+                        </>
+                      ) : null}
                      {(row.calendarLocations ?? []).length > 0 ? (
                        <div>
                          Calendar basis: {(row.calendarLocations ?? [])
@@ -5,6 +5,7 @@ import Link from "next/link";
 import dynamic from "next/dynamic";
 import { EstimateExportFormat } from "@capakraken/shared";
 import { clsx } from "clsx";
+import { useSession } from "next-auth/react";
 import type {
  EstimateWorkspaceView,
  WorkspaceTab,
@@ -113,17 +114,19 @@ function ActionNotice({
 }

 export function EstimateWorkspaceClient({ estimateId }: { estimateId: string }) {
+  const { status: sessionStatus } = useSession();
  const [tab, setTab] = useState<WorkspaceTab>("overview");
  const [isEditing, setIsEditing] = useState(false);
  const [actionMessage, setActionMessage] = useState<string | null>(null);
  const [actionError, setActionError] = useState<string | null>(null);
  const { canEdit, canViewCosts } = usePermissions();
+  const isPermissionsLoading = sessionStatus === "loading";
  const utils = trpc.useUtils();

  const detailQuery = trpc.estimate.getById.useQuery(
    { id: estimateId },
    {
-      enabled: canViewCosts,
+      enabled: canViewCosts && !isPermissionsLoading,
      staleTime: 15_000,
    },
  );
@@ -132,10 +135,16 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
  const createRevisionMutation = trpc.estimate.createRevision.useMutation();
  const createExportMutation = trpc.estimate.createExport.useMutation();
  const createPlanningHandoffMutation = trpc.estimate.createPlanningHandoff.useMutation();
+  const estimateCommentTarget = { entityType: "estimate" as const, entityId: estimateId };
+  const canLoadCommentCount =
+    canViewCosts
+    && !isPermissionsLoading
+    && detailQuery.status === "success"
+    && detailQuery.data != null;

  const commentCountQuery = trpc.comment.count.useQuery(
-    { entityType: "estimate", entityId: estimateId },
-    { enabled: canViewCosts, staleTime: 30_000 },
+    estimateCommentTarget,
+    { enabled: canLoadCommentCount, staleTime: 30_000 },
  );
  const commentCount = commentCountQuery.data ?? 0;

@@ -281,7 +290,9 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
        </div>
      </div>

-      {!canViewCosts ? (
+      {isPermissionsLoading ? (
+        <EmptyState>Loading estimate workspace...</EmptyState>
+      ) : !canViewCosts ? (
        <EmptyState>Your role can access the estimate list, but not the detailed financial workspace.</EmptyState>
      ) : detailQuery.isLoading ? (
        <EmptyState>Loading estimate workspace...</EmptyState>
@@ -364,7 +375,7 @@ export function EstimateWorkspaceClient({ estimateId }: { estimateId: string })
                  <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-gray-50">
                    Comments
                  </h2>
-                  <CommentThread entityId={estimate.id} />
+                  <CommentThread commentTarget={estimateCommentTarget} />
                </div>
              )}
            </>
@@ -0,0 +1,87 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildReportWorkbookSheets,
+  buildResourceMonthExplainabilitySheetRows,
+} from "./reportBuilderExplainability.js";
+
+describe("reportBuilderExplainability", () => {
+  it("builds a readable explainability sheet for resource month reports", () => {
+    const rows = buildResourceMonthExplainabilitySheetRows(
+      {
+        entity: "resource_month",
+        periodMonth: "2026-01",
+        locationContextColumns: ["countryCode", "federalState"],
+        holidayMetricColumns: ["monthlyPublicHolidayCount"],
+        absenceMetricColumns: ["monthlyAbsenceHoursDeduction"],
+        capacityMetricColumns: ["monthlyBaseAvailableHours", "monthlySahHours"],
+        chargeabilityMetricColumns: ["monthlyActualChargeabilityPct"],
+        missingRecommendedColumns: ["countryName", "monthlyTargetHours"],
+        notes: ["SAH is holiday-adjusted."],
+      },
+      (column) => ({
+        countryCode: "Country Code",
+        federalState: "Federal State",
+        monthlyPublicHolidayCount: "Holiday Dates",
+        monthlyAbsenceHoursDeduction: "Absence Hours Deduction",
+        monthlyBaseAvailableHours: "Base Available Hours",
+        monthlySahHours: "SAH",
+        monthlyActualChargeabilityPct: "Actual Chargeability (%)",
+        countryName: "Country",
+        monthlyTargetHours: "Target Hours",
+      }[column] ?? column),
+    );
+
+    expect(rows).toEqual([
+      ["Resource Month Explainability"],
+      ["Period Month", "2026-01"],
+      ["Location Context Columns", "Country Code", "Federal State"],
+      ["Holiday Metric Columns", "Holiday Dates"],
+      ["Absence Metric Columns", "Absence Hours Deduction"],
+      ["Capacity Metric Columns", "Base Available Hours", "SAH"],
+      ["Chargeability Metric Columns", "Actual Chargeability (%)"],
+      ["Missing Recommended Columns", "Country", "Target Hours"],
+      [],
+      ["Notes"],
+      ["SAH is holiday-adjusted."],
+    ]);
+  });
+
+  it("adds grouped report rows and an explainability sheet to workbook output", () => {
+    const sheets = buildReportWorkbookSheets({
+      columns: ["displayName", "monthlySahHours"],
+      rows: [
+        { displayName: "Alice", monthlySahHours: 160 },
+        { displayName: "Bob", monthlySahHours: 152 },
+      ],
+      groups: [{ key: "BY", label: "Bayern", rowCount: 2, startIndex: 0 }],
+      groupBy: "federalState",
+      explainability: {
+        entity: "resource_month",
+        periodMonth: "2026-01",
+        locationContextColumns: [],
+        holidayMetricColumns: [],
+        absenceMetricColumns: [],
+        capacityMetricColumns: [],
+        chargeabilityMetricColumns: [],
+        missingRecommendedColumns: [],
+        notes: [],
+      },
+      resolveColumnLabel: (column) => ({
+        displayName: "Name",
+        monthlySahHours: "SAH",
+        federalState: "Federal State",
+      }[column] ?? column),
+    });
+
+    expect(sheets[0]).toEqual({
+      name: "Report",
+      rows: [
+        ["Name", "SAH"],
+        ["Federal State: Bayern (2)", ""],
+        ["Alice", 160],
+        ["Bob", 152],
+      ],
+    });
+    expect(sheets[1]?.name).toBe("Explainability");
+  });
+});
@@ -0,0 +1,91 @@
+type WorkbookCellValue = boolean | Date | number | string | null | undefined;
+
+export type ResourceMonthReportExplainability = {
+  entity: "resource_month";
+  periodMonth: string | null;
+  locationContextColumns: string[];
+  holidayMetricColumns: string[];
+  absenceMetricColumns: string[];
+  capacityMetricColumns: string[];
+  chargeabilityMetricColumns: string[];
+  missingRecommendedColumns: string[];
+  notes: string[];
+};
+
+export type ReportExplainability = ResourceMonthReportExplainability;
+
+export type ReportExportSheet = {
+  name: string;
+  rows: WorkbookCellValue[][];
+};
+
+type BuildReportWorkbookSheetsInput = {
+  columns: string[];
+  rows: Record<string, unknown>[];
+  groups: Array<{ key: string; label: string; rowCount: number; startIndex: number }>;
+  groupBy?: string;
+  explainability?: ReportExplainability;
+  resolveColumnLabel: (column: string) => string;
+};
+
+export function buildResourceMonthExplainabilitySheetRows(
+  explainability: ReportExplainability,
+  resolveColumnLabel: (column: string) => string,
+): WorkbookCellValue[][] {
+  const mapLabels = (columns: string[]) => (
+    columns.length > 0 ? columns.map(resolveColumnLabel) : ["none"]
+  );
+
+  return [
+    ["Resource Month Explainability"],
+    ["Period Month", explainability.periodMonth ?? "current month"],
+    ["Location Context Columns", ...mapLabels(explainability.locationContextColumns)],
+    ["Holiday Metric Columns", ...mapLabels(explainability.holidayMetricColumns)],
+    ["Absence Metric Columns", ...mapLabels(explainability.absenceMetricColumns)],
+    ["Capacity Metric Columns", ...mapLabels(explainability.capacityMetricColumns)],
+    ["Chargeability Metric Columns", ...mapLabels(explainability.chargeabilityMetricColumns)],
+    ["Missing Recommended Columns", ...mapLabels(explainability.missingRecommendedColumns)],
+    [],
+    ["Notes"],
+    ...explainability.notes.map((note) => [note]),
+  ];
+}
+
+export function buildReportWorkbookSheets(
+  input: BuildReportWorkbookSheetsInput,
+): ReportExportSheet[] {
+  const headerRow = input.columns.map(input.resolveColumnLabel);
+  const groupStartByIndex = new Map(
+    input.groups.map((group) => [group.startIndex, group] as const),
+  );
+  const groupByLabel = input.groupBy ? input.resolveColumnLabel(input.groupBy) : null;
+
+  const reportRows: WorkbookCellValue[][] = [headerRow];
+  input.rows.forEach((row, index) => {
+    const group = groupStartByIndex.get(index);
+    if (group && groupByLabel) {
+      reportRows.push([
+        `${groupByLabel}: ${group.label} (${group.rowCount})`,
+        ...Array.from({ length: Math.max(0, input.columns.length - 1) }, () => ""),
+      ]);
+    }
+
+    reportRows.push(input.columns.map((column) => {
+      const value = row[column];
+      if (value === undefined) {
+        return "";
+      }
+      return value as WorkbookCellValue;
+    }));
+  });
+
+  const sheets: ReportExportSheet[] = [{ name: "Report", rows: reportRows }];
+  if (input.explainability?.entity === "resource_month") {
+    sheets.push({
+      name: "Explainability",
+      rows: buildResourceMonthExplainabilitySheetRows(input.explainability, input.resolveColumnLabel),
+    });
+  }
+
+  return sheets;
+}
@@ -26,6 +26,7 @@ const SkillMatrixUpload = dynamic(
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ProgressRing } from "~/components/ui/ProgressRing.js";
 import { FadeIn } from "~/components/ui/FadeIn.js";
+import { CommentThread } from "~/components/comments/CommentThread.js";

 interface ResourceDetailProps {
  resourceId: string;
@@ -91,6 +92,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
  const resource = _resourceQuery.data as unknown as Resource | undefined;
  const loadingResource = _resourceQuery.isLoading;
  const error = _resourceQuery.error;
+  const errorCode = (error as any)?.data?.code as string | undefined;

  // Fetch allocations for this resource (all non-cancelled)
  const now = new Date();
@@ -119,6 +121,14 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
    },
    { enabled: !!resourceId },
  );
+  const vacationList = (vacations ?? []) as Array<{
+    endDate: Date | string;
+    id: string;
+    note?: string | null;
+    startDate: Date | string;
+    status: string;
+    type: string;
+  }>;

  const chargeabilityStatsResult = trpc.resource.getChargeabilityStats.useQuery(
    { includeProposed: includeProposedChargeability, resourceId },
@@ -143,7 +153,7 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
    );
  }

-  if (error || !resource) {
+  if (errorCode === "NOT_FOUND") {
    return (
      <div className="p-6">
        <div className="bg-red-50 border border-red-200 rounded-xl p-6 text-red-700 text-sm">
@@ -154,6 +164,17 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
    );
  }

+  if (error || !resource) {
+    return (
+      <div className="p-6">
+        <div className="bg-amber-50 border border-amber-200 rounded-xl p-6 text-amber-800 text-sm">
+          This resource could not be loaded right now.{" "}
+          <Link href="/resources" className="underline">Back to resources</Link>
+        </div>
+      </div>
+    );
+  }
+
  const skills = resource.skills as unknown as SkillEntry[];
  const resourceRoles = (resource as unknown as {
    resourceRoles?: { isPrimary: boolean; role: { id: string; name: string; color: string | null } }[];
@@ -433,6 +454,24 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
        onGenerated={async () => { await utils.resource.getById.invalidate({ id: resourceId }); }}
      />

+      <section
+        id="comments"
+        className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5 scroll-mt-24"
+      >
+        <div className="mb-4">
+          <h2 className="text-sm font-semibold text-gray-800 dark:text-gray-200">Comments</h2>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            Discussion for this resource follows the same visibility as the resource detail itself.
+          </p>
+        </div>
+        <CommentThread
+          commentTarget={{
+            entityType: "resource",
+            entityId: resourceId,
+          }}
+        />
+      </section>
+
      {/* Main Skills Badges */}
      {mainSkills.length > 0 && (
        <div className="bg-white dark:bg-gray-900 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
@@ -594,11 +633,11 @@ export function ResourceDetail({ resourceId }: ResourceDetailProps) {
        </div>
        {loadingVacations ? (
          <div className="p-6 text-center text-gray-400 text-sm animate-pulse">Loading…</div>
-        ) : (vacations ?? []).length === 0 ? (
+        ) : vacationList.length === 0 ? (
          <div className="text-center py-8 text-gray-400 text-sm">No vacations recorded.</div>
        ) : (
          <div className="divide-y divide-gray-100">
-            {(vacations ?? []).map((v) => {
+            {vacationList.map((v) => {
              const days =
                Math.round(
                  (new Date(v.endDate).getTime() - new Date(v.startDate).getTime()) / (1000 * 60 * 60 * 24),
@@ -13,11 +13,13 @@ import { DateInput } from "~/components/ui/DateInput.js";
 interface AllocationPopoverProps {
  allocationId: string;
  projectId: string;
+  initialAllocation?: AllocationPopoverAssignment | null;
  onClose: () => void;
  onOpenPanel: (projectId: string) => void;
  /** Pixel position relative to the viewport */
  anchorX: number;
  anchorY: number;
+  contextDate?: Date;
 }

 type AllocationPopoverAssignment = Assignment<AllocationLike>;
@@ -25,10 +27,12 @@ type AllocationPopoverAssignment = Assignment<AllocationLike>;
 export function AllocationPopover({
  allocationId,
  projectId,
+  initialAllocation = null,
  onClose,
  onOpenPanel,
  anchorX,
  anchorY,
+  contextDate,
 }: AllocationPopoverProps) {
  const utils = trpc.useUtils();
  const invalidateTimeline = useInvalidateTimeline();
@@ -41,15 +45,22 @@ export function AllocationPopover({

  const { data: allocationView, isLoading } = trpc.allocation.listView.useQuery(
    { projectId },
-    { staleTime: 10_000 },
+    { staleTime: 10_000, enabled: !initialAllocation },
  ) as { data: AllocationReadModel<AllocationLike> | undefined; isLoading: boolean };
-  const allocation = allocationView?.assignments.find((entry) => entry.id === allocationId) as AllocationPopoverAssignment | undefined;
+  const allocation = initialAllocation ?? allocationView?.assignments.find((entry) => (
+    entry.id === allocationId
+    || entry.entityId === allocationId
+    || entry.sourceAllocationId === allocationId
+    || getPlanningEntryMutationId(entry) === allocationId
+  )) as AllocationPopoverAssignment | undefined;

  const [hoursPerDay, setHoursPerDay] = useState<number | null>(null);
  const [startDate, setStartDate] = useState<string>("");
  const [endDate, setEndDate] = useState<string>("");
  const [includeSaturday, setIncludeSaturday] = useState(false);
  const [role, setRole] = useState("");
+  const [carveStartDate, setCarveStartDate] = useState("");
+  const [carveEndDate, setCarveEndDate] = useState("");

  useEffect(() => {
    if (allocation) {
@@ -59,8 +70,11 @@ export function AllocationPopover({
      const meta = allocation.metadata as { includeSaturday?: boolean } | null;
      setIncludeSaturday(meta?.includeSaturday ?? false);
      setRole(allocation.role ?? "");
+      const defaultCarveDate = contextDate ? toDateInput(contextDate) : "";
+      setCarveStartDate(defaultCarveDate);
+      setCarveEndDate(defaultCarveDate);
    }
-  }, [allocation]);
+  }, [allocation, contextDate]);

  const updateMutation = trpc.timeline.updateAllocationInline.useMutation({
    onSuccess: () => {
@@ -70,6 +84,14 @@ export function AllocationPopover({
    },
  });

+  const carveMutation = trpc.timeline.carveAllocationRange.useMutation({
+    onSuccess: () => {
+      invalidateTimeline();
+      void utils.allocation.listView.invalidate();
+      onClose();
+    },
+  });
+
  function toDateInput(d: Date): string {
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, "0");
@@ -89,7 +111,16 @@ export function AllocationPopover({
    });
  }

-  if (isLoading || !allocation) {
+  function handleCarveRange() {
+    if (!allocation || !carveStartDate || !carveEndDate) return;
+    carveMutation.mutate({
+      allocationId: getPlanningEntryMutationId(allocation),
+      startDate: new Date(carveStartDate),
+      endDate: new Date(carveEndDate),
+    });
+  }
+
+  if (isLoading) {
    const loadingPopover = (
      <div ref={ref} style={style} className="bg-white border border-gray-200 rounded-xl shadow-xl p-4 text-sm text-gray-500">
        Loading...
@@ -98,13 +129,38 @@ export function AllocationPopover({
    return typeof document === "undefined" ? loadingPopover : createPortal(loadingPopover, document.body);
  }

+  if (!allocation) {
+    const missingPopover = (
+      <div
+        ref={ref}
+        style={style}
+        className="flex max-w-[300px] flex-col gap-3 rounded-xl border border-gray-200 bg-white p-4 shadow-xl"
+      >
+        <div className="text-sm font-medium text-gray-800">Allocation unavailable</div>
+        <p className="text-xs text-gray-500">
+          The selected booking could not be resolved from the current timeline data.
+        </p>
+        <button
+          onClick={() => { onClose(); onOpenPanel(projectId); }}
+          className="w-full rounded-lg bg-brand-600 px-3 py-2 text-sm font-medium text-white hover:bg-brand-700"
+        >
+          Open Project Panel
+        </button>
+      </div>
+    );
+    return typeof document === "undefined" ? missingPopover : createPortal(missingPopover, document.body);
+  }
+
  const dailyCostEUR = ((hoursPerDay ?? allocation.hoursPerDay) * (allocation.resource?.lcrCents ?? 0) / 100).toFixed(2);

+  const carveDateRangeInvalid =
+    Boolean(carveStartDate && carveEndDate) && carveEndDate < carveStartDate;
+
  const popover = (
    <div
      ref={ref}
      style={style}
-      className="bg-white border border-gray-200 rounded-xl shadow-xl overflow-hidden"
+      className="flex max-h-[calc(100vh-32px)] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl"
    >
      {/* Header */}
      <div className="flex items-center justify-between px-4 py-3 bg-gray-50 border-b border-gray-100">
@@ -114,7 +170,7 @@ export function AllocationPopover({
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 text-lg leading-none">&times;</button>
      </div>

-      <div className="p-4 space-y-3">
+      <div className="space-y-3 overflow-y-auto p-4">
        {/* Resource */}
        <div className="text-xs text-gray-500">
          Resource: <span className="font-medium text-gray-700">{allocation.resource?.displayName}</span>
@@ -182,6 +238,9 @@ export function AllocationPopover({
        {updateMutation.isError && (
          <p className="text-xs text-red-600">{updateMutation.error.message}</p>
        )}
+        {carveMutation.isError && (
+          <p className="text-xs text-red-600">{carveMutation.error.message}</p>
+        )}

        {/* Actions */}
        <div className="flex items-center gap-2 pt-1">
@@ -203,6 +262,57 @@ export function AllocationPopover({
          </button>
        </div>

+        <div className="border-t border-gray-100 pt-3 space-y-2">
+          <div className="flex items-center justify-between gap-2">
+            <div>
+              <div className="text-xs font-medium text-gray-700">Remove Date Range</div>
+              <div className="text-[11px] text-gray-500">
+                {contextDate ? `Prefilled from ${toDateInput(contextDate)}` : "Create a gap or split this booking."}
+              </div>
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-2">
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">From</label>
+              <DateInput
+                value={carveStartDate}
+                onChange={setCarveStartDate}
+                min={startDate}
+                max={endDate}
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-red-300"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-600 mb-1">To</label>
+              <DateInput
+                value={carveEndDate}
+                onChange={setCarveEndDate}
+                min={carveStartDate || startDate}
+                max={endDate}
+                className="w-full border border-gray-200 rounded-lg px-2 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-red-300"
+              />
+            </div>
+          </div>
+
+          {carveDateRangeInvalid && (
+            <p className="text-xs text-red-600">End date must be on or after the start date.</p>
+          )}
+
+          <button
+            onClick={handleCarveRange}
+            disabled={
+              carveMutation.isPending ||
+              !carveStartDate ||
+              !carveEndDate ||
+              carveDateRangeInvalid
+            }
+            className="w-full py-1.5 rounded-lg text-sm font-medium transition-colors bg-red-600 text-white hover:bg-red-700 disabled:opacity-50"
+          >
+            {carveMutation.isPending ? "Removing…" : "Remove Selected Range"}
+          </button>
+        </div>
+
        {/* Link to full panel */}
        <button
          onClick={() => { onClose(); onOpenPanel(projectId); }}
@@ -8,6 +8,8 @@ import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
 import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";

+const ENTITY_COMBOBOX_OVERLAY_SELECTOR = "[data-entity-combobox-overlay='true']";
+
 interface BatchAssignPopoverProps {
  resourceIds: string[];
  startDate: Date;
@@ -49,13 +51,23 @@ export function BatchAssignPopover({

  // Close on outside click
  useEffect(() => {
-    function handleClick(e: MouseEvent) {
-      if (ref.current && !ref.current.contains(e.target as Node)) {
+    function handlePointerDown(event: PointerEvent) {
+      const target = event.target;
+      if (!(target instanceof Node)) {
+        return;
+      }
+      if (ref.current?.contains(target)) {
+        return;
+      }
+      if (target instanceof Element && target.closest(ENTITY_COMBOBOX_OVERLAY_SELECTOR)) {
+        return;
+      }
+      if (ref.current) {
        onClose();
      }
    }
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
  }, [onClose]);

  // Close on ESC
@@ -88,7 +100,7 @@ export function BatchAssignPopover({
  const popover = (
    <div
      ref={ref}
-      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[60] w-[360px] bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl shadow-2xl dark:shadow-black/40 overflow-hidden"
+      className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[9998] w-[360px] 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">
@@ -44,6 +44,7 @@ export function NewAllocationPopover({
    width: 320,
    estimatedHeight: 440,
    onClose,
+    ignoreSelectors: ["[data-entity-combobox-overlay='true']"],
  });
  const invalidateTimeline = useInvalidateTimeline();

@@ -82,7 +83,7 @@ export function NewAllocationPopover({
    <div
      ref={ref}
      style={style}
-      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"
+      className="flex max-h-[calc(100vh-32px)] flex-col overflow-hidden rounded-xl border border-gray-200 bg-white shadow-2xl dark:border-gray-700 dark:bg-gray-800 dark:shadow-black/40"
    >
      {/* 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">
@@ -90,7 +91,7 @@ export function NewAllocationPopover({
        <button onClick={onClose} className="text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 text-lg leading-none">&times;</button>
      </div>

-      <div className="p-4 space-y-3">
+      <div className="space-y-3 overflow-y-auto p-4">
        {/* Date range */}
        <div className="grid grid-cols-2 gap-2">
          <div>
@@ -19,6 +19,7 @@ export type TimelineDisplayMode = "strip" | "bar" | "heatmap";
 import { addDays } from "./utils.js";
 import { DEFAULT_FILTERS, type TimelineFilters } from "./TimelineFilter.js";
 import { DONE_STATUSES } from "./timelineConstants.js";
+import { toLocalDateKey } from "./timelineAvailability.js";

 // ─── Local timeline types ─────────────────────────────────────────────────────
 // These re-declare the shapes that the original TimelineView used internally.
@@ -133,6 +134,13 @@ export type VacationEntry = {
  startDate: Date | string;
  endDate: Date | string;
  note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
  status: string;
  requestedBy?: { name?: string | null; email: string } | null;
  approvedBy?: { name?: string | null; email: string } | null;
@@ -149,6 +157,13 @@ export type HolidayOverlayEntry = {
  startDate: Date | string;
  endDate: Date | string;
  note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
 };

 // ─── Context shape ──────────────────────────────────────────────────────────
@@ -224,7 +239,7 @@ export function TimelineProvider({
    ? ((session.user as { role?: string } | undefined)?.role ?? "USER")
    : null;
  const isSelfServiceTimeline = role === "USER" || role === "VIEWER";
-  const isRoleLoading = sessionStatus !== "authenticated";
+  const isRoleLoading = sessionStatus === "loading";

  const today = useMemo(() => {
    const d = new Date();
@@ -289,7 +304,7 @@ export function TimelineProvider({
  const blinkOverbookedDays = appPrefs.blinkOverbookedDays;

  // ─── Data queries ──────────────────────────────────────────────────────────
-  const mountedRef = useRef(false);
+  const initialRefreshKeyRef = useRef<string | null>(null);
  const timelineQueryInput = {
    startDate: viewStart,
    endDate: viewEnd,
@@ -338,13 +353,31 @@ export function TimelineProvider({
  const assignments = entriesView?.assignments ?? [];
  const demands = entriesView?.demands ?? [];

-  const {
-    data: vacationEntries = [],
-    refetch: refetchVacations,
-  } = trpc.vacation.list.useQuery(
+  // Avoid TS deep-instantiation blow-ups on the large TRPC hook type here.
+  const vacationListQuery = trpc.vacation.list.useQuery as unknown as (
+    input: {
+      startDate: Date;
+      endDate: Date;
+      status: VacationStatus[];
+      limit: number;
+    },
+    options: {
+      placeholderData: (prev: VacationEntry[] | undefined) => VacationEntry[] | undefined;
+      refetchOnWindowFocus: boolean;
+      staleTime: number;
+    },
+  ) => {
+    data: VacationEntry[] | undefined;
+    refetch: () => Promise<unknown>;
+  };
+  const vacationEntriesQuery = vacationListQuery(
    { startDate: viewStart, endDate: viewEnd, status: [VacationStatus.APPROVED, VacationStatus.PENDING], limit: 500 },
    { placeholderData: (prev) => prev, refetchOnWindowFocus: false, staleTime: 90_000 },
  );
+  const {
+    data: vacationEntries = [],
+    refetch: refetchVacations,
+  } = vacationEntriesQuery;

  const staffHolidayOverlayQuery = trpc.timeline.getHolidayOverlays.useQuery(
    timelineQueryInput,
@@ -370,32 +403,63 @@ export function TimelineProvider({
    refetch: refetchHolidayOverlays,
  } = activeHolidayOverlayQuery;

-  useEffect(() => {
-    if (mountedRef.current) return;
-    if (isRoleLoading) return;
-    mountedRef.current = true;
+  const initialRefreshKey = useMemo(
+    () =>
+      JSON.stringify({
+        isSelfServiceTimeline,
+        start: viewStart.toISOString(),
+        end: viewEnd.toISOString(),
+        clients: filters.clientIds,
+        projects: filters.projectIds,
+        chapters: filters.chapters,
+        eids: filters.eids,
+        countries: filters.countryCodes,
+      }),
+    [
+      filters.chapters,
+      filters.clientIds,
+      filters.countryCodes,
+      filters.eids,
+      filters.projectIds,
+      isSelfServiceTimeline,
+      viewEnd,
+      viewStart,
+    ],
+  );

-    // Harden client-side route transitions: the timeline must actively refresh
-    // its core read models once on mount instead of relying on a prefetched shell.
+  useEffect(() => {
+    if (isRoleLoading) return;
+    if (initialRefreshKeyRef.current === initialRefreshKey) return;
+    initialRefreshKeyRef.current = initialRefreshKey;
+
+    // Harden client-side route and filter transitions: refresh the core
+    // read models once per active timeline query context instead of trusting
+    // prefetched or placeholder state to self-heal.
    void refetchEntriesView();
    void refetchVacations();
    void refetchHolidayOverlays();
-  }, [isRoleLoading, refetchEntriesView, refetchHolidayOverlays, refetchVacations]);
+  }, [
+    initialRefreshKey,
+    isRoleLoading,
+    refetchEntriesView,
+    refetchHolidayOverlays,
+    refetchVacations,
+  ]);

  const vacationsByResource = useMemo(() => {
    const map = new Map<string, VacationEntry[]>();
    const mergedEntries = [...(vacationEntries as VacationEntry[])];
    const existingKeys = new Set(
      mergedEntries.map((vacation) => {
-        const start = new Date(vacation.startDate).toISOString().slice(0, 10);
-        const end = new Date(vacation.endDate).toISOString().slice(0, 10);
+        const start = toLocalDateKey(vacation.startDate);
+        const end = toLocalDateKey(vacation.endDate);
        return `${vacation.resourceId}:${vacation.type}:${start}:${end}`;
      }),
    );

    for (const holiday of holidayOverlayEntries as HolidayOverlayEntry[]) {
-      const start = new Date(holiday.startDate).toISOString().slice(0, 10);
-      const end = new Date(holiday.endDate).toISOString().slice(0, 10);
+      const start = toLocalDateKey(holiday.startDate);
+      const end = toLocalDateKey(holiday.endDate);
      const key = `${holiday.resourceId}:${holiday.type}:${start}:${end}`;
      if (existingKeys.has(key)) {
        continue;
@@ -9,10 +9,21 @@ import {
  type TimelineAssignmentEntry,
  type TimelineDemandEntry,
 } from "./TimelineContext.js";
+import {
+  applyPointerOffsetPreviewRect,
+  applyVisualOverrides,
+  getDragPointerOffset,
+  type TimelineVisualOverrides,
+} from "./allocationVisualState.js";
 import { heatmapColor } from "./heatmapUtils.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { formatDateLong } from "~/lib/format.js";
-import { TimelineTooltip } from "./TimelineTooltip.js";
+import {
+  TimelineTooltip,
+  type DemandHoverData,
+  type HeatmapHoverData,
+  type VacationHoverData,
+} from "./TimelineTooltip.js";
 import {
  ROW_HEIGHT,
  SUB_LANE_HEIGHT,
@@ -24,11 +35,31 @@ import { getProjectColor } from "~/lib/project-colors.js";
 import type { DragState, AllocDragState, RangeState, MultiSelectState } from "~/hooks/useTimelineDrag.js";
 import type { AllocMouseDownInfo, RowMouseDownInfo } from "./TimelineResourcePanel.js";
 import {
+  buildVacationBlocksByResource,
  renderVacationBlocks,
  renderRangeOverlay,
  renderOverbookingBlink,
  type VacationBlockInfo,
 } from "./renderHelpers.js";
+import {
+  buildDemandHoverData,
+  cancelHoverFrame,
+  collectResourcesWithVacations,
+  scheduleVacationHoverUpdate,
+  updateTooltipPosition,
+} from "./timelineHover.js";
+import { buildResourceHeatmapSeries } from "./timelineHeatmap.js";
+import { buildResourceCapacitySeries } from "./timelineCapacity.js";
+import {
+  buildProjectRowMetrics,
+  type ProjectDayMetric,
+} from "./timelineProjectMetrics.js";
+import {
+  buildProjectFlatRows,
+  estimateProjectRowHeight,
+  type OpenDemandRowLayout,
+  type ProjectFlatRow,
+} from "./timelineProjectRows.js";

 // ─── Props ──────────────────────────────────────────────────────────────────

@@ -46,11 +77,13 @@ interface TimelineProjectPanelProps {
  onOpenPanel: (projectId: string) => void;
  onOpenDemandClick: (demand: TimelineDemandEntry, anchorX: number, anchorY: number) => void;
  onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
    anchorX: number,
    anchorY: number,
  ) => void;
  multiSelectState: MultiSelectState;
+  optimisticAllocations: TimelineVisualOverrides;
+  suppressHoverInteractions: boolean;
  // Layout from useTimelineLayout
  CELL_WIDTH: number;
  dates: Date[];
@@ -82,57 +115,7 @@ export interface OpenDemandAssignment {
  project?: { id: string; name: string; shortCode: string };
 }

-type HeatmapBreakdownEntry = {
-  projectId: string;
-  shortCode: string;
-  projectName: string;
-  orderType: string;
-  hoursPerDay: number;
-  responsiblePerson?: string | null;
-};
-
-type HeatmapHoverState = {
-  date: Date;
-  totalH: number;
-  pct: number;
-  breakdown: HeatmapBreakdownEntry[];
-};
-
-type ProjectDayMetric = {
-  projH: number;
-  totalH: number;
-};
-
-type HeatmapBreakdownAccumulator = {
-  shortCode: string;
-  projectName: string;
-  orderType: string;
-  responsiblePerson: string | null;
-  hours: number;
-};
-
-type ProjectFlatRow =
-  | {
-      type: "header";
-      key: string;
-      project: NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
-    }
-  | {
-      type: "open-demand";
-      key: string;
-      projectId: string;
-      openDemands: TimelineDemandEntry[];
-    }
-  | {
-      type: "resource";
-      key: string;
-      project: NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
-      resource: NonNullable<
-        ReturnType<typeof useTimelineContext>["projectGroups"]
-      >[number]["resourceRows"][number]["resource"];
-      allocs: TimelineAssignmentEntry[];
-      metricsKey: string;
-    };
+type HeatmapHoverState = HeatmapHoverData;

 const EMPTY_DAY_METRICS: ProjectDayMetric[] = [];
 const SVG_XMLNS = "http://www.w3.org/2000/svg";
@@ -154,6 +137,8 @@ function TimelineProjectPanelInner({
  onOpenDemandClick,
  onAllocationContextMenu,
  multiSelectState,
+  optimisticAllocations,
+  suppressHoverInteractions,
  CELL_WIDTH,
  dates,
  totalCanvasWidth,
@@ -175,6 +160,27 @@ function TimelineProjectPanelInner({
    today,
  } = useTimelineContext();

+  const visualAllocsByResource = useMemo(() => {
+    if (optimisticAllocations.size === 0) return allocsByResource;
+
+    const next = new Map<string, TimelineAssignmentEntry[]>();
+    for (const [resourceId, allocs] of allocsByResource) {
+      next.set(resourceId, applyVisualOverrides(allocs, optimisticAllocations));
+    }
+    return next;
+  }, [allocsByResource, optimisticAllocations]);
+
+  const visualProjectGroups = useMemo(
+    () => projectGroups.map((project) => ({
+      ...project,
+      resourceRows: project.resourceRows.map((row) => ({
+        ...row,
+        allocs: applyVisualOverrides(row.allocs, optimisticAllocations),
+      })),
+    })),
+    [projectGroups, optimisticAllocations],
+  );
+
  // ─── Heatmap hover (same mechanism as resource panel) ─────────────────────
  const heatmapRafRef = useRef<number | null>(null);
  const lastHeatmapDayRef = useRef<number>(-1);
@@ -193,239 +199,65 @@ function TimelineProjectPanelInner({
  const vacationTooltipPosRef = useRef({ left: 0, top: 0 });
  const demandTooltipPosRef = useRef({ left: 0, top: 0 });

-  const [heatmapHover, setHeatmapHover] = useState<{
-    date: Date;
-    totalH: number;
-    pct: number;
-    breakdown: HeatmapBreakdownEntry[];
-  } | 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);
-  const [demandHover, setDemandHover] = useState<null | {
-    roleName: string;
-    roleColor: string;
-    projectName: string;
-    projectShortCode?: string | null;
-    requestedHeadcount: number;
-    unfilledHeadcount: number;
-    startDate: Date | string;
-    endDate: Date | string;
-    hoursPerDay: number;
-    totalHours: number;
-    percentage?: number;
-    status?: string;
-    totalCostCents?: number;
-    dailyCostCents?: number;
-  }>(null);
+  const [heatmapHover, setHeatmapHover] = useState<HeatmapHoverState | null>(null);
+  const [vacationHover, setVacationHover] = useState<VacationHoverData | null>(null);
+  const [demandHover, setDemandHover] = useState<DemandHoverData | null>(null);

-  const { resourceHeatmapById, resourceTotalHoursById } = useMemo(() => {
-    const dateIndexByTime = new Map<number, number>();
-    dates.forEach((date, index) => {
-      const normalized = new Date(date);
-      normalized.setHours(0, 0, 0, 0);
-      dateIndexByTime.set(normalized.getTime(), index);
-    });
+  const resourceCapacityById = useMemo(
+    () => buildResourceCapacitySeries(visualAllocsByResource, vacationsByResource, dates),
+    [dates, vacationsByResource, visualAllocsByResource],
+  );

-    const nextHeatmapById = new Map<string, (HeatmapHoverState | null)[]>();
-    const nextTotalHoursById = new Map<string, number[]>();
+  const { resourceHeatmapById, resourceTotalHoursById } = useMemo(
+    () => buildResourceHeatmapSeries(visualAllocsByResource, dates, resourceCapacityById),
+    [dates, resourceCapacityById, visualAllocsByResource],
+  );

-    for (const [resourceId, allocs] of allocsByResource) {
-      if (allocs.length === 0) continue;
-
-      const totalHours = new Array<number>(dates.length).fill(0);
-      const breakdownMaps = Array.from({ length: dates.length }, () => new Map<string, HeatmapBreakdownAccumulator>());
-
-      for (const alloc of allocs) {
-        const current = new Date(alloc.startDate);
-        current.setHours(0, 0, 0, 0);
-        const end = new Date(alloc.endDate);
-        end.setHours(0, 0, 0, 0);
-
-        while (current.getTime() <= end.getTime()) {
-          const dayIndex = dateIndexByTime.get(current.getTime());
-          if (dayIndex !== undefined) {
-            totalHours[dayIndex] = (totalHours[dayIndex] ?? 0) + alloc.hoursPerDay;
-
-            const dayBreakdown = breakdownMaps[dayIndex];
-            if (!dayBreakdown) {
-              current.setDate(current.getDate() + 1);
-              continue;
-            }
-
-            const existing = dayBreakdown.get(alloc.projectId);
-            if (existing) {
-              existing.hours += alloc.hoursPerDay;
-            } else {
-              dayBreakdown.set(alloc.projectId, {
-                shortCode: alloc.project.shortCode,
-                projectName: alloc.project.name,
-                orderType: alloc.project.orderType,
-                responsiblePerson:
-                  (alloc.project as { responsiblePerson?: string | null }).responsiblePerson ??
-                  null,
-                hours: alloc.hoursPerDay,
-              });
-            }
-          }
-          current.setDate(current.getDate() + 1);
-        }
-      }
-
-      nextTotalHoursById.set(resourceId, totalHours);
-      nextHeatmapById.set(
-        resourceId,
-        totalHours.map((totalH, dayIndex) => {
-          if (totalH === 0) return null;
-
-          const dayBreakdown = breakdownMaps[dayIndex];
-          if (!dayBreakdown) return null;
-
-          const breakdown: HeatmapBreakdownEntry[] = [...dayBreakdown.entries()]
-            .map(([projectId, value]) => ({
-              projectId,
-              shortCode: value.shortCode,
-              projectName: value.projectName,
-              orderType: value.orderType,
-              responsiblePerson: value.responsiblePerson,
-              hoursPerDay: value.hours,
-            }))
-            .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
-
-          return {
-            date: dates[dayIndex] ?? new Date(),
-            totalH,
-            pct: (totalH / 8) * 100,
-            breakdown,
-          };
-        }),
-      );
-    }
-
-    return {
-      resourceHeatmapById: nextHeatmapById,
-      resourceTotalHoursById: nextTotalHoursById,
-    };
-  }, [allocsByResource, dates]);
+  const vacationBlocksByResource = useMemo(
+    () =>
+      buildVacationBlocksByResource(
+        vacationsByResource,
+        filters.showVacations,
+        toLeft,
+        toWidth,
+        CELL_WIDTH,
+        totalCanvasWidth,
+      ),
+    [CELL_WIDTH, filters.showVacations, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
+  );

  const projectRowMetrics = useMemo(() => {
-    const dateIndexByTime = new Map<number, number>();
-    dates.forEach((date, index) => {
-      const normalized = new Date(date);
-      normalized.setHours(0, 0, 0, 0);
-      dateIndexByTime.set(normalized.getTime(), index);
-    });
+    return buildProjectRowMetrics(
+      dates,
+      visualProjectGroups,
+      resourceTotalHoursById,
+      resourceCapacityById,
+    );
+  }, [dates, resourceCapacityById, resourceTotalHoursById, visualProjectGroups]);

-    const nextMetrics = new Map<string, ProjectDayMetric[]>();
-
-    for (const project of projectGroups) {
-      for (const { resource, allocs } of project.resourceRows) {
-        const projectHours = new Array<number>(dates.length).fill(0);
-
-        for (const alloc of allocs) {
-          const current = new Date(alloc.startDate);
-          current.setHours(0, 0, 0, 0);
-          const end = new Date(alloc.endDate);
-          end.setHours(0, 0, 0, 0);
-
-        while (current.getTime() <= end.getTime()) {
-          const dayIndex = dateIndexByTime.get(current.getTime());
-          if (dayIndex !== undefined) {
-            projectHours[dayIndex] = (projectHours[dayIndex] ?? 0) + alloc.hoursPerDay;
-          }
-          current.setDate(current.getDate() + 1);
-        }
-        }
-
-        const totalHours = resourceTotalHoursById.get(resource.id);
-        nextMetrics.set(
-          `${project.id}:${resource.id}`,
-          projectHours.map((projH, dayIndex) => ({
-            projH,
-            totalH: totalHours?.[dayIndex] ?? 0,
-          })),
-        );
-      }
-    }
-
-    return nextMetrics;
-  }, [dates, projectGroups, resourceTotalHoursById]);
-
-  const flatRows = useMemo(() => {
-    const rows: ProjectFlatRow[] = [];
-
-    for (const project of projectGroups) {
-      rows.push({ type: "header", key: `header-${project.id}`, project });
-
-      const openDemands = openDemandsByProject.get(project.id) ?? [];
-      if (openDemands.length > 0) {
-        rows.push({
-          type: "open-demand",
-          key: `open-demand-${project.id}`,
-          projectId: project.id,
-          openDemands,
-        });
-      }
-
-      for (const { resource, allocs } of project.resourceRows) {
-        rows.push({
-          type: "resource",
-          key: `${project.id}-${resource.id}`,
-          project,
-          resource,
-          allocs,
-          metricsKey: `${project.id}:${resource.id}`,
-        });
-      }
-    }
-
-    return rows;
-  }, [openDemandsByProject, projectGroups]);
+  const flatRows = useMemo(
+    () => buildProjectFlatRows(visualProjectGroups, openDemandsByProject, optimisticAllocations),
+    [openDemandsByProject, optimisticAllocations, visualProjectGroups],
+  );

  const rowVirtualizer = useVirtualizer({
    count: flatRows.length,
    getScrollElement: () => scrollContainerRef.current,
-    estimateSize: (index) => {
-      const row = flatRows[index];
-      if (!row) return ROW_HEIGHT;
-      if (row.type === "header") return PROJECT_HEADER_HEIGHT;
-      if (row.type === "open-demand") {
-        const laneCount = assignDemandLanes(row.openDemands).size > 0
-          ? Math.max(...assignDemandLanes(row.openDemands).values()) + 1
-          : 1;
-        return Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
-      }
-      return ROW_HEIGHT;
-    },
+    estimateSize: (index) => estimateProjectRowHeight(flatRows[index]),
    overscan: 8,
    getItemKey: (index) => flatRows[index]?.key ?? index,
  });
  const virtualItems = rowVirtualizer.getVirtualItems();
  const totalRowHeight = rowVirtualizer.getTotalSize();

-  const resourcesWithVacations = useMemo(() => {
-    const result = new Set<string>();
-    for (const [resourceId, vacations] of vacationsByResource) {
-      if (vacations.length > 0) {
-        result.add(resourceId);
-      }
-    }
-    return result;
-  }, [vacationsByResource]);
+  const resourcesWithVacations = useMemo(
+    () => collectResourcesWithVacations(vacationsByResource),
+    [vacationsByResource],
+  );

  const handleRowHeatmapMove = useCallback(
    (e: React.MouseEvent, resourceId: string) => {
-      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`;
-      }
+      updateTooltipPosition(heatmapTooltipPosRef, heatmapTooltipRef, e.clientX, e.clientY, 16, -52);

      const rect = e.currentTarget.getBoundingClientRect();
      const dayIndex = Math.floor((e.clientX - rect.left) / CELL_WIDTH);
@@ -477,52 +309,28 @@ function TimelineProjectPanelInner({
        return;
      }

-      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);
-        date.setHours(0, 0, 0, 0);
-        const time = date.getTime();
-        const resourceVacations = vacationsByResource.get(resourceId) ?? [];
-        const hit =
-          resourceVacations.find((vacation) => {
-            const start = new Date(vacation.startDate);
-            start.setHours(0, 0, 0, 0);
-            const end = new Date(vacation.endDate);
-            end.setHours(0, 0, 0, 0);
-            return time >= start.getTime() && time <= end.getTime();
-          }) ?? null;
-
-        const nextKey = hit ? `${resourceId}:${hit.id}` : null;
-        if (nextKey === hoveredVacationKeyRef.current) return;
-
-        hoveredVacationKeyRef.current = nextKey;
-        startTransition(() => {
-          setVacationHover(hit);
-        });
+      updateTooltipPosition(vacationTooltipPosRef, vacationTooltipRef, e.clientX, e.clientY, 14, -8);
+      scheduleVacationHoverUpdate({
+        frameRef: vacationHoverRafRef,
+        hoveredKeyRef: hoveredVacationKeyRef,
+        resourceId,
+        clientX: e.clientX,
+        rect: e.currentTarget.getBoundingClientRect(),
+        xToDate,
+        vacations: vacationsByResource.get(resourceId) ?? [],
+        onHoverChange: (hit) => {
+          startTransition(() => {
+            setVacationHover(hit);
+          });
+        },
      });
    },
    [resourcesWithVacations, 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;
-    }
+    cancelHoverFrame(heatmapRafRef);
+    cancelHoverFrame(vacationHoverRafRef);

    const shouldClearHeatmap = lastHeatmapDayRef.current !== -1;
    const shouldClearVacation = hoveredVacationKeyRef.current !== null;
@@ -543,37 +351,10 @@ function TimelineProjectPanelInner({

  const handleDemandHoverMove = useCallback(
    (e: React.MouseEvent, demand: TimelineDemandEntry) => {
-      demandTooltipPosRef.current = { left: e.clientX + 16, top: e.clientY - 36 };
-      if (demandTooltipRef.current) {
-        demandTooltipRef.current.style.left = `${demandTooltipPosRef.current.left}px`;
-        demandTooltipRef.current.style.top = `${demandTooltipPosRef.current.top}px`;
-      }
-
-      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);
+      updateTooltipPosition(demandTooltipPosRef, demandTooltipRef, e.clientX, e.clientY, 16, -36);

      startTransition(() => {
-        setDemandHover({
-          roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
-          roleColor: demand.roleEntity?.color ?? "#f59e0b",
-          projectName: demand.project.name,
-          projectShortCode: demand.project.shortCode,
-          requestedHeadcount: demand.requestedHeadcount,
-          unfilledHeadcount: demand.unfilledHeadcount,
-          startDate: demand.startDate,
-          endDate: demand.endDate,
-          hoursPerDay: demand.hoursPerDay,
-          totalHours: demand.hoursPerDay * days,
-          percentage: demand.percentage,
-          status: demand.status,
-          ...(demand.dailyCostCents > 0
-            ? {
-                totalCostCents: demand.dailyCostCents * days,
-                dailyCostCents: demand.dailyCostCents,
-              }
-            : {}),
-        });
+        setDemandHover(buildDemandHoverData(demand));
      });
    },
    [],
@@ -581,13 +362,18 @@ function TimelineProjectPanelInner({

  useEffect(
    () => () => {
-      if (heatmapRafRef.current !== null) cancelAnimationFrame(heatmapRafRef.current);
-      if (vacationHoverRafRef.current !== null) cancelAnimationFrame(vacationHoverRafRef.current);
+      cancelHoverFrame(heatmapRafRef);
+      cancelHoverFrame(vacationHoverRafRef);
    },
    [],
  );

-  if (projectGroups.length === 0) {
+  useEffect(() => {
+    if (!suppressHoverInteractions) return;
+    clearHoverTooltips();
+  }, [clearHoverTooltips, suppressHoverInteractions]);
+
+  if (visualProjectGroups.length === 0) {
    return (
      <div className="text-center py-16 text-gray-400">
        No projects in this time range{activeFilterCount > 0 && " (filtered)"}.
@@ -677,11 +463,14 @@ function TimelineProjectPanelInner({
                      {gridLines}
                      {projWidth > 0 && projLeft < totalCanvasWidth && (
                        <div
+                          data-timeline-entry-type="project-bar"
+                          data-timeline-drag-preview="project-shift"
+                          data-timeline-project-id={project.id}
                          className={clsx(
-                            "absolute rounded flex items-center px-2 gap-1.5 transition-all duration-75 text-white",
+                            "absolute rounded flex items-center px-2 gap-1.5 text-white",
                            isThisProjectShifting
                              ? "opacity-90 shadow-lg ring-2 ring-white ring-offset-1 cursor-grabbing z-20 scale-[1.01]"
-                              : "cursor-grab hover:opacity-90 hover:ring-2 hover:ring-white hover:ring-offset-1",
+                              : "cursor-grab transition-[opacity,box-shadow] duration-75 hover:opacity-90 hover:ring-2 hover:ring-white hover:ring-offset-1",
                          )}
                          style={{
                            left: projLeft + 2,
@@ -689,18 +478,35 @@ function TimelineProjectPanelInner({
                            top: 8,
                            height: 24,
                            backgroundColor: customColor ?? projectColor.hex + "CC",
+                            ...(isThisProjectShifting
+                              ? {
+                                  transform: `translateX(${getDragPointerOffset(
+                                    dragState.pointerDeltaX,
+                                    dragState.daysDelta,
+                                    CELL_WIDTH,
+                                  )}px)`,
+                                }
+                              : {}),
                          }}
                          onClick={() => {
                            if (!dragState.isDragging) onOpenPanel(project.id);
                          }}
-                          onMouseDown={(e) =>
+                          onMouseDown={(e) => {
+                            if (e.button === 2) {
+                              e.preventDefault();
+                              e.stopPropagation();
+                              if (!dragState.isDragging) {
+                                onOpenPanel(project.id);
+                              }
+                              return;
+                            }
                            onProjectBarMouseDown(e, {
                              projectId: project.id,
                              projectName: project.name,
                              startDate: project.startDate,
                              endDate: project.endDate,
-                            })
-                          }
+                            });
+                          }}
                          onTouchStart={(e) =>
                            onProjectBarTouchStart(e, {
                              projectId: project.id,
@@ -709,7 +515,13 @@ function TimelineProjectPanelInner({
                              endDate: project.endDate,
                            })
                          }
-                          onContextMenu={(e) => e.preventDefault()}
+                          onContextMenu={(e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            if (!dragState.isDragging) {
+                              onOpenPanel(project.id);
+                            }
+                          }}
                        >
                          <span className="text-xs font-semibold truncate">{project.name}</span>
                        </div>
@@ -720,7 +532,8 @@ function TimelineProjectPanelInner({
              })()
            ) : row.type === "open-demand" ? (
              renderOpenDemandRow(
-                row.openDemands,
+                row.openDemandCount,
+                row.layout,
                row.projectId,
                CELL_WIDTH,
                totalCanvasWidth,
@@ -735,6 +548,7 @@ function TimelineProjectPanelInner({
                clearHoverTooltips,
                multiSelectState,
                allocDragState,
+                suppressHoverInteractions,
              )
            ) : (
              <div
@@ -788,6 +602,7 @@ function TimelineProjectPanelInner({
                    });
                  }}
                  onMouseMove={(e) => {
+                    if (suppressHoverInteractions) return;
                    handleRowHeatmapMove(e, row.resource.id);
                    handleRowVacationHover(e, row.resource.id);
                  }}
@@ -812,29 +627,20 @@ function TimelineProjectPanelInner({
                    onAllocTouchStart,
                    onAllocationContextMenu,
                    multiSelectState,
+                    suppressHoverInteractions,
                  )}
                  {filters.showVacations &&
                    renderVacationBlocks(
-                      (vacationsByResource.get(row.resource.id) ?? []).reduce<VacationBlockInfo[]>(
-                        (acc, v) => {
-                          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) {
-                            acc.push({ vacation: v, left, width });
-                          }
-                          return acc;
-                        },
-                        [],
-                      ),
+                      vacationBlocksByResource.get(row.resource.id) ?? [],
                      ROW_HEIGHT,
                    )}
                  {blinkOverbookedDays &&
                    renderOverbookingBlink(
-                      allocsByResource.get(row.resource.id) ?? [],
+                      visualAllocsByResource.get(row.resource.id) ?? [],
                      dates,
                      CELL_WIDTH,
+                      resourceCapacityById.get(row.resource.id)?.capacityHoursByDay,
+                      resourceCapacityById.get(row.resource.id)?.bookingFactorsByDay,
                    )}
                  {renderRangeOverlay(
                    rangeState,
@@ -870,41 +676,9 @@ function TimelineProjectPanelInner({

 // ─── Pure render functions ──────────────────────────────────────────────────

-/** Assign lane indices to demands so overlapping bars don't stack on top of each other. */
-function assignDemandLanes(
-  demands: TimelineDemandEntry[],
-): Map<string, number> {
-  const laneMap = new Map<string, number>();
-  // Each lane tracks the latest end-date occupying it
-  const laneEnds: Date[] = [];
-
-  // Sort by start date for greedy lane assignment
-  const sorted = [...demands].sort(
-    (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
-  );
-
-  for (const d of sorted) {
-    const start = new Date(d.startDate);
-    let assigned = -1;
-    for (let i = 0; i < laneEnds.length; i++) {
-      if (laneEnds[i]! < start) {
-        assigned = i;
-        laneEnds[i] = new Date(d.endDate);
-        break;
-      }
-    }
-    if (assigned === -1) {
-      assigned = laneEnds.length;
-      laneEnds.push(new Date(d.endDate));
-    }
-    laneMap.set(d.id, assigned);
-  }
-
-  return laneMap;
-}
-
 function renderOpenDemandRow(
-  openDemands: TimelineDemandEntry[],
+  openDemandCount: number,
+  layout: OpenDemandRowLayout,
  projectId: string,
  CELL_WIDTH: number,
  totalCanvasWidth: number,
@@ -915,7 +689,7 @@ function renderOpenDemandRow(
  onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
  onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
  onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
    anchorX: number,
    anchorY: number,
  ) => void,
@@ -923,12 +697,10 @@ function renderOpenDemandRow(
  onClearHoverTooltips: () => void,
  multiSelectState: MultiSelectState,
  allocDragState: AllocDragState,
+  suppressHoverInteractions: boolean,
 ) {
-  if (openDemands.length === 0) return null;
-
-  const laneMap = assignDemandLanes(openDemands);
-  const laneCount = laneMap.size > 0 ? Math.max(...laneMap.values()) + 1 : 1;
-  const rowHeight = Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16);
+  const { visibleOpenDemands, laneMap, rowHeight } = layout;
+  if (visibleOpenDemands.length === 0) return null;

  return (
    <div
@@ -949,7 +721,7 @@ function renderOpenDemandRow(
          <div className="min-w-0">
            <div className="text-xs font-medium text-amber-700 dark:text-amber-400 truncate">Open demand</div>
            <div className="text-[10px] text-amber-500 dark:text-amber-600 truncate">
-              {openDemands.length} open demand{openDemands.length > 1 ? "s" : ""}
+              {openDemandCount} open demand{openDemandCount > 1 ? "s" : ""}
            </div>
          </div>
        </div>
@@ -963,7 +735,7 @@ function renderOpenDemandRow(
        {rowGridLines}
        <div className="pointer-events-none absolute inset-x-0 inset-y-0 border-y border-dashed border-amber-200/70 dark:border-amber-800/80" />
        <div className="pointer-events-none absolute inset-x-0 inset-y-1 rounded-md bg-amber-100/25 dark:bg-amber-950/35" />
-        {openDemands.map((alloc) => {
+        {visibleOpenDemands.map((alloc) => {
          const allocStart = new Date(alloc.startDate);
          const allocEnd = new Date(alloc.endDate);

@@ -984,7 +756,26 @@ function renderOpenDemandRow(

          let left = toLeft(dispStart);
          let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
-          // Clamp negative left (bar starts before view) to avoid extending outside canvas
+          let dragTransform: string | undefined;
+
+          if (isAllocDragged) {
+            const preview = applyPointerOffsetPreviewRect({
+              left,
+              width,
+              mode: allocDragState.mode,
+              pointerOffsetX: getDragPointerOffset(
+                allocDragState.pointerDeltaX,
+                allocDragState.daysDelta,
+                CELL_WIDTH,
+              ),
+              minWidth: CELL_WIDTH,
+            });
+            left = preview.left;
+            width = preview.width;
+            dragTransform = preview.transform;
+          }
+
+          // Clamp negative left (bar starts before view) to avoid extending outside canvas.
          if (left < 0) {
            width += left;
            left = 0;
@@ -1025,6 +816,10 @@ function renderOpenDemandRow(
          return (
            <div
              key={alloc.id}
+              data-allocation-id={alloc.id}
+              data-timeline-entry-type="demand"
+              data-timeline-drag-preview="project-shift allocation"
+              data-timeline-project-id={alloc.projectId}
              className={clsx(
                "absolute rounded-md flex items-stretch overflow-hidden z-[10] group/demand",
                isAllocDragged
@@ -1039,8 +834,14 @@ function renderOpenDemandRow(
                height: blockHeight,
                backgroundColor: `${roleColor}4D`,
                border: `2px dashed ${roleColor}B3`,
-                ...(multiDragPx && multiDragMode === "move"
-                  ? { transform: `translateX(${multiDragPx}px)` }
+                ...((multiDragPx && multiDragMode === "move") || dragTransform
+                  ? {
+                      transform: [dragTransform, multiDragPx && multiDragMode === "move"
+                        ? `translateX(${multiDragPx}px)`
+                        : null]
+                        .filter(Boolean)
+                        .join(" "),
+                    }
                  : {}),
              }}
              onMouseDown={(e) => {
@@ -1049,15 +850,20 @@ function renderOpenDemandRow(
              onContextMenu={(e) => {
                e.preventDefault();
                e.stopPropagation();
+                if (suppressHoverInteractions) return;
                onAllocationContextMenu(
                  { allocationId: alloc.id, projectId: alloc.projectId },
                  e.clientX,
                  e.clientY,
                );
              }}
-              onMouseMove={(e) => onDemandHoverMove(e, alloc)}
+              onMouseMove={(e) => {
+                if (suppressHoverInteractions) return;
+                onDemandHoverMove(e, alloc);
+              }}
              onClick={(e) => {
                e.stopPropagation();
+                if (suppressHoverInteractions) return;
                onOpenDemandClick(alloc, e.clientX, e.clientY);
              }}
              onKeyDown={(e) => {
@@ -1066,6 +872,7 @@ function renderOpenDemandRow(
                }
                e.preventDefault();
                e.stopPropagation();
+                if (suppressHoverInteractions) return;
                const rect = e.currentTarget.getBoundingClientRect();
                onOpenDemandClick(alloc, rect.left + rect.width / 2, rect.top + rect.height / 2);
              }}
@@ -1136,25 +943,24 @@ function renderProjectUtilOverlay(

  const BAND_H = 7;
  const BAR_H = ROW_HEIGHT - BAND_H - 11;
-  const REF_H = 8;
  const useHeatmapColors = displayMode === "bar";
  const svgParts: string[] = [
    `<svg xmlns="${SVG_XMLNS}" width="${totalCanvasWidth}" height="${ROW_HEIGHT}" viewBox="0 0 ${totalCanvasWidth} ${ROW_HEIGHT}" preserveAspectRatio="none" shape-rendering="crispEdges">`,
  ];

-  dayMetrics.forEach(({ projH, totalH }, i) => {
-    if (totalH === 0 && projH === 0) return;
+  dayMetrics.forEach(({ projH, totalH, capacityH }, i) => {
+    if ((totalH === 0 && projH === 0) || capacityH <= 0) return;

-    const isOver = totalH > REF_H;
+    const isOver = totalH > capacityH;
    const totalBarH = Math.max(
      projH > 0 ? 2 : 0,
-      Math.round((Math.min(totalH, REF_H) / REF_H) * BAR_H),
+      Math.round((Math.min(totalH, capacityH) / capacityH) * BAR_H),
    );
    const projBarH =
-      projH > 0 ? Math.min(totalBarH, Math.max(2, Math.round((projH / REF_H) * BAR_H))) : 0;
+      projH > 0 ? Math.min(totalBarH, Math.max(2, Math.round((projH / capacityH) * BAR_H))) : 0;
    const otherBarH = totalBarH - projBarH;
-    const projPct = (projH / REF_H) * 100;
-    const totalPct = (totalH / REF_H) * 100;
+    const projPct = (projH / capacityH) * 100;
+    const totalPct = (totalH / capacityH) * 100;
    const projColor = useHeatmapColors
      ? heatmapColor(
          projPct,
@@ -1229,11 +1035,12 @@ function renderProjectDragHandles(
  onAllocMouseDown: (e: React.MouseEvent, info: AllocMouseDownInfo) => void,
  onAllocTouchStart: (e: React.TouchEvent, info: AllocMouseDownInfo) => void,
  onAllocationContextMenu: (
-    info: { allocationId: string; projectId: string },
+    info: { allocationId: string; projectId: string; contextDate?: Date },
    anchorX: number,
    anchorY: number,
  ) => void,
  multiSelectState: MultiSelectState,
+  suppressHoverInteractions: boolean,
 ) {
  return allocs.map((alloc) => {
    const allocStart = new Date(alloc.startDate);
@@ -1249,6 +1056,24 @@ function renderProjectDragHandles(

    let left = toLeft(dispStart);
    let width = Math.max(CELL_WIDTH, toWidth(dispStart, dispEnd));
+    let dragTransform: string | undefined;
+
+    if (isAllocDragged) {
+      const preview = applyPointerOffsetPreviewRect({
+        left,
+        width,
+        mode: allocDragState.mode,
+        pointerOffsetX: getDragPointerOffset(
+          allocDragState.pointerDeltaX,
+          allocDragState.daysDelta,
+          CELL_WIDTH,
+        ),
+        minWidth: CELL_WIDTH,
+      });
+      left = preview.left;
+      width = preview.width;
+      dragTransform = preview.transform;
+    }
    if (width <= 0 || left >= totalCanvasWidth) return null;

    // Multi-drag visual offset
@@ -1283,6 +1108,10 @@ function renderProjectDragHandles(
    return (
      <div
        key={`dh-${alloc.id}`}
+        data-allocation-id={alloc.id}
+        data-timeline-entry-type="allocation"
+        data-timeline-drag-preview="project-shift allocation"
+        data-timeline-project-id={alloc.projectId}
        className={clsx(
          "absolute flex items-stretch rounded",
          hasRecurrence && "border-2 border-dashed border-brand-400/60",
@@ -1296,9 +1125,18 @@ function renderProjectDragHandles(
          width: width - 4,
          top: 2,
          bottom: 2,
-          ...(multiDragPx && multiDragMode === "move"
-              ? { transform: `translateX(${multiDragPx}px)` }
-              : {}),
+          ...((multiDragPx && multiDragMode === "move") || dragTransform
+            ? {
+                transform: [
+                  dragTransform,
+                  multiDragPx && multiDragMode === "move"
+                    ? `translateX(${multiDragPx}px)`
+                    : null,
+                ]
+                  .filter(Boolean)
+                  .join(" "),
+              }
+            : {}),
        }}
        onMouseDown={(e) => {
          if (e.button === 2) e.stopPropagation();
@@ -1306,6 +1144,7 @@ function renderProjectDragHandles(
        onContextMenu={(e) => {
          e.preventDefault();
          e.stopPropagation();
+          if (suppressHoverInteractions) return;
          onAllocationContextMenu(
            { allocationId: alloc.id, projectId: alloc.projectId },
            e.clientX,
@@ -1316,7 +1155,10 @@ function renderProjectDragHandles(
        <div
          className="flex-shrink-0 cursor-ew-resize"
          style={{ width: HANDLE_W }}
-          onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" })}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, { ...allocInfo, mode: "resize-start" });
+          }}
          onTouchStart={(e) => {
            e.stopPropagation();
            onAllocTouchStart(e, { ...allocInfo, mode: "resize-start" });
@@ -1327,7 +1169,10 @@ function renderProjectDragHandles(
            "flex-1 min-w-0 flex items-center",
            isAllocDragged ? "cursor-grabbing" : "cursor-grab",
          )}
-          onMouseDown={(e) => onAllocMouseDown(e, allocInfo)}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, allocInfo);
+          }}
          onTouchStart={(e) => {
            e.stopPropagation();
            onAllocTouchStart(e, allocInfo);
@@ -1342,7 +1187,10 @@ function renderProjectDragHandles(
        <div
          className="flex-shrink-0 cursor-ew-resize"
          style={{ width: HANDLE_W }}
-          onMouseDown={(e) => onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" })}
+          onMouseDown={(e) => {
+            e.stopPropagation();
+            onAllocMouseDown(e, { ...allocInfo, mode: "resize-end" });
+          }}
          onTouchStart={(e) => {
            e.stopPropagation();
            onAllocTouchStart(e, { ...allocInfo, mode: "resize-end" });
@@ -1,5 +1,6 @@
 "use client";

+import { GERMAN_FEDERAL_STATES } from "@capakraken/shared";
 import { createPortal } from "react-dom";
 import { formatCents, formatDateLong } from "~/lib/format.js";

@@ -33,11 +34,73 @@ export type VacationHoverData = {
  startDate: Date | string;
  endDate: Date | string;
  note?: string | null;
+  scope?: string | null;
+  calendarName?: string | null;
+  sourceType?: string | null;
+  countryCode?: string | null;
+  countryName?: string | null;
+  federalState?: string | null;
+  metroCityName?: string | null;
  requestedBy?: { name?: string | null; email: string } | null;
  approvedBy?: { name?: string | null; email: string } | null;
  approvedAt?: Date | string | null;
 };

+function formatHolidayScope(scope?: string | null): string | null {
+  switch (scope) {
+    case "COUNTRY":
+      return "Country";
+    case "STATE":
+      return "State";
+    case "CITY":
+      return "City";
+    default:
+      return scope ? scope.replaceAll("_", " ") : null;
+  }
+}
+
+function formatHolidaySourceType(sourceType?: string | null): string | null {
+  switch (sourceType) {
+    case "SYSTEM":
+      return "Built-in";
+    case "CALENDAR":
+      return "Calendar";
+    default:
+      return sourceType ? sourceType.replaceAll("_", " ") : null;
+  }
+}
+
+function formatHolidayStateName(
+  federalState?: string | null,
+  countryCode?: string | null,
+): string | null {
+  if (!federalState) {
+    return null;
+  }
+
+  if (countryCode === "DE") {
+    return GERMAN_FEDERAL_STATES[federalState] ?? federalState;
+  }
+
+  return federalState;
+}
+
+function buildHolidayLocationBasis(vacation: VacationHoverData): string | null {
+  const parts = [
+    vacation.countryName
+      ? `Country: ${vacation.countryName}`
+      : vacation.countryCode
+        ? `Country: ${vacation.countryCode}`
+        : null,
+    formatHolidayStateName(vacation.federalState, vacation.countryCode)
+      ? `State: ${formatHolidayStateName(vacation.federalState, vacation.countryCode)}`
+      : null,
+    vacation.metroCityName ? `City: ${vacation.metroCityName}` : null,
+  ].filter(Boolean);
+
+  return parts.length > 0 ? parts.join(" · ") : null;
+}
+
 export type DemandHoverData = {
  roleName: string;
  roleColor: string;
@@ -67,6 +130,142 @@ interface TimelineTooltipProps {
  demandHover?: DemandHoverData | null;
 }

+function renderTooltipPortal(content: React.ReactNode) {
+  return typeof document === "undefined" ? content : createPortal(content, document.body);
+}
+
+function TooltipSurface({
+  children,
+  position,
+  tooltipRef,
+  className,
+  dataTestId,
+  backgroundColor,
+}: {
+  children: React.ReactNode;
+  position: { left: number; top: number };
+  tooltipRef?: React.Ref<HTMLDivElement>;
+  className: string;
+  dataTestId?: string;
+  backgroundColor: string;
+}) {
+  return (
+    <div
+      ref={tooltipRef}
+      data-testid={dataTestId}
+      style={{
+        left: position.left,
+        top: position.top,
+        backgroundColor,
+      }}
+      className={className}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TooltipMetric({
+  label,
+  value,
+  valueClassName = "font-medium text-gray-100",
+}: {
+  label: string;
+  value: React.ReactNode;
+  valueClassName?: string;
+}) {
+  return (
+    <div>
+      <div className="text-gray-500">{label}</div>
+      <div className={valueClassName}>{value}</div>
+    </div>
+  );
+}
+
+function HeatmapBreakdownList({ breakdown }: { breakdown: HeatmapHoverData["breakdown"] }) {
+  if (breakdown.length === 0) {
+    return <div className="text-[11px] text-gray-400">No bookings on this day.</div>;
+  }
+
+  return (
+    <>
+      {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.role,
+                entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
+                entry.orderType,
+              ].filter(Boolean).join(" · ")}
+            </div>
+            {entry.startDate && entry.endDate ? (
+              <div className="text-[10px] text-gray-500">
+                {entry.startDate} → {entry.endDate}
+                {entry.status && entry.status !== "CONFIRMED" ? (
+                  <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
+                ) : null}
+              </div>
+            ) : null}
+          </div>
+          <span className="whitespace-nowrap text-[11px] font-semibold text-gray-200">
+            {entry.hoursPerDay}h
+          </span>
+        </div>
+      ))}
+    </>
+  );
+}
+
+function VacationSummary({
+  vacation,
+  title,
+  className,
+}: {
+  vacation: VacationHoverData;
+  title: string;
+  className?: string;
+}) {
+  const isPublicHoliday = vacation.type === "PUBLIC_HOLIDAY";
+  const scopeLabel = formatHolidayScope(vacation.scope);
+  const sourceLabel = formatHolidaySourceType(vacation.sourceType);
+  const holidayMeta = [scopeLabel, sourceLabel].filter(Boolean).join(" · ");
+  const holidayLocationBasis = isPublicHoliday ? buildHolidayLocationBasis(vacation) : null;
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-1.5">
+        <span className="inline-block h-2 w-2 flex-shrink-0 rounded-full bg-amber-500" />
+        <span className="font-semibold text-amber-300">{title}</span>
+      </div>
+      <div className="mt-0.5 text-[11px] text-amber-200/80">
+        {formatDateLong(vacation.startDate)} to {formatDateLong(vacation.endDate)}
+      </div>
+      {holidayMeta ? (
+        <div className="mt-1 text-[11px] text-amber-100/75">{holidayMeta}</div>
+      ) : null}
+      {holidayLocationBasis ? (
+        <div className="mt-1 text-[11px] text-amber-100/85">{holidayLocationBasis}</div>
+      ) : null}
+      {isPublicHoliday && vacation.calendarName ? (
+        <div className="mt-1 text-[11px] text-amber-200/60">
+          Calendar: {vacation.calendarName}
+        </div>
+      ) : null}
+      {vacation.note && !isPublicHoliday ? (
+        <div className="mt-1 text-[11px] text-amber-200/60">{vacation.note}</div>
+      ) : null}
+    </div>
+  );
+}
+
 export function TimelineTooltip({
  heatmapTooltipRef,
  heatmapTooltipPos,
@@ -79,18 +278,14 @@ export function TimelineTooltip({
  demandHover,
 }: TimelineTooltipProps) {
  const vacationTitle = vacationHover ? getVacationTitle(vacationHover) : null;
-  const renderTooltip = (content: React.ReactNode) =>
-    typeof document === "undefined" ? content : createPortal(content, document.body);

  if (demandHover && demandTooltipRef && demandTooltipPos) {
-    return renderTooltip(
-      <div
-        ref={demandTooltipRef}
-        style={{
-          left: demandTooltipPos.left,
-          top: demandTooltipPos.top,
-          backgroundColor: "rgba(3, 7, 18, 0.96)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={demandTooltipRef}
+        dataTestId="timeline-demand-tooltip"
+        position={demandTooltipPos}
+        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-start justify-between gap-3">
@@ -115,73 +310,58 @@ export function TimelineTooltip({
        </div>

        <div className="mt-2 grid grid-cols-2 gap-x-4 gap-y-1.5 text-[11px]">
-          <div>
-            <div className="text-gray-500">Requested</div>
-            <div className="font-medium text-gray-100">
-              {demandHover.requestedHeadcount} {demandHover.requestedHeadcount === 1 ? "seat" : "seats"}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Open</div>
-            <div className="font-medium text-amber-300">
-              {demandHover.unfilledHeadcount} {demandHover.unfilledHeadcount === 1 ? "seat" : "seats"}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Range</div>
-            <div className="font-medium text-gray-100">
-              {formatDateLong(demandHover.startDate)} to {formatDateLong(demandHover.endDate)}
-            </div>
-          </div>
-          <div>
-            <div className="text-gray-500">Load</div>
-            <div className="font-medium text-gray-100">
-              {demandHover.hoursPerDay}h/day · {demandHover.totalHours}h
-            </div>
-          </div>
+          <TooltipMetric
+            label="Requested"
+            value={`${demandHover.requestedHeadcount} ${demandHover.requestedHeadcount === 1 ? "seat" : "seats"}`}
+          />
+          <TooltipMetric
+            label="Open"
+            value={`${demandHover.unfilledHeadcount} ${demandHover.unfilledHeadcount === 1 ? "seat" : "seats"}`}
+            valueClassName="font-medium text-amber-300"
+          />
+          <TooltipMetric
+            label="Range"
+            value={`${formatDateLong(demandHover.startDate)} to ${formatDateLong(demandHover.endDate)}`}
+          />
+          <TooltipMetric
+            label="Load"
+            value={`${demandHover.hoursPerDay}h/day · ${demandHover.totalHours}h`}
+          />
          {typeof demandHover.percentage === "number" && demandHover.percentage > 0 ? (
-            <div>
-              <div className="text-gray-500">Allocation</div>
-              <div className="font-medium text-gray-100">{demandHover.percentage}%</div>
-            </div>
+            <TooltipMetric label="Allocation" value={`${demandHover.percentage}%`} />
          ) : null}
          {typeof demandHover.totalCostCents === "number" && demandHover.totalCostCents > 0 ? (
-            <div>
-              <div className="text-gray-500">Cost</div>
-              <div className="font-medium text-gray-100">
-                {formatCents(demandHover.totalCostCents)} EUR
-                {typeof demandHover.dailyCostCents === "number" && demandHover.dailyCostCents > 0
+            <TooltipMetric
+              label="Cost"
+              value={`${formatCents(demandHover.totalCostCents)} EUR${
+                typeof demandHover.dailyCostCents === "number" && demandHover.dailyCostCents > 0
                  ? ` · ${formatCents(demandHover.dailyCostCents)}/d`
-                  : ""}
-              </div>
-            </div>
+                  : ""
+              }`}
+            />
          ) : null}
        </div>

        <div className="mt-2 border-t border-gray-800/90 pt-2 text-[10px] uppercase tracking-[0.14em] text-gray-500">
          Click for details and actions
        </div>
-      </div>,
+      </TooltipSurface>,
    );
  }

  // When both are active, render a single merged tooltip using the heatmap position
  if (heatmapHover && vacationHover) {
-    return renderTooltip(
-      <div
-        ref={(el) => {
-          // Wire both refs to the same element so position updates work from either handler
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={(el) => {
          (heatmapTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-          (vacationTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = el;
-        }}
-        style={{
-          left: heatmapTooltipPos.left,
-          top: heatmapTooltipPos.top,
-          backgroundColor: "rgba(3, 7, 18, 0.96)",
+          // Keep the merged tooltip attached to the heatmap pointer path only.
+          (vacationTooltipRef as React.MutableRefObject<HTMLDivElement | null>).current = null;
        }}
+        position={heatmapTooltipPos}
+        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"
      >
-        {/* Date + hours header */}
        <div className="flex items-center justify-between gap-3">
          <span className="font-semibold">{formatDateLong(heatmapHover.date)}</span>
          <span className="text-[11px] text-gray-300">
@@ -189,72 +369,26 @@ export function TimelineTooltip({
          </span>
        </div>

-        {/* Project breakdown */}
        <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.role,
-                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
-                      entry.orderType,
-                    ].filter(Boolean).join(" · ")}
-                  </div>
-                  {entry.startDate && entry.endDate && (
-                    <div className="text-[10px] text-gray-500">
-                      {entry.startDate} → {entry.endDate}
-                      {entry.status && entry.status !== "CONFIRMED" && (
-                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
-                      )}
-                    </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>
-          )}
+          <HeatmapBreakdownList breakdown={heatmapHover.breakdown} />
        </div>

-        {/* Vacation section — merged below */}
-        <div className="mt-2 pt-2 border-t border-amber-700/40">
-          <div className="flex items-center gap-1.5">
-            <span className="inline-block w-2 h-2 rounded-full bg-amber-500 flex-shrink-0" />
-            <span className="font-semibold text-amber-300">{vacationTitle}</span>
-          </div>
-          <div className="mt-0.5 text-[11px] text-amber-200/80">
-            {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-          </div>
-          {vacationHover.note && vacationHover.type !== "PUBLIC_HOLIDAY" ? (
-            <div className="mt-1 text-[11px] text-amber-200/60">{vacationHover.note}</div>
-          ) : null}
-        </div>
-      </div>,
+        <VacationSummary
+          vacation={vacationHover}
+          title={vacationTitle ?? "Vacation"}
+          className="mt-2 border-t border-amber-700/40 pt-2"
+        />
+      </TooltipSurface>,
    );
  }

  // Heatmap only
  if (heatmapHover) {
-    return renderTooltip(
-      <div
-        ref={heatmapTooltipRef}
-        style={{
-          left: heatmapTooltipPos.left,
-          top: heatmapTooltipPos.top,
-          backgroundColor: "rgba(3, 7, 18, 0.96)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={heatmapTooltipRef}
+        position={heatmapTooltipPos}
+        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">
@@ -264,66 +398,23 @@ export function TimelineTooltip({
          </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.role,
-                      entry.responsiblePerson ? `Lead: ${entry.responsiblePerson}` : null,
-                      entry.orderType,
-                    ].filter(Boolean).join(" · ")}
-                  </div>
-                  {entry.startDate && entry.endDate && (
-                    <div className="text-[10px] text-gray-500">
-                      {entry.startDate} → {entry.endDate}
-                      {entry.status && entry.status !== "CONFIRMED" && (
-                        <span className="ml-1 uppercase text-amber-400">{entry.status}</span>
-                      )}
-                    </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>
-          )}
+          <HeatmapBreakdownList breakdown={heatmapHover.breakdown} />
        </div>
-      </div>,
+      </TooltipSurface>,
    );
  }

  // Vacation only
  if (vacationHover) {
-    return renderTooltip(
-      <div
-        ref={vacationTooltipRef}
-        style={{
-          left: vacationTooltipPos.left,
-          top: vacationTooltipPos.top,
-          backgroundColor: "rgba(120, 53, 15, 0.95)",
-        }}
+    return renderTooltipPortal(
+      <TooltipSurface
+        tooltipRef={vacationTooltipRef}
+        position={vacationTooltipPos}
+        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">{vacationTitle}</div>
-        <div className="mt-1 text-[11px] text-amber-100/90">
-          {formatDateLong(vacationHover.startDate)} to {formatDateLong(vacationHover.endDate)}
-        </div>
-        {vacationHover.note && vacationHover.type !== "PUBLIC_HOLIDAY" ? (
-          <div className="mt-2 text-[11px] text-amber-100/80">{vacationHover.note}</div>
-        ) : null}
-      </div>,
+        <VacationSummary vacation={vacationHover} title={vacationTitle ?? "Vacation"} />
+      </TooltipSurface>,
    );
  }

@@ -9,6 +9,7 @@ import { useTimelineDrag } from "~/hooks/useTimelineDrag.js";
 import { useTimelineLayout } from "~/hooks/useTimelineLayout.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "~/hooks/useInvalidatePlanningViews.js";
+import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { FillOpenDemandModal } from "~/components/allocations/FillOpenDemandModal.js";
 import { AllocationPopover } from "./AllocationPopover.js";
 import { DemandPopover } from "./DemandPopover.js";
@@ -33,6 +34,7 @@ import { TimelineResourcePanel } from "./TimelineResourcePanel.js";
 import { TimelineProjectPanel, type OpenDemandAssignment } from "./TimelineProjectPanel.js";
 import { ProjectColorLegend } from "./ProjectColorLegend.js";
 import { useMultiSelectIntersection } from "~/hooks/useMultiSelectIntersection.js";
+import type { TimelineVisualOverrides } from "./allocationVisualState.js";

 // ─── Entry point ────────────────────────────────────────────────────────────
 // Two-layer mount: the outer shell creates drag state + project context,
@@ -56,8 +58,10 @@ export function TimelineView() {
  const [popover, setPopover] = useState<{
    allocationId: string;
    projectId: string;
+    allocation?: TimelineAssignmentEntry | null;
    x: number;
    y: number;
+    contextDate?: Date;
  } | null>(null);
  const [newAllocPopover, setNewAllocPopover] = useState<{
    resourceId: string;
@@ -88,6 +92,8 @@ export function TimelineView() {
    rangeState,
    multiSelectState,
    setMultiSelectState,
+    optimisticAllocations,
+    reconcileOptimisticAllocations,
    shiftPreview,
    isPreviewLoading,
    isApplying,
@@ -106,7 +112,7 @@ export function TimelineView() {
    onCanvasTouchMove,
    onCanvasTouchEnd,
  } = useTimelineDrag({
-    cellWidth: cellWidthRef.current,
+    cellWidthRef,
    onBlockClick: (info) => {
      setPopover({
        allocationId: info.allocationId,
@@ -170,6 +176,8 @@ export function TimelineView() {
        rangeState={rangeState}
        multiSelectState={multiSelectState}
        setMultiSelectState={setMultiSelectState}
+        optimisticAllocations={optimisticAllocations}
+        reconcileOptimisticAllocations={reconcileOptimisticAllocations}
        onCanvasRightMouseDown={onCanvasRightMouseDown}
        clearMultiSelect={clearMultiSelect}
        shiftPreview={shiftPreview}
@@ -214,6 +222,8 @@ function TimelineViewContent({
  rangeState,
  multiSelectState,
  setMultiSelectState,
+  optimisticAllocations,
+  reconcileOptimisticAllocations,
  onCanvasRightMouseDown,
  clearMultiSelect,
  shiftPreview,
@@ -251,6 +261,8 @@ function TimelineViewContent({
  rangeState: ReturnType<typeof useTimelineDrag>["rangeState"];
  multiSelectState: ReturnType<typeof useTimelineDrag>["multiSelectState"];
  setMultiSelectState: ReturnType<typeof useTimelineDrag>["setMultiSelectState"];
+  optimisticAllocations: TimelineVisualOverrides;
+  reconcileOptimisticAllocations: ReturnType<typeof useTimelineDrag>["reconcileOptimisticAllocations"];
  onCanvasRightMouseDown: ReturnType<typeof useTimelineDrag>["onCanvasRightMouseDown"];
  clearMultiSelect: ReturnType<typeof useTimelineDrag>["clearMultiSelect"];
  shiftPreview: ReturnType<typeof useTimelineDrag>["shiftPreview"];
@@ -269,7 +281,14 @@ function TimelineViewContent({
  onCanvasTouchMove: ReturnType<typeof useTimelineDrag>["onCanvasTouchMove"];
  onCanvasTouchEnd: ReturnType<typeof useTimelineDrag>["onCanvasTouchEnd"];
  contextResourceIds: string[];
-  popover: { allocationId: string; projectId: string; x: number; y: number } | null;
+  popover: {
+    allocationId: string;
+    projectId: string;
+    allocation?: TimelineAssignmentEntry | null;
+    x: number;
+    y: number;
+    contextDate?: Date;
+  } | null;
  setPopover: React.Dispatch<React.SetStateAction<typeof popover>>;
  newAllocPopover: {
    resourceId: string;
@@ -300,6 +319,8 @@ function TimelineViewContent({
    viewStart,
    viewEnd,
    viewDays,
+    visibleAssignments,
+    visibleDemands,
    setViewStart,
    setViewDays,
    filters,
@@ -348,6 +369,23 @@ function TimelineViewContent({
  const hasActivePointerOverlay =
    dragState.isDragging || allocDragState.isActive || rangeState.isSelecting || multiSelectState.isMultiDragging;

+  useEffect(() => {
+    if (optimisticAllocations.size === 0) return;
+    reconcileOptimisticAllocations([...visibleAssignments, ...visibleDemands]);
+  }, [
+    optimisticAllocations,
+    reconcileOptimisticAllocations,
+    visibleAssignments,
+    visibleDemands,
+  ]);
+
+  useEffect(() => {
+    if (!hasActivePointerOverlay) return;
+    setPopover(null);
+    setDemandPopover(null);
+    setResourceHover(null);
+  }, [hasActivePointerOverlay]);
+
  // ─── Keep selection overlay visible while popover is open ───────────────────
  const effectiveRangeState: typeof rangeState = rangeState.isSelecting
    ? rangeState
@@ -386,10 +424,12 @@ function TimelineViewContent({
    info: {
      allocationId: string;
      projectId: string;
+      contextDate?: Date;
    },
    anchorX: number,
    anchorY: number,
  ) {
+    if (hasActivePointerOverlay) return;
    // Check if this is a demand (not an assignment) — route to DemandPopover
    const demands = openDemandsByProject.get(info.projectId);
    const demand = demands?.find((d) => d.id === info.allocationId);
@@ -397,11 +437,19 @@ function TimelineViewContent({
      setDemandPopover({ demand, x: anchorX, y: anchorY });
      return;
    }
+    const allocation = visibleAssignments.find((entry) => (
+      entry.id === info.allocationId
+      || entry.entityId === info.allocationId
+      || entry.sourceAllocationId === info.allocationId
+      || getPlanningEntryMutationId(entry) === info.allocationId
+    )) ?? null;
    setPopover({
      allocationId: info.allocationId,
      projectId: info.projectId,
+      allocation,
      x: anchorX,
      y: anchorY,
+      ...(info.contextDate ? { contextDate: info.contextDate } : {}),
    });
  }

@@ -505,12 +553,22 @@ function TimelineViewContent({

  // ─── Resource hover card — event delegation on label columns ──────────────
  useEffect(() => {
+    if (hasActivePointerOverlay) {
+      if (resourceHoverTimerRef.current) {
+        clearTimeout(resourceHoverTimerRef.current);
+        resourceHoverTimerRef.current = null;
+      }
+      setResourceHover(null);
+      return;
+    }
+
    const canvas = canvasRef.current;
    if (!canvas) return;

    const HOVER_DELAY = 400;

    function onMouseOver(e: MouseEvent) {
+      if (hasActivePointerOverlay) return;
      const target = (e.target as HTMLElement).closest<HTMLElement>("[data-resource-hover-id]");
      if (!target) return;
      const rid = target.dataset.resourceHoverId;
@@ -532,6 +590,7 @@ function TimelineViewContent({
    }

    function onMouseOut(e: MouseEvent) {
+      if (hasActivePointerOverlay) return;
      const related = e.relatedTarget as HTMLElement | null;
      // Don't close if moving into another resource-hover target or the hover card itself
      if (related?.closest?.("[data-resource-hover-id]") || related?.closest?.("[data-resource-hover-card]")) return;
@@ -557,7 +616,7 @@ function TimelineViewContent({
        resourceHoverTimerRef.current = null;
      }
    };
-  }, [resourceHover?.resourceId, isInitialLoading]); // eslint-disable-line react-hooks/exhaustive-deps
+  }, [resourceHover?.resourceId, isInitialLoading, hasActivePointerOverlay]); // eslint-disable-line react-hooks/exhaustive-deps

  // ─── Lazy-extend date range on scroll ─────────────────────────────────────
  function handleContainerScroll() {
@@ -682,6 +741,8 @@ function TimelineViewContent({
                  onRowTouchStart={isSelfServiceTimeline ? () => undefined : onRowTouchStart}
                  onAllocationContextMenu={isSelfServiceTimeline ? () => undefined : openAllocationPopoverAt}
                  multiSelectState={multiSelectState}
+                  optimisticAllocations={optimisticAllocations}
+                  suppressHoverInteractions={hasActivePointerOverlay}
                  CELL_WIDTH={CELL_WIDTH}
                  dates={dates}
                  totalCanvasWidth={totalCanvasWidth}
@@ -707,9 +768,12 @@ function TimelineViewContent({
                  onRowTouchStart={isSelfServiceTimeline ? () => undefined : onRowTouchStart}
                  onOpenPanel={isSelfServiceTimeline ? () => undefined : setOpenPanelProjectId}
                  onOpenDemandClick={isSelfServiceTimeline ? () => undefined : (demand, anchorX, anchorY) => {
+                    if (hasActivePointerOverlay) return;
                    setDemandPopover({ demand, x: anchorX, y: anchorY });
                  }}
                  onAllocationContextMenu={isSelfServiceTimeline ? () => undefined : openAllocationPopoverAt}
+                  optimisticAllocations={optimisticAllocations}
+                  suppressHoverInteractions={hasActivePointerOverlay}
                  CELL_WIDTH={CELL_WIDTH}
                  dates={dates}
                  totalCanvasWidth={totalCanvasWidth}
@@ -827,7 +891,7 @@ function TimelineViewContent({
      )}

      {/* Allocation / Demand popover (click path) */}
-      {!isSelfServiceTimeline && popover && (() => {
+      {!isSelfServiceTimeline && !hasActivePointerOverlay && popover && (() => {
        // Check if clicked allocation is actually a demand
        const clickedDemand = openDemandsByProject.get(popover.projectId)?.find((d) => d.id === popover.allocationId);
        if (clickedDemand) {
@@ -863,6 +927,7 @@ function TimelineViewContent({
          <AllocationPopover
            allocationId={popover.allocationId}
            projectId={popover.projectId}
+            initialAllocation={popover.allocation ?? null}
            onClose={() => setPopover(null)}
            onOpenPanel={(pid) => {
              setPopover(null);
@@ -870,12 +935,13 @@ function TimelineViewContent({
            }}
            anchorX={popover.x}
            anchorY={popover.y}
+            {...(popover.contextDate ? { contextDate: popover.contextDate } : {})}
          />
        );
      })()}

      {/* Demand popover */}
-      {!isSelfServiceTimeline && demandPopover && (
+      {!isSelfServiceTimeline && !hasActivePointerOverlay && demandPopover && (
        <DemandPopover
          demand={demandPopover.demand}
          onClose={() => setDemandPopover(null)}
@@ -962,7 +1028,7 @@ function TimelineViewContent({
      )}

      {/* Resource hover card */}
-      {resourceHover && (
+      {!hasActivePointerOverlay && resourceHover && (
        <ResourceHoverCard
          resourceId={resourceHover.resourceId}
          anchorEl={resourceHover.anchorEl}
@@ -0,0 +1,89 @@
+"use client";
+
+export type TimelineVisualEntry = {
+  id: string;
+  startDate: Date | string;
+  endDate: Date | string;
+};
+
+export type TimelineVisualOverride = {
+  startDate: Date;
+  endDate: Date;
+};
+
+export type TimelineVisualOverrides = ReadonlyMap<string, TimelineVisualOverride>;
+
+export function getDragPointerOffset(
+  pointerDeltaX: number,
+  daysDelta: number,
+  cellWidth: number,
+): number {
+  return pointerDeltaX - daysDelta * cellWidth;
+}
+
+export function applyPointerOffsetPreviewRect({
+  left,
+  width,
+  mode,
+  pointerOffsetX,
+  minWidth,
+}: {
+  left: number;
+  width: number;
+  mode: "move" | "resize-start" | "resize-end";
+  pointerOffsetX: number;
+  minWidth: number;
+}): { left: number; width: number; transform?: string } {
+  if (pointerOffsetX === 0) {
+    return { left, width };
+  }
+
+  if (mode === "move") {
+    return { left, width, transform: `translateX(${pointerOffsetX}px)` };
+  }
+
+  if (mode === "resize-start") {
+    const nextWidth = width - pointerOffsetX;
+    if (nextWidth < minWidth) {
+      return {
+        left: left + (width - minWidth),
+        width: minWidth,
+      };
+    }
+    return {
+      left: left + pointerOffsetX,
+      width: nextWidth,
+    };
+  }
+
+  return {
+    left,
+    width: Math.max(minWidth, width + pointerOffsetX),
+  };
+}
+
+export function applyVisualOverrides<T extends TimelineVisualEntry>(
+  entries: readonly T[],
+  overrides: TimelineVisualOverrides,
+): T[] {
+  if (overrides.size === 0) {
+    return entries as T[];
+  }
+
+  let changed = false;
+  const nextEntries = entries.map((entry) => {
+    const override = overrides.get(entry.id);
+    if (!override) {
+      return entry;
+    }
+
+    changed = true;
+    return {
+      ...entry,
+      startDate: new Date(override.startDate),
+      endDate: new Date(override.endDate),
+    };
+  });
+
+  return changed ? nextEntries : (entries as T[]);
+}
@@ -21,6 +21,34 @@ export interface VacationBlockInfo {
  width: number;
 }

+export function buildVacationBlocksByResource(
+  vacationsByResource: Map<string, VacationEntry[]>,
+  showVacations: boolean,
+  toLeft: (date: Date) => number,
+  toWidth: (start: Date, end: Date) => number,
+  cellWidth: number,
+  totalCanvasWidth: number,
+) {
+  if (!showVacations) return new Map<string, VacationBlockInfo[]>();
+
+  const result = new Map<string, VacationBlockInfo[]>();
+  for (const [resourceId, vacations] of vacationsByResource) {
+    const blocks: VacationBlockInfo[] = [];
+    for (const vacation of vacations) {
+      const start = new Date(vacation.startDate);
+      const end = new Date(vacation.endDate);
+      const left = toLeft(start);
+      const width = Math.max(cellWidth, toWidth(start, end));
+      if (width <= 0 || left >= totalCanvasWidth) continue;
+      blocks.push({ vacation, left, width });
+    }
+    if (blocks.length > 0) {
+      result.set(resourceId, blocks);
+    }
+  }
+  return result;
+}
+
 // ─── Vacation block overlays ─────────────────────────────────────────────────

 export function renderVacationBlocks(blocks: VacationBlockInfo[], rowHeight: number) {
@@ -92,8 +120,9 @@ export function renderOverbookingBlink(
  allocs: TimelineAssignmentEntry[],
  dates: Date[],
  CELL_WIDTH: number,
+  capacityHoursByDay?: number[],
+  bookingFactorsByDay?: number[],
 ) {
-  const REF_H = 8;
  const overbooked: number[] = [];

  for (let i = 0; i < dates.length; i++) {
@@ -106,9 +135,11 @@ export function renderOverbookingBlink(
      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;
+      if (t >= s.getTime() && t <= e.getTime()) {
+        totalH += a.hoursPerDay * (bookingFactorsByDay?.[i] ?? 1);
+      }
    }
-    if (totalH > REF_H) overbooked.push(i);
+    if (totalH > (capacityHoursByDay?.[i] ?? 8)) overbooked.push(i);
  }

  if (overbooked.length === 0) return null;
@@ -0,0 +1,77 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildAllocationWorkingDaySegments,
+  isAllocationScheduledOnDate,
+  toLocalDateKey,
+} from "./timelineAvailability.js";
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+
+function createAllocation(overrides?: Partial<TimelineAssignmentEntry>): TimelineAssignmentEntry {
+  return {
+    id: "alloc-1",
+    resourceId: "resource-1",
+    projectId: "project-1",
+    startDate: new Date(2026, 2, 30),
+    endDate: new Date(2026, 3, 6),
+    hoursPerDay: 8,
+    metadata: null,
+    project: {
+      id: "project-1",
+      name: "Gelddruckmaschine",
+      shortCode: "GDM",
+      status: "ACTIVE",
+      startDate: new Date(2026, 2, 30),
+      endDate: new Date(2026, 3, 6),
+      orderType: "CHARGEABLE",
+    },
+    resource: {
+      id: "resource-1",
+      displayName: "Peter Parker",
+      eid: "E-001",
+      chapter: "Delivery",
+      lcrCents: 10000,
+      availability: {
+        sunday: 0,
+        monday: 8,
+        tuesday: 8,
+        wednesday: 8,
+        thursday: 8,
+        friday: 8,
+        saturday: 6,
+      },
+    },
+    ...overrides,
+  } as TimelineAssignmentEntry;
+}
+
+describe("timelineAvailability", () => {
+  it("does not treat Saturday as scheduled unless includeSaturday is enabled", () => {
+    const allocation = createAllocation();
+
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 4))).toBe(false);
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 6))).toBe(true);
+  });
+
+  it("supports Saturday working allocations when includeSaturday is enabled", () => {
+    const allocation = createAllocation({
+      metadata: { includeSaturday: true },
+    });
+
+    expect(isAllocationScheduledOnDate(allocation, new Date(2026, 3, 4))).toBe(true);
+  });
+
+  it("splits working spans at non-working weekend days", () => {
+    const allocation = createAllocation();
+    const segments = buildAllocationWorkingDaySegments(allocation);
+
+    expect(segments).toEqual([
+      { start: new Date(2026, 2, 30), end: new Date(2026, 3, 3) },
+      { start: new Date(2026, 3, 6), end: new Date(2026, 3, 6) },
+    ]);
+  });
+
+  it("formats local calendar days without shifting them through UTC serialization", () => {
+    expect(toLocalDateKey(new Date(2026, 3, 6))).toBe("2026-04-06");
+    expect(toLocalDateKey(new Date(2026, 3, 10))).toBe("2026-04-10");
+  });
+});
@@ -0,0 +1,129 @@
+import 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,
+  tuesday: 8,
+  wednesday: 8,
+  thursday: 8,
+  friday: 8,
+  saturday: 0,
+};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null;
+}
+
+export function toLocalStartOfDay(value: Date | string): Date {
+  const date = value instanceof Date ? new Date(value) : new Date(value);
+  date.setHours(0, 0, 0, 0);
+  return date;
+}
+
+export function toLocalDateKey(value: Date | string): string {
+  const date = toLocalStartOfDay(value);
+  const year = date.getFullYear();
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  return `${year}-${month}-${day}`;
+}
+
+export function normalizeTimelineAvailability(value: unknown): WeekdayAvailability {
+  if (!isRecord(value)) {
+    return DEFAULT_TIMELINE_AVAILABILITY;
+  }
+
+  const normalized = { ...DEFAULT_TIMELINE_AVAILABILITY };
+  for (const key of DAY_KEYS) {
+    const next = value[key];
+    if (typeof next === "number" && Number.isFinite(next)) {
+      normalized[key] = next;
+    }
+  }
+  return normalized;
+}
+
+export function getTimelineAvailabilityHoursForDate(
+  availability: WeekdayAvailability,
+  date: Date,
+): number {
+  const dayKey = DAY_KEYS[toLocalStartOfDay(date).getDay()];
+  return dayKey ? (availability[dayKey] ?? 0) : 0;
+}
+
+export function getEffectiveAllocationAvailability(
+  allocation: Pick<TimelineAssignmentEntry, "resource" | "metadata">,
+): WeekdayAvailability {
+  const availability = normalizeTimelineAvailability(allocation.resource?.availability);
+  const metadata = allocation.metadata as Record<string, unknown> | null;
+  const includeSaturday = metadata?.includeSaturday === true;
+  return includeSaturday ? availability : { ...availability, saturday: 0 };
+}
+
+export function isAllocationScheduledOnDate(
+  allocation: Pick<TimelineAssignmentEntry, "startDate" | "endDate" | "resource" | "metadata">,
+  date: Date,
+): boolean {
+  const target = toLocalStartOfDay(date);
+  const start = toLocalStartOfDay(allocation.startDate);
+  const end = toLocalStartOfDay(allocation.endDate);
+
+  if (target < start || target > end) {
+    return false;
+  }
+
+  return getTimelineAvailabilityHoursForDate(getEffectiveAllocationAvailability(allocation), target) > 0;
+}
+
+export function buildAllocationWorkingDaySegments(
+  allocation: Pick<TimelineAssignmentEntry, "startDate" | "endDate" | "resource" | "metadata">,
+  rangeStart?: Date,
+  rangeEnd?: Date,
+): Array<{ start: Date; end: Date }> {
+  const availability = getEffectiveAllocationAvailability(allocation);
+  const start = toLocalStartOfDay(rangeStart ?? allocation.startDate);
+  const end = toLocalStartOfDay(rangeEnd ?? allocation.endDate);
+
+  if (start > end) {
+    return [];
+  }
+
+  const segments: Array<{ start: Date; end: Date }> = [];
+  let segmentStart: Date | null = null;
+  let segmentEnd: Date | null = null;
+  const cursor = new Date(start);
+
+  while (cursor <= end) {
+    const isWorkingDay = getTimelineAvailabilityHoursForDate(availability, cursor) > 0;
+
+    if (isWorkingDay) {
+      if (!segmentStart) {
+        segmentStart = new Date(cursor);
+      }
+      segmentEnd = new Date(cursor);
+    } else if (segmentStart && segmentEnd) {
+      segments.push({ start: segmentStart, end: segmentEnd });
+      segmentStart = null;
+      segmentEnd = null;
+    }
+
+    cursor.setDate(cursor.getDate() + 1);
+  }
+
+  if (segmentStart && segmentEnd) {
+    segments.push({ start: segmentStart, end: segmentEnd });
+  }
+
+  return segments;
+}
@@ -0,0 +1,79 @@
+import { describe, expect, it } from "vitest";
+import { buildResourceCapacitySeries } from "./timelineCapacity.js";
+import type { TimelineAssignmentEntry, VacationEntry } from "./TimelineContext.js";
+
+function createAssignmentWithAvailability(availability: Record<string, number>): TimelineAssignmentEntry {
+  return {
+    resource: {
+      id: "resource-1",
+      displayName: "Peter Parker",
+      eid: "E-001",
+      chapter: "Delivery",
+      lcrCents: 10000,
+      availability,
+    },
+  } as TimelineAssignmentEntry;
+}
+
+function buildSeries(args: { dates: Date[]; vacations?: VacationEntry[]; availability: Record<string, number> }) {
+  return buildResourceCapacitySeries(
+    new Map([["resource-1", [createAssignmentWithAvailability(args.availability)]]]),
+    new Map([["resource-1", args.vacations ?? []]]),
+    args.dates,
+  ).get("resource-1");
+}
+
+describe("timelineCapacity", () => {
+  it("maps local weekdays without UTC drift", () => {
+    const series = buildSeries({
+      dates: [
+        new Date(2026, 2, 30),
+        new Date(2026, 3, 4),
+        new Date(2026, 3, 5),
+      ],
+      availability: {
+        sunday: 1,
+        monday: 6,
+        tuesday: 7,
+        wednesday: 8,
+        thursday: 5,
+        friday: 4,
+        saturday: 2,
+      },
+    });
+
+    expect(series?.baseHoursByDay).toEqual([6, 2, 1]);
+    expect(series?.capacityHoursByDay).toEqual([6, 2, 1]);
+    expect(series?.bookingFactorsByDay).toEqual([1, 1, 1]);
+  });
+
+  it("applies approved absences using the local calendar day key", () => {
+    const series = buildSeries({
+      dates: [new Date(2026, 2, 30)],
+      availability: {
+        sunday: 0,
+        monday: 8,
+        tuesday: 8,
+        wednesday: 8,
+        thursday: 8,
+        friday: 8,
+        saturday: 0,
+      },
+      vacations: [
+        {
+          id: "vac-1",
+          resourceId: "resource-1",
+          type: "ANNUAL",
+          status: "APPROVED",
+          startDate: "2026-03-30",
+          endDate: "2026-03-30",
+          isHalfDay: false,
+        } as VacationEntry,
+      ],
+    });
+
+    expect(series?.baseHoursByDay).toEqual([8]);
+    expect(series?.capacityHoursByDay).toEqual([0]);
+    expect(series?.bookingFactorsByDay).toEqual([0]);
+  });
+});
@@ -0,0 +1,147 @@
+import type { WeekdayAvailability } from "@capakraken/shared";
+import type { TimelineAssignmentEntry, VacationEntry } from "./TimelineContext.js";
+import {
+  DEFAULT_TIMELINE_AVAILABILITY,
+  getTimelineAvailabilityHoursForDate,
+  normalizeTimelineAvailability,
+  toLocalDateKey,
+  toLocalStartOfDay,
+} from "./timelineAvailability.js";
+
+const DEFAULT_AVAILABILITY: WeekdayAvailability = DEFAULT_TIMELINE_AVAILABILITY;
+
+export type ResourceCapacitySeries = {
+  baseHoursByDay: number[];
+  capacityHoursByDay: number[];
+  bookingFactorsByDay: number[];
+};
+
+function normalizeAvailability(value: unknown): WeekdayAvailability {
+  return normalizeTimelineAvailability(value);
+}
+
+function getAvailabilityHoursForDate(availability: WeekdayAvailability, date: Date): number {
+  return getTimelineAvailabilityHoursForDate(availability, date);
+}
+
+function resolveResourceAvailability(allocs: TimelineAssignmentEntry[]): WeekdayAvailability {
+  for (const alloc of allocs) {
+    const availability = alloc.resource?.availability;
+    if (availability !== null && availability !== undefined) {
+      return normalizeAvailability(availability);
+    }
+  }
+  return DEFAULT_AVAILABILITY;
+}
+
+function buildAbsenceFractionsByDate(
+  vacations: VacationEntry[],
+  periodStart: Date,
+  periodEnd: Date,
+): Map<string, number> {
+  const holidayDates = new Set<string>();
+  const vacationFractionsByDate = new Map<string, number>();
+  const absenceFractionsByDate = new Map<string, number>();
+  const normalizedStart = toLocalStartOfDay(periodStart);
+  const normalizedEnd = toLocalStartOfDay(periodEnd);
+
+  for (const vacation of vacations) {
+    const isPublicHoliday = vacation.type === "PUBLIC_HOLIDAY";
+    const isApprovedVacation = vacation.status === "APPROVED";
+
+    if (!isPublicHoliday && !isApprovedVacation) {
+      continue;
+    }
+
+    const overlapStart = new Date(
+      Math.max(
+        toLocalStartOfDay(vacation.startDate).getTime(),
+        normalizedStart.getTime(),
+      ),
+    );
+    const overlapEnd = new Date(
+      Math.min(
+        toLocalStartOfDay(vacation.endDate).getTime(),
+        normalizedEnd.getTime(),
+      ),
+    );
+
+    if (overlapStart > overlapEnd) {
+      continue;
+    }
+
+    const fraction = vacation.isHalfDay ? 0.5 : 1;
+    const cursor = new Date(overlapStart);
+
+    while (cursor <= overlapEnd) {
+      const isoDate = toLocalDateKey(cursor);
+
+      if (isPublicHoliday) {
+        holidayDates.add(isoDate);
+      } else {
+        const existingVacation = vacationFractionsByDate.get(isoDate) ?? 0;
+        vacationFractionsByDate.set(isoDate, Math.max(existingVacation, fraction));
+      }
+
+      const existingAbsence = absenceFractionsByDate.get(isoDate) ?? 0;
+      if (isPublicHoliday || !holidayDates.has(isoDate)) {
+        absenceFractionsByDate.set(isoDate, Math.max(existingAbsence, fraction));
+      }
+
+      cursor.setDate(cursor.getDate() + 1);
+    }
+  }
+
+  for (const isoDate of holidayDates) {
+    const existingAbsence = absenceFractionsByDate.get(isoDate) ?? 0;
+    absenceFractionsByDate.set(isoDate, Math.max(existingAbsence, 1));
+  }
+
+  return absenceFractionsByDate;
+}
+
+export function buildResourceCapacitySeries(
+  allocsByResource: Map<string, TimelineAssignmentEntry[]>,
+  vacationsByResource: Map<string, VacationEntry[]>,
+  dates: Date[],
+): Map<string, ResourceCapacitySeries> {
+  const result = new Map<string, ResourceCapacitySeries>();
+
+  if (dates.length === 0) {
+    return result;
+  }
+
+  const periodStart = dates[0]!;
+  const periodEnd = dates[dates.length - 1]!;
+
+  for (const [resourceId, allocs] of allocsByResource) {
+    const availability = resolveResourceAvailability(allocs);
+    const absenceFractionsByDate = buildAbsenceFractionsByDate(
+      vacationsByResource.get(resourceId) ?? [],
+      periodStart,
+      periodEnd,
+    );
+
+    const baseHoursByDay: number[] = [];
+    const capacityHoursByDay: number[] = [];
+    const bookingFactorsByDay: number[] = [];
+
+    for (const date of dates) {
+      const baseHours = getAvailabilityHoursForDate(availability, date);
+      const absenceFraction = absenceFractionsByDate.get(toLocalDateKey(date)) ?? 0;
+      const bookingFactor = baseHours > 0 ? Math.max(0, 1 - absenceFraction) : 0;
+
+      baseHoursByDay.push(baseHours);
+      bookingFactorsByDay.push(bookingFactor);
+      capacityHoursByDay.push(baseHours * bookingFactor);
+    }
+
+    result.set(resourceId, {
+      baseHoursByDay,
+      capacityHoursByDay,
+      bookingFactorsByDay,
+    });
+  }
+
+  return result;
+}
@@ -0,0 +1,187 @@
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+import type { HeatmapHoverData } from "./TimelineTooltip.js";
+import type { ResourceCapacitySeries } from "./timelineCapacity.js";
+import { toLocalDateKey } from "./timelineAvailability.js";
+
+type HeatmapAccumulator = {
+  shortCode: string;
+  projectName: string;
+  orderType: string;
+  hours: number;
+  responsiblePerson?: string | null;
+  role?: string | null;
+  status?: string;
+  startDate?: string;
+  endDate?: string;
+};
+
+export function buildResourceHeatmapHover(
+  date: Date,
+  allocations: TimelineAssignmentEntry[],
+  options?: {
+    capacityHours?: number;
+    bookingFactor?: number;
+  },
+): HeatmapHoverData {
+  const target = new Date(date);
+  target.setHours(0, 0, 0, 0);
+  const targetTime = target.getTime();
+  const bookingFactor = options?.bookingFactor ?? 1;
+  const capacityHours = options?.capacityHours ?? 8;
+
+  const projectHours = new Map<string, HeatmapAccumulator>();
+
+  for (const allocation of allocations) {
+    const start = new Date(allocation.startDate);
+    start.setHours(0, 0, 0, 0);
+    const end = new Date(allocation.endDate);
+    end.setHours(0, 0, 0, 0);
+    if (targetTime < start.getTime() || targetTime > end.getTime()) continue;
+
+    const existing = projectHours.get(allocation.projectId);
+    if (existing) {
+      existing.hours += allocation.hoursPerDay * bookingFactor;
+      continue;
+    }
+
+    projectHours.set(allocation.projectId, {
+      shortCode: allocation.project.shortCode,
+      projectName: allocation.project.name,
+      orderType: allocation.project.orderType,
+      hours: allocation.hoursPerDay * bookingFactor,
+      responsiblePerson:
+        (allocation.project as { responsiblePerson?: string | null }).responsiblePerson ?? null,
+      role: allocation.role ?? allocation.roleEntity?.name ?? null,
+      status: allocation.status,
+      startDate: toLocalDateKey(allocation.startDate),
+      endDate: toLocalDateKey(allocation.endDate),
+    });
+  }
+
+  const breakdown: HeatmapHoverData["breakdown"] = [...projectHours.entries()]
+    .map(([projectId, value]) => ({
+      projectId,
+      shortCode: value.shortCode,
+      projectName: value.projectName,
+      orderType: value.orderType,
+      hoursPerDay: value.hours,
+      ...(value.responsiblePerson !== undefined ? { responsiblePerson: value.responsiblePerson } : {}),
+      ...(value.role !== undefined ? { role: value.role } : {}),
+      ...(value.status !== undefined ? { status: value.status } : {}),
+      ...(value.startDate !== undefined ? { startDate: value.startDate } : {}),
+      ...(value.endDate !== undefined ? { endDate: value.endDate } : {}),
+    }))
+    .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
+
+  const totalH = breakdown.reduce((sum, entry) => sum + entry.hoursPerDay, 0);
+
+  return {
+    date,
+    totalH,
+    pct: capacityHours > 0 ? (totalH / capacityHours) * 100 : 0,
+    breakdown,
+  };
+}
+
+export function buildResourceHeatmapSeries(
+  allocsByResource: Map<string, TimelineAssignmentEntry[]>,
+  dates: Date[],
+  resourceCapacityById?: Map<string, ResourceCapacitySeries>,
+): {
+  resourceHeatmapById: Map<string, (HeatmapHoverData | null)[]>;
+  resourceTotalHoursById: Map<string, number[]>;
+} {
+  const dateIndexByTime = new Map<number, number>();
+  dates.forEach((date, index) => {
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    dateIndexByTime.set(normalized.getTime(), index);
+  });
+
+  const resourceHeatmapById = new Map<string, (HeatmapHoverData | null)[]>();
+  const resourceTotalHoursById = new Map<string, number[]>();
+
+  for (const [resourceId, allocs] of allocsByResource) {
+    if (allocs.length === 0) continue;
+    const capacity = resourceCapacityById?.get(resourceId);
+
+    const totalHours = new Array<number>(dates.length).fill(0);
+    const breakdownMaps = Array.from(
+      { length: dates.length },
+      () => new Map<string, HeatmapAccumulator>(),
+    );
+
+    for (const alloc of allocs) {
+      const current = new Date(alloc.startDate);
+      current.setHours(0, 0, 0, 0);
+      const end = new Date(alloc.endDate);
+      end.setHours(0, 0, 0, 0);
+
+      while (current.getTime() <= end.getTime()) {
+        const dayIndex = dateIndexByTime.get(current.getTime());
+        if (dayIndex !== undefined) {
+          const effectiveHours =
+            alloc.hoursPerDay * (capacity?.bookingFactorsByDay[dayIndex] ?? 1);
+          totalHours[dayIndex] = (totalHours[dayIndex] ?? 0) + effectiveHours;
+
+          const dayBreakdown = breakdownMaps[dayIndex];
+          if (dayBreakdown) {
+            const existing = dayBreakdown.get(alloc.projectId);
+            if (existing) {
+              existing.hours += effectiveHours;
+            } else {
+              dayBreakdown.set(alloc.projectId, {
+                shortCode: alloc.project.shortCode,
+                projectName: alloc.project.name,
+                orderType: alloc.project.orderType,
+                responsiblePerson:
+                  (alloc.project as { responsiblePerson?: string | null }).responsiblePerson ??
+                  null,
+                hours: effectiveHours,
+              });
+            }
+          }
+        }
+
+        current.setDate(current.getDate() + 1);
+      }
+    }
+
+    resourceTotalHoursById.set(resourceId, totalHours);
+    resourceHeatmapById.set(
+      resourceId,
+      totalHours.map((totalH, dayIndex) => {
+        if (totalH === 0) return null;
+
+        const dayBreakdown = breakdownMaps[dayIndex];
+        if (!dayBreakdown) return null;
+
+        const breakdown = [...dayBreakdown.entries()]
+          .map(([projectId, value]) => ({
+            projectId,
+            shortCode: value.shortCode,
+            projectName: value.projectName,
+            orderType: value.orderType,
+            responsiblePerson: value.responsiblePerson ?? null,
+            hoursPerDay: value.hours,
+          }))
+          .sort((a, b) => b.hoursPerDay - a.hoursPerDay);
+
+        return {
+          date: dates[dayIndex] ?? new Date(),
+          totalH,
+          pct:
+            (capacity?.capacityHoursByDay[dayIndex] ?? 8) > 0
+              ? (totalH / (capacity?.capacityHoursByDay[dayIndex] ?? 8)) * 100
+              : 0,
+          breakdown,
+        };
+      }),
+    );
+  }
+
+  return {
+    resourceHeatmapById,
+    resourceTotalHoursById,
+  };
+}
@@ -0,0 +1,124 @@
+import type { MutableRefObject, RefObject } from "react";
+import type { TimelineDemandEntry, VacationEntry } from "./TimelineContext.js";
+import type { DemandHoverData } from "./TimelineTooltip.js";
+
+export type TooltipPosition = {
+  left: number;
+  top: number;
+};
+
+export function updateTooltipPosition(
+  positionRef: MutableRefObject<TooltipPosition>,
+  tooltipRef: RefObject<HTMLDivElement | null>,
+  clientX: number,
+  clientY: number,
+  offsetX: number,
+  offsetY: number,
+) {
+  positionRef.current = { left: clientX + offsetX, top: clientY + offsetY };
+  if (!tooltipRef.current) return;
+
+  tooltipRef.current.style.left = `${positionRef.current.left}px`;
+  tooltipRef.current.style.top = `${positionRef.current.top}px`;
+}
+
+export function cancelHoverFrame(frameRef: MutableRefObject<number | null>) {
+  if (frameRef.current === null) return;
+  cancelAnimationFrame(frameRef.current);
+  frameRef.current = null;
+}
+
+export function findVacationHit<T extends { startDate: Date | string; endDate: Date | string }>(
+  vacations: T[],
+  date: Date,
+): T | null {
+  const time = new Date(date);
+  time.setHours(0, 0, 0, 0);
+  const target = time.getTime();
+
+  return (
+    vacations.find((vacation) => {
+      const start = new Date(vacation.startDate);
+      start.setHours(0, 0, 0, 0);
+      const end = new Date(vacation.endDate);
+      end.setHours(0, 0, 0, 0);
+      return target >= start.getTime() && target <= end.getTime();
+    }) ?? null
+  );
+}
+
+export function collectResourcesWithVacations(
+  vacationsByResource: Map<string, VacationEntry[]>,
+) {
+  const result = new Set<string>();
+  for (const [resourceId, vacations] of vacationsByResource) {
+    if (vacations.length > 0) {
+      result.add(resourceId);
+    }
+  }
+  return result;
+}
+
+export function scheduleVacationHoverUpdate<T extends { id: string; startDate: Date | string; endDate: Date | string }>(
+  args: {
+    frameRef: MutableRefObject<number | null>;
+    hoveredKeyRef: MutableRefObject<string | null>;
+    resourceId: string;
+    clientX: number;
+    rect: DOMRect;
+    xToDate: (clientX: number, rect: DOMRect) => Date;
+    vacations: T[];
+    onHoverChange: (vacation: T | null) => void;
+  },
+) {
+  const {
+    frameRef,
+    hoveredKeyRef,
+    resourceId,
+    clientX,
+    rect,
+    xToDate,
+    vacations,
+    onHoverChange,
+  } = args;
+
+  if (frameRef.current !== null) return;
+
+  frameRef.current = requestAnimationFrame(() => {
+    frameRef.current = null;
+    const date = xToDate(clientX, rect);
+    const hit = findVacationHit(vacations, date);
+    const nextKey = hit ? `${resourceId}:${hit.id}` : null;
+    if (nextKey === hoveredKeyRef.current) return;
+
+    hoveredKeyRef.current = nextKey;
+    onHoverChange(hit);
+  });
+}
+
+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);
+
+  return {
+    roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
+    roleColor: demand.roleEntity?.color ?? "#f59e0b",
+    projectName: demand.project.name,
+    projectShortCode: demand.project.shortCode,
+    requestedHeadcount: demand.requestedHeadcount,
+    unfilledHeadcount: demand.unfilledHeadcount,
+    startDate: demand.startDate,
+    endDate: demand.endDate,
+    hoursPerDay: demand.hoursPerDay,
+    totalHours: demand.hoursPerDay * days,
+    percentage: demand.percentage,
+    status: demand.status,
+    ...(demand.dailyCostCents > 0
+      ? {
+          totalCostCents: demand.dailyCostCents * days,
+          dailyCostCents: demand.dailyCostCents,
+        }
+      : {}),
+  };
+}
@@ -0,0 +1,74 @@
+import type { TimelineAssignmentEntry } from "./TimelineContext.js";
+import type { ResourceCapacitySeries } from "./timelineCapacity.js";
+
+export type ProjectDayMetric = {
+  projH: number;
+  totalH: number;
+  capacityH: number;
+};
+
+type ProjectMetricRow = {
+  resource: { id: string };
+  allocs: TimelineAssignmentEntry[];
+};
+
+type ProjectMetricGroup = {
+  id: string;
+  resourceRows: ProjectMetricRow[];
+};
+
+export function getProjectRowMetricsKey(projectId: string, resourceId: string): string {
+  return `${projectId}:${resourceId}`;
+}
+
+export function buildProjectRowMetrics(
+  dates: Date[],
+  projectGroups: ProjectMetricGroup[],
+  resourceTotalHoursById: Map<string, number[]>,
+  resourceCapacityById: Map<string, ResourceCapacitySeries>,
+): Map<string, ProjectDayMetric[]> {
+  const dateIndexByTime = new Map<number, number>();
+  dates.forEach((date, index) => {
+    const normalized = new Date(date);
+    normalized.setHours(0, 0, 0, 0);
+    dateIndexByTime.set(normalized.getTime(), index);
+  });
+
+  const nextMetrics = new Map<string, ProjectDayMetric[]>();
+
+  for (const project of projectGroups) {
+    for (const { resource, allocs } of project.resourceRows) {
+      const projectHours = new Array<number>(dates.length).fill(0);
+      const capacity = resourceCapacityById.get(resource.id);
+
+      for (const alloc of allocs) {
+        const current = new Date(alloc.startDate);
+        current.setHours(0, 0, 0, 0);
+        const end = new Date(alloc.endDate);
+        end.setHours(0, 0, 0, 0);
+
+        while (current.getTime() <= end.getTime()) {
+          const dayIndex = dateIndexByTime.get(current.getTime());
+          if (dayIndex !== undefined) {
+            projectHours[dayIndex] =
+              (projectHours[dayIndex] ?? 0) +
+              alloc.hoursPerDay * (capacity?.bookingFactorsByDay[dayIndex] ?? 1);
+          }
+          current.setDate(current.getDate() + 1);
+        }
+      }
+
+      const totalHours = resourceTotalHoursById.get(resource.id);
+      nextMetrics.set(
+        getProjectRowMetricsKey(project.id, resource.id),
+        projectHours.map((projH, dayIndex) => ({
+          projH,
+          totalH: totalHours?.[dayIndex] ?? 0,
+          capacityH: capacity?.capacityHoursByDay[dayIndex] ?? 8,
+        })),
+      );
+    }
+  }
+
+  return nextMetrics;
+}
@@ -0,0 +1,129 @@
+import {
+  applyVisualOverrides,
+  type TimelineVisualOverrides,
+} from "./allocationVisualState.js";
+import type {
+  TimelineAssignmentEntry,
+  TimelineDemandEntry,
+  useTimelineContext,
+} from "./TimelineContext.js";
+import { PROJECT_HEADER_HEIGHT, ROW_HEIGHT, SUB_LANE_HEIGHT } from "./timelineConstants.js";
+import { getProjectRowMetricsKey } from "./timelineProjectMetrics.js";
+
+export type TimelineProjectGroup = NonNullable<ReturnType<typeof useTimelineContext>["projectGroups"]>[number];
+
+export type OpenDemandRowLayout = {
+  visibleOpenDemands: TimelineDemandEntry[];
+  laneMap: Map<string, number>;
+  laneCount: number;
+  rowHeight: number;
+};
+
+export type ProjectFlatRow =
+  | {
+      type: "header";
+      key: string;
+      project: TimelineProjectGroup;
+    }
+  | {
+      type: "open-demand";
+      key: string;
+      projectId: string;
+      openDemandCount: number;
+      layout: OpenDemandRowLayout;
+    }
+  | {
+      type: "resource";
+      key: string;
+      project: TimelineProjectGroup;
+      resource: TimelineProjectGroup["resourceRows"][number]["resource"];
+      allocs: TimelineAssignmentEntry[];
+      metricsKey: string;
+    };
+
+export function estimateProjectRowHeight(row: ProjectFlatRow | undefined) {
+  if (!row) return ROW_HEIGHT;
+  if (row.type === "header") return PROJECT_HEADER_HEIGHT;
+  if (row.type === "open-demand") return row.layout.rowHeight;
+  return ROW_HEIGHT;
+}
+
+export function buildProjectFlatRows(
+  visualProjectGroups: TimelineProjectGroup[],
+  openDemandsByProject: Map<string, TimelineDemandEntry[]>,
+  optimisticAllocations: TimelineVisualOverrides,
+): ProjectFlatRow[] {
+  const rows: ProjectFlatRow[] = [];
+
+  for (const project of visualProjectGroups) {
+    rows.push({ type: "header", key: `header-${project.id}`, project });
+
+    const openDemands = openDemandsByProject.get(project.id) ?? [];
+    if (openDemands.length > 0) {
+      rows.push({
+        type: "open-demand",
+        key: `open-demand-${project.id}`,
+        projectId: project.id,
+        openDemandCount: openDemands.length,
+        layout: buildOpenDemandRowLayout(openDemands, optimisticAllocations),
+      });
+    }
+
+    for (const { resource, allocs } of project.resourceRows) {
+      rows.push({
+        type: "resource",
+        key: `${project.id}-${resource.id}`,
+        project,
+        resource,
+        allocs,
+        metricsKey: getProjectRowMetricsKey(project.id, resource.id),
+      });
+    }
+  }
+
+  return rows;
+}
+
+function assignDemandLanes(demands: TimelineDemandEntry[]): Map<string, number> {
+  const laneMap = new Map<string, number>();
+  const laneEnds: Date[] = [];
+
+  const sorted = [...demands].sort(
+    (a, b) => new Date(a.startDate).getTime() - new Date(b.startDate).getTime(),
+  );
+
+  for (const demand of sorted) {
+    const start = new Date(demand.startDate);
+    let assigned = -1;
+    for (let i = 0; i < laneEnds.length; i++) {
+      if (laneEnds[i]! < start) {
+        assigned = i;
+        laneEnds[i] = new Date(demand.endDate);
+        break;
+      }
+    }
+    if (assigned === -1) {
+      assigned = laneEnds.length;
+      laneEnds.push(new Date(demand.endDate));
+    }
+    laneMap.set(demand.id, assigned);
+  }
+
+  return laneMap;
+}
+
+function buildOpenDemandRowLayout(
+  openDemands: TimelineDemandEntry[],
+  optimisticAllocations: TimelineVisualOverrides,
+): OpenDemandRowLayout {
+  const visibleOpenDemands = applyVisualOverrides(openDemands, optimisticAllocations);
+  const laneMap = assignDemandLanes(visibleOpenDemands);
+  const laneCount = laneMap.size > 0 ? Math.max(...laneMap.values()) + 1 : 1;
+
+  return {
+    visibleOpenDemands,
+    laneMap,
+    laneCount,
+    rowHeight: Math.max(ROW_HEIGHT, laneCount * SUB_LANE_HEIGHT + 16),
+  };
+}
@@ -112,6 +112,7 @@ export function EntityCombobox<T extends { id: string }>({
          ? createPortal(
              <div
                ref={panelRef}
+                data-entity-combobox-overlay="true"
                className="fixed z-[9998] overflow-hidden rounded-xl border border-gray-200 bg-white shadow-xl dark:border-gray-600 dark:bg-gray-800"
                style={{
                  top: position.top,
@@ -3,7 +3,6 @@
 import { trpc } from "~/lib/trpc/client.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { ProgressRing } from "~/components/ui/ProgressRing.js";
-
 interface BalanceCardProps {
  resourceId: string;
  year?: number;
@@ -11,7 +10,7 @@ interface BalanceCardProps {
 }

 export function BalanceCard({ resourceId, year = new Date().getFullYear(), compact = false }: BalanceCardProps) {
-  const { data: balance, isLoading } = trpc.entitlement.getBalance.useQuery(
+  const { data: balance, isLoading } = trpc.entitlement.getBalanceDetail.useQuery(
    { resourceId, year },
    { staleTime: 30_000 },
  );
@@ -27,20 +26,20 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa

  if (!balance) return null;

-  const pct = balance.entitledDays > 0
-    ? Math.round((balance.usedDays / balance.entitledDays) * 100)
+  const pct = balance.entitlement > 0
+    ? Math.round((balance.taken / balance.entitlement) * 100)
    : 0;

  if (compact) {
    return (
      <div className="flex items-center gap-3 text-sm">
-        <span className="font-medium text-gray-900 dark:text-gray-100">{balance.remainingDays}d remaining</span>
+        <span className="font-medium text-gray-900 dark:text-gray-100">{balance.remaining}d remaining</span>
        <span className="text-gray-400 dark:text-gray-600">·</span>
-        <span className="text-gray-500 dark:text-gray-400">{balance.usedDays}d used of {balance.entitledDays}d</span>
-        {balance.pendingDays > 0 && (
+        <span className="text-gray-500 dark:text-gray-400">{balance.taken}d used of {balance.entitlement}d</span>
+        {balance.pending > 0 && (
          <>
            <span className="text-gray-400 dark:text-gray-600">·</span>
-            <span className="text-amber-600">{balance.pendingDays}d pending</span>
+            <span className="text-amber-600">{balance.pending}d pending</span>
          </>
        )}
      </div>
@@ -52,31 +51,36 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
    : pct >= 70
      ? "var(--color-amber-500, #f59e0b)"
      : "var(--color-emerald-500, #10b981)";
+  const holidayBasisVariants = balance.deductionSummary?.holidayBasisVariants ?? [];
+  const excludedHolidayCount = balance.deductionSummary?.excludedHolidayDates.length ?? 0;
+  const excludedHolidayTooltip = (balance.vacations ?? [])
+    .flatMap((vacation) => vacation.holidayDetails.map((detail) => `${detail.date} · ${detail.source}`))
+    .join("\n");

  return (
    <div className="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-5 space-y-3">
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-3">
          <ProgressRing value={pct} size={52} strokeWidth={4} color={ringColor}>
-            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{balance.remainingDays}d</span>
+            <span className="text-sm font-bold text-gray-900 dark:text-gray-100">{balance.remaining}d</span>
          </ProgressRing>
          <div>
            <h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300">
              Vacation Balance {year}
            </h3>
-            <p className="text-xs text-gray-400 dark:text-gray-500">{balance.usedDays} of {balance.entitledDays} days used</p>
+            <p className="text-xs text-gray-400 dark:text-gray-500">{balance.taken} of {balance.entitlement} days used</p>
          </div>
        </div>
-        {balance.carryoverDays > 0 && (
-          <span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryoverDays}d carried over<InfoTooltip content="Unused days from the previous year. Automatically calculated on first access." /></span>
+        {balance.carryOver > 0 && (
+          <span className="text-xs text-gray-400 dark:text-gray-500 inline-flex items-center">+{balance.carryOver}d carried over<InfoTooltip content="Unused days from the previous year. Automatically calculated on first access." /></span>
        )}
      </div>

      <div className="grid grid-cols-4 gap-3">
-        <Stat label="Entitled" value={balance.entitledDays} color="text-gray-900 dark:text-gray-100" tooltip="Total vacation days granted for this year, including carryover from previous year." />
-        <Stat label="Used" value={balance.usedDays} color="text-gray-600 dark:text-gray-400" tooltip="Days already consumed by approved vacations that have passed." />
-        <Stat label="Pending" value={balance.pendingDays} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
-        <Stat label="Remaining" value={balance.remainingDays} color={balance.remainingDays < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
+        <Stat label="Entitled" value={balance.entitlement} color="text-gray-900 dark:text-gray-100" tooltip="Total vacation days granted for this year, including carryover from previous year." />
+        <Stat label="Used" value={balance.taken} color="text-gray-600 dark:text-gray-400" tooltip="Days already consumed by approved vacations that have passed." />
+        <Stat label="Pending" value={balance.pending} color="text-amber-600" tooltip="Days reserved by approved future vacations not yet started." />
+        <Stat label="Remaining" value={balance.remaining} color={balance.remaining < 5 ? "text-red-600" : "text-emerald-600"} tooltip="Entitled - Used - Pending. Red if fewer than 5 days remain." />
      </div>

      {/* Progress bar */}
@@ -85,12 +89,12 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
          className="absolute inset-y-0 left-0 bg-emerald-500 rounded-full transition-all"
          style={{ width: `${Math.min(100, pct)}%` }}
        />
-        {balance.pendingDays > 0 && (
+        {balance.pending > 0 && (
          <div
            className="absolute inset-y-0 bg-amber-400 rounded-full"
            style={{
              left: `${Math.min(100, pct)}%`,
-              width: `${Math.min(100 - pct, Math.round((balance.pendingDays / balance.entitledDays) * 100))}%`,
+              width: `${Math.min(100 - pct, Math.round((balance.pending / balance.entitlement) * 100))}%`,
            }}
          />
        )}
@@ -101,6 +105,35 @@ export function BalanceCard({ resourceId, year = new Date().getFullYear(), compa
          {balance.sickDays} sick day{balance.sickDays !== 1 ? "s" : ""} recorded (not deducted from annual leave)
        </p>
      )}
+
+      {!!balance.deductionSummary && (balance.deductionSummary.approvedVacationCount > 0 || balance.deductionSummary.pendingVacationCount > 0) && (
+        <div className="rounded-lg border border-gray-100 bg-gray-50 px-3 py-2 text-xs text-gray-500 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-400">
+          <div className="flex flex-wrap gap-x-3 gap-y-1">
+            <span className="inline-flex items-center gap-1">
+              Formula
+              <InfoTooltip content={balance.deductionSummary.formula} />
+            </span>
+            <span>
+              Vacation deductions: {balance.deductionSummary.approvedDeductedDays}d approved
+              {balance.deductionSummary.pendingDeductedDays > 0 ? ` · ${balance.deductionSummary.pendingDeductedDays}d pending` : ""}
+            </span>
+            <span>
+              Requested: {balance.deductionSummary.approvedRequestedDays + balance.deductionSummary.pendingRequestedDays}d
+            </span>
+            {excludedHolidayCount > 0 && (
+              <span className="inline-flex items-center gap-1">
+                Excluded holidays: {excludedHolidayCount}
+                {excludedHolidayTooltip.length > 0 && <InfoTooltip content={excludedHolidayTooltip} />}
+              </span>
+            )}
+          </div>
+          {holidayBasisVariants.length > 0 && (
+            <div className="mt-1">
+              Holiday basis: {holidayBasisVariants.join(" · ")}
+            </div>
+          )}
+        </div>
+      )}
    </div>
  );
 }
@@ -79,6 +79,11 @@ export function EntitlementManager() {
              <tr className="bg-gray-50 dark:bg-gray-900 border-b border-gray-100 dark:border-gray-700">
                <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Resource</th>
                <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">Chapter</th>
+                <th className="text-left px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
+                  <span className="inline-flex items-center gap-0.5">
+                    Location <InfoTooltip content="Country, state and city determine which regional holidays can reduce deducted vacation days differently per person." />
+                  </span>
+                </th>
                <th className="text-right px-4 py-2.5 text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wider">
                  <span className="inline-flex items-center justify-end gap-0.5">
                    Entitled <InfoTooltip content="Total vacation days granted to this resource for the selected year." />
@@ -114,6 +119,11 @@ export function EntitlementManager() {
                    <span className="text-xs text-gray-400 dark:text-gray-500 ml-1">({row.eid})</span>
                  </td>
                  <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">{row.chapter ?? "—"}</td>
+                  <td className="px-4 py-2.5 text-gray-500 dark:text-gray-400">
+                    {[row.countryCode ?? row.countryName, row.federalState, row.metroCityName]
+                      .filter((value): value is string => Boolean(value))
+                      .join(" / ") || "—"}
+                  </td>
                  <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.entitledDays}</td>
                  <td className="px-4 py-2.5 text-right text-gray-400 dark:text-gray-500">{row.carryoverDays}</td>
                  <td className="px-4 py-2.5 text-right text-gray-700 dark:text-gray-300">{row.usedDays}</td>
@@ -32,6 +32,28 @@ type CountryRow = {
  metroCities: { id: string; name: string }[];
 };

+type HolidayPreviewDetail = {
+  count: number;
+  locationContext: {
+    countryCode: string | null;
+    stateCode: string | null;
+    metroCity: string | null;
+    year: number;
+  };
+  summary: {
+    byScope: Array<{ scope: string; count: number }>;
+    bySourceType: Array<{ sourceType: string; count: number }>;
+    byCalendar: Array<{ calendarName: string; count: number }>;
+  };
+  holidays: Array<{
+    date: string;
+    name: string;
+    scope: string;
+    calendarName: string;
+    sourceType: string;
+  }>;
+};
+
 const SCOPE_LABELS: Record<ScopeType, string> = {
  COUNTRY: "Land",
  STATE: "Bundesland/Region",
@@ -87,7 +109,15 @@ export function HolidayCalendarEditor() {
    return rows.find((country) => country.id === selectedCalendar?.country.id) ?? null;
  }, [countries, selectedCalendar]);

-  const previewQuery = trpc.holidayCalendar.previewResolvedHolidays.useQuery(
+  const previewQuery = (trpc.holidayCalendar.previewResolvedHolidaysDetail.useQuery as unknown as (
+    input: {
+      countryId: string;
+      year: number;
+      stateCode?: string;
+      metroCityId?: string;
+    },
+    options: { enabled: boolean; staleTime: number },
+  ) => { data: HolidayPreviewDetail | undefined; isLoading: boolean })( 
    {
      countryId: selectedCalendar?.country.id ?? countryId,
      year: previewYear,
@@ -105,6 +135,7 @@ export function HolidayCalendarEditor() {
      utils.holidayCalendar.listCalendars.invalidate(),
      utils.holidayCalendar.getCalendarById.invalidate(),
      utils.holidayCalendar.previewResolvedHolidays.invalidate(),
+      utils.holidayCalendar.previewResolvedHolidaysDetail.invalidate(),
    ]);
  };

@@ -829,26 +860,45 @@ export function HolidayCalendarEditor() {
                </div>

                <div className="max-h-80 overflow-auto rounded-lg border border-gray-200 dark:border-gray-700">
+                  {previewQuery.data && (
+                    <div className="border-b border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-600 dark:border-gray-700 dark:bg-gray-900/60 dark:text-gray-300">
+                      <div className="font-medium text-gray-700 dark:text-gray-200">
+                        Basis: {[
+                          previewQuery.data.locationContext.countryCode,
+                          previewQuery.data.locationContext.stateCode,
+                          previewQuery.data.locationContext.metroCity,
+                        ].filter(Boolean).join(" / ") || "n/a"}
+                      </div>
+                      <div className="mt-1">
+                        Scope: {previewQuery.data.summary.byScope.map((item) => `${item.scope} ${item.count}`).join(" · ") || "none"}
+                      </div>
+                      <div className="mt-1">
+                        Sources: {previewQuery.data.summary.bySourceType.map((item) => `${item.sourceType} ${item.count}`).join(" · ") || "none"}
+                      </div>
+                    </div>
+                  )}
                  <table data-testid="holiday-preview-table" className="w-full text-sm">
                    <thead className="bg-gray-50 dark:bg-gray-900/60">
                      <tr>
                        <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Datum</th>
                        <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Name</th>
+                        <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Scope</th>
                        <th className="px-3 py-2 text-left text-xs font-medium uppercase tracking-wide text-gray-500">Quelle</th>
                      </tr>
                    </thead>
                    <tbody>
-                      {(previewQuery.data ?? []).length === 0 && (
+                      {(!previewQuery.data || previewQuery.data.holidays.length === 0) && (
                        <tr>
-                          <td colSpan={3} className="px-3 py-6 text-center text-sm text-gray-400">
+                          <td colSpan={4} className="px-3 py-6 text-center text-sm text-gray-400">
                            {previewQuery.isLoading ? "Laedt Vorschau..." : "Keine Feiertage fuer diese Auswahl vorhanden."}
                          </td>
                        </tr>
                      )}
-                      {(previewQuery.data ?? []).map((entry) => (
+                      {(previewQuery.data?.holidays ?? []).map((entry) => (
                        <tr key={`${entry.date}-${entry.name}`} className="border-t border-gray-200 dark:border-gray-700">
                          <td className="px-3 py-2 text-gray-700 dark:text-gray-300">{entry.date}</td>
                          <td className="px-3 py-2 text-gray-900 dark:text-gray-100">{entry.name}</td>
+                          <td className="px-3 py-2 text-gray-600 dark:text-gray-400">{entry.scope}</td>
                          <td className="px-3 py-2 text-gray-600 dark:text-gray-400">{entry.calendarName}</td>
                        </tr>
                      ))}
@@ -8,6 +8,17 @@ import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 import { BalanceCard } from "./BalanceCard.js";
 import { VacationCalendar } from "./VacationCalendar.js";
 import { VACATION_STATUS_BADGE as STATUS_BADGE, VACATION_TYPE_LABELS as TYPE_LABELS, VACATION_TYPE_BADGE } from "~/lib/status-styles.js";
+import { getHolidayBasis, getHolidayBreakdown, getRequestedDays, type VacationExplainabilityEntry } from "./vacationExplainability.js";
+
+type VacationListItem = VacationExplainabilityEntry & {
+  id: string;
+  startDate: Date | string;
+  endDate: Date | string;
+  status: string;
+  type: string;
+  note?: string | null;
+  rejectionReason?: string | null;
+};

 export function MyVacationsClient() {
  const [showModal, setShowModal] = useState(false);
@@ -21,8 +32,17 @@ export function MyVacationsClient() {

  const resourceId = myResource?.id;

-  const { data: vacations, isLoading, refetch } = trpc.vacation.list.useQuery(
-    { resourceId, limit: 200 },
+  const vacationListQuery = trpc.vacation.list.useQuery as unknown as (
+    input: { limit: number; resourceId?: string | undefined },
+    options: { enabled: boolean; staleTime: number },
+  ) => {
+    data: VacationListItem[] | undefined;
+    isLoading: boolean;
+    refetch: () => Promise<unknown>;
+  };
+
+  const { data: vacations, isLoading, refetch } = vacationListQuery(
+    { limit: 200, ...(resourceId ? { resourceId } : {}) },
    { enabled: !!resourceId, staleTime: 15_000 },
  );

@@ -33,7 +53,7 @@ export function MyVacationsClient() {
    },
  });

-  const vacationList = vacations ?? [];
+  const vacationList: VacationListItem[] = vacations ?? [];

  return (
    <div className="p-6 max-w-4xl mx-auto space-y-6">
@@ -102,10 +122,13 @@ export function MyVacationsClient() {
              {vacationList.map((v) => {
                const start = new Date(v.startDate);
                const end = new Date(v.endDate);
-                const days = Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
+                const requestedDays = getRequestedDays(v);
+                const deductedDays = typeof v.deductedDays === "number" ? v.deductedDays : null;
+                const holidayBasis = getHolidayBasis(v);
+                const holidayBreakdown = getHolidayBreakdown(v);
                const status = v.status as string;
                const type = v.type as string;
-                const vWithExtra = v as unknown as { rejectionReason?: string | null; isHalfDay?: boolean };
+                const affectsBalance = type === VacationType.ANNUAL || type === VacationType.OTHER;

                return (
                  <tr key={v.id} className="hover:bg-gray-50 dark:hover:bg-gray-700/50">
@@ -116,16 +139,54 @@ export function MyVacationsClient() {
                    </td>
                    <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{start.toLocaleDateString("en-GB")}</td>
                    <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{end.toLocaleDateString("en-GB")}</td>
-                    <td className="px-4 py-3 text-gray-600 dark:text-gray-400">{vWithExtra.isHalfDay ? "0.5" : days}</td>
+                    <td className="px-4 py-3 text-right text-gray-600 dark:text-gray-400">
+                      <div className="space-y-1">
+                        <div>{requestedDays}</div>
+                        {affectsBalance && deductedDays !== null && (
+                          <div className="text-[11px] text-gray-400 dark:text-gray-500">
+                            Deducted: {deductedDays}
+                          </div>
+                        )}
+                        {affectsBalance && deductedDays === 0 && holidayBreakdown.length > 0 && (
+                          <div className="text-[11px] text-emerald-600 dark:text-emerald-400">
+                            Fully covered by holidays
+                          </div>
+                        )}
+                      </div>
+                    </td>
                    <td className="px-4 py-3">
                      <span className={`inline-flex px-2 py-0.5 rounded-full text-xs font-medium ${STATUS_BADGE[status] ?? ""}`}>
                        {status}
                      </span>
                    </td>
-                    <td className="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs max-w-[200px]">
-                      {vWithExtra.rejectionReason ? (
-                        <span className="text-red-500">{vWithExtra.rejectionReason}</span>
-                      ) : (v.note ?? "—")}
+                    <td className="px-4 py-3 text-gray-400 dark:text-gray-500 text-xs max-w-[280px]">
+                      {v.rejectionReason ? (
+                        <span className="text-red-500">{v.rejectionReason}</span>
+                      ) : (
+                        <div className="space-y-1">
+                          <div>{v.note ?? "—"}</div>
+                          {affectsBalance && holidayBasis.length > 0 && (
+                            <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                              Holiday basis: {holidayBasis.join(" / ")}
+                            </div>
+                          )}
+                          {affectsBalance && holidayBreakdown.length > 0 && (
+                            <div className="text-[11px] text-gray-500 dark:text-gray-400">
+                              Excluded holidays: {holidayBreakdown.map((holiday) => `${holiday.date} (${holiday.source})`).join(", ")}
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {!v.rejectionReason && affectsBalance && deductedDays !== null && deductedDays !== requestedDays && holidayBreakdown.length === 0 && (
+                        <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          Local holiday-adjusted deduction snapshot applied.
+                        </div>
+                      )}
+                      {!v.rejectionReason && !affectsBalance && (
+                        <div className="mt-1 text-[11px] text-gray-500 dark:text-gray-400">
+                          This leave type does not reduce annual vacation entitlement.
+                        </div>
+                      )}
                    </td>
                    <td className="px-4 py-3 text-right">
                      {(status === VacationStatus.PENDING || status === VacationStatus.APPROVED) && (
@@ -1,10 +1,11 @@
 "use client";

 import { useState } from "react";
-import { VacationStatus, VacationType } from "@capakraken/shared";
+import { VacationStatus } from "@capakraken/shared";
 import { VACATION_CALENDAR_COLORS } from "~/lib/status-styles.js";
+import { buildVacationExplainabilityTooltip, type VacationExplainabilityEntry } from "./vacationExplainability.js";

-interface VacationEntry {
+interface VacationEntry extends VacationExplainabilityEntry {
  id: string;
  startDate: Date | string;
  endDate: Date | string;
@@ -142,11 +143,12 @@ export function VacationCalendar({ vacations, year = new Date().getFullYear(), i
                  const colorClass = VACATION_CALENDAR_COLORS[v.type] ?? "bg-gray-400";
                  const opacityClass = STATUS_OPACITY[v.status] ?? "opacity-100";
                  const name = v.resource?.displayName ?? "—";
+                  const explainabilityTitle = buildVacationExplainabilityTooltip(v);
                  return (
                    <div
                      key={v.id + dateStr}
                      className={`${colorClass} ${opacityClass} text-white text-xs px-1 rounded truncate`}
-                      title={`${name} — ${v.type} (${v.status})`}
+                      title={[`${name} — ${v.type} (${v.status})`, explainabilityTitle].filter(Boolean).join("\n")}
                    >
                      {name.split(" ")[0]}
                    </div>
@@ -0,0 +1,88 @@
+"use client";
+
+export const HOLIDAY_SOURCE_LABELS = {
+  CALENDAR: "Holiday Calendar",
+  LEGACY_PUBLIC_HOLIDAY: "Legacy import",
+  CALENDAR_AND_LEGACY: "Holiday Calendar + legacy",
+} as const;
+
+export type VacationExplainabilityEntry = {
+  startDate: Date | string;
+  endDate: Date | string;
+  isHalfDay?: boolean | null;
+  deductedDays?: number | null;
+  holidayCountryCode?: string | null;
+  holidayCountryName?: string | null;
+  holidayFederalState?: string | null;
+  holidayMetroCityName?: string | null;
+  holidayCalendarDates?: unknown;
+  holidayLegacyPublicHolidayDates?: unknown;
+};
+
+function toSortedDateList(value: unknown): string[] {
+  return Array.isArray(value) && value.every((entry) => typeof entry === "string")
+    ? [...value].sort()
+    : [];
+}
+
+export function getRequestedDays(vacation: Pick<VacationExplainabilityEntry, "startDate" | "endDate" | "isHalfDay">): number {
+  if (vacation.isHalfDay) {
+    return 0.5;
+  }
+
+  const start = new Date(vacation.startDate);
+  const end = new Date(vacation.endDate);
+  return Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
+}
+
+export function getHolidayBasis(vacation: VacationExplainabilityEntry): string[] {
+  return [
+    vacation.holidayCountryName ?? vacation.holidayCountryCode ?? null,
+    vacation.holidayFederalState ?? null,
+    vacation.holidayMetroCityName ?? null,
+  ].filter((value): value is string => Boolean(value));
+}
+
+export function getHolidayBreakdown(vacation: VacationExplainabilityEntry): Array<{ date: string; source: string }> {
+  const calendarDates = toSortedDateList(vacation.holidayCalendarDates);
+  const legacyDates = toSortedDateList(vacation.holidayLegacyPublicHolidayDates);
+  const uniqueDates = [...new Set([...calendarDates, ...legacyDates])].sort();
+
+  return uniqueDates.map((date) => ({
+    date,
+    source:
+      calendarDates.includes(date) && legacyDates.includes(date)
+        ? HOLIDAY_SOURCE_LABELS.CALENDAR_AND_LEGACY
+        : calendarDates.includes(date)
+          ? HOLIDAY_SOURCE_LABELS.CALENDAR
+          : HOLIDAY_SOURCE_LABELS.LEGACY_PUBLIC_HOLIDAY,
+  }));
+}
+
+export function buildVacationExplainabilityTooltip(
+  vacation: VacationExplainabilityEntry & { type?: string | null },
+): string | null {
+  const requestedDays = getRequestedDays(vacation);
+  const deductedDays = typeof vacation.deductedDays === "number" ? vacation.deductedDays : null;
+  const holidayBasis = getHolidayBasis(vacation);
+  const holidayBreakdown = getHolidayBreakdown(vacation);
+  const lines = [`Requested: ${requestedDays}d`];
+
+  if (deductedDays !== null) {
+    lines.push(`Deducted: ${deductedDays}d`);
+  }
+
+  if (holidayBasis.length > 0) {
+    lines.push(`Holiday basis: ${holidayBasis.join(" / ")}`);
+  }
+
+  if (holidayBreakdown.length > 0) {
+    lines.push(`Excluded holidays: ${holidayBreakdown.map((holiday) => `${holiday.date} (${holiday.source})`).join(", ")}`);
+  }
+
+  if ((vacation.type === "SICK" || vacation.type === "PUBLIC_HOLIDAY") && deductedDays === 0) {
+    lines.push("Does not reduce annual vacation entitlement.");
+  }
+
+  return lines.length > 0 ? lines.join("\n") : null;
+}