feat(timeline): add pulse animation for in-flight drag mutations

Allocation bars that have active optimistic overrides (post-drag, awaiting server confirmation) now pulse subtly via animate-pulse. The pending set is derived from the existing optimisticAllocations map keys, requiring no additional state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-09 13:28:46 +02:00
parent 7a5e98e2e9
commit 1df208dbcc
386 changed files with 657 additions and 81650 deletions
@@ -18,8 +18,7 @@
    "@capakraken/db": "workspace:*",
    "@capakraken/engine": "workspace:*",
    "@capakraken/shared": "workspace:*",
-    "@capakraken/ui": "workspace:*",
-    "@dnd-kit/core": "^6.3.1",
+"@dnd-kit/core": "^6.3.1",
    "@dnd-kit/sortable": "^10.0.0",
    "@dnd-kit/utilities": "^3.2.2",
    "@node-rs/argon2": "^2.0.2",
@@ -3,8 +3,8 @@
 import { useState } from "react";
 import Link from "next/link";
 import { clsx } from "clsx";
-import { Button } from "@capakraken/ui";
-import { Badge } from "@capakraken/ui";
+import { Button } from "~/components/ui/Button.js";
+import { Badge } from "~/components/ui/Badge.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { ShimmerSkeleton } from "~/components/ui/ShimmerSkeleton.js";
@@ -3,8 +3,8 @@
 import { useState } from "react";
 import Link from "next/link";
 import { clsx } from "clsx";
-import { Button } from "@capakraken/ui";
-import { Badge } from "@capakraken/ui";
+import { Button } from "~/components/ui/Button.js";
+import { Badge } from "~/components/ui/Badge.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
@@ -1,7 +1,7 @@
 "use client";

 import { useState, useMemo } from "react";
-import { SystemRole, PermissionKey, ROLE_DEFAULT_PERMISSIONS, type PermissionOverrides } from "@capakraken/shared";
+import { SystemRole, PermissionKey, ROLE_DEFAULT_PERMISSIONS, MILLISECONDS_PER_DAY, type PermissionOverrides } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { InviteUserModal } from "./InviteUserModal.js";
@@ -422,7 +422,7 @@ export function UsersClient() {
    const diff = Date.now() - d.getTime();
    if (diff < 60_000) return "Just now";
    if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
-    if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+    if (diff < MILLISECONDS_PER_DAY) return `${Math.floor(diff / 3_600_000)}h ago`;
    return d.toLocaleDateString("en-GB", { day: "2-digit", month: "short", year: "numeric" });
  }

@@ -1,7 +1,7 @@
 "use client";

 import { useState, useEffect } from "react";
-import type { FormEvent, MouseEvent } from "react";
+import type { FormEvent } from "react";
 import { BlueprintTarget } from "@capakraken/shared";
 import type { BlueprintFieldDefinition } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
@@ -66,12 +66,8 @@ function NewBlueprintModal({ onClose, onCreated }: NewBlueprintModalProps) {
    }
  }

-  function handleBackdropClick(e: MouseEvent<HTMLDivElement>) {
-    if (e.target === e.currentTarget) onClose();
-  }
-
  return (
-    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8" onClick={handleBackdropClick}>
+    <div className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8">
      <div className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4">
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
          <h2 className="text-lg font-semibold text-gray-900">New Blueprint</h2>
@@ -1,7 +1,7 @@
 "use client";

-import { useRef, useState } from "react";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { trpc } from "~/lib/trpc/client.js";

 const TARGET_TYPES = [
@@ -42,9 +42,6 @@ export function BroadcastModal({ onClose, onSuccess }: BroadcastModalProps) {
  const [serverError, setServerError] = useState<string | null>(null);
  const [result, setResult] = useState<{ recipientCount: number } | null>(null);

-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
  const utils = trpc.useUtils();

  const createMutation = trpc.notification.createBroadcast.useMutation({
@@ -85,17 +82,7 @@ export function BroadcastModal({ onClose, onSuccess }: BroadcastModalProps) {
  // After successful send, show result
  if (result) {
    return (
-      <div
-        className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-        onClick={(e) => {
-          if (e.target === e.currentTarget) { onSuccess(); onClose(); }
-        }}
-      >
-        <div
-          ref={panelRef}
-          className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-          onKeyDown={(e) => { if (e.key === "Escape") { onSuccess(); onClose(); } }}
-        >
+      <AnimatedModal open={true} onClose={() => { onSuccess(); onClose(); }} maxWidth="max-w-lg">
          <div className="px-6 py-8 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
              <svg className="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -114,23 +101,12 @@ export function BroadcastModal({ onClose, onSuccess }: BroadcastModalProps) {
              Close
            </button>
          </div>
-        </div>
-      </div>
+      </AnimatedModal>
    );
  }

  return (
-    <div
-      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
-      >
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-lg">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Send Broadcast</h2>
@@ -322,7 +298,6 @@ export function BroadcastModal({ onClose, onSuccess }: BroadcastModalProps) {
            </button>
          </div>
        </form>
-      </div>
-    </div>
+    </AnimatedModal>
  );
 }
@@ -1,7 +1,7 @@
 "use client";

-import { useRef, useState } from "react";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";

@@ -50,9 +50,6 @@ export function CreateTaskModal({ onClose, onSuccess }: CreateTaskModalProps) {
  const [serverError, setServerError] = useState<string | null>(null);
  const [result, setResult] = useState<{ recipientCount?: number; taskId?: string } | null>(null);

-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
  const utils = trpc.useUtils();

  const { data: users = [] } = trpc.user.listAssignable.useQuery(undefined, {
@@ -152,17 +149,7 @@ export function CreateTaskModal({ onClose, onSuccess }: CreateTaskModalProps) {
  if (result) {
    const isGroup = mode === "group";
    return (
-      <div
-        className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-        onClick={(e) => {
-          if (e.target === e.currentTarget) handleCloseResult();
-        }}
-      >
-        <div
-          ref={panelRef}
-          className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-          onKeyDown={(e) => { if (e.key === "Escape") handleCloseResult(); }}
-        >
+      <AnimatedModal open={true} onClose={handleCloseResult} maxWidth="max-w-lg">
          <div className="px-6 py-8 text-center">
            <div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-green-100 dark:bg-green-900/30">
              <svg className="h-6 w-6 text-green-600 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -183,23 +170,12 @@ export function CreateTaskModal({ onClose, onSuccess }: CreateTaskModalProps) {
              Close
            </button>
          </div>
-        </div>
-      </div>
+      </AnimatedModal>
    );
  }

  return (
-    <div
-      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
-      >
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-lg">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Create Task</h2>
@@ -504,7 +480,6 @@ export function CreateTaskModal({ onClose, onSuccess }: CreateTaskModalProps) {
            </button>
          </div>
        </form>
-      </div>
-    </div>
+    </AnimatedModal>
  );
 }
@@ -1,10 +1,11 @@
 "use client";

-import { useRef, useState } from "react";
+import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { DateInput } from "~/components/ui/DateInput.js";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
 import { trpc } from "~/lib/trpc/client.js";
+import { toDateInputValue } from "~/lib/format.js";

 const RECURRENCE_OPTIONS = [
  { value: "", label: "None" },
@@ -26,15 +27,6 @@ interface ReminderModalProps {
  onSuccess: () => void;
 }

-function toDateInputValue(date: Date | string | null | undefined): string {
-  if (!date) return "";
-  const d = typeof date === "string" ? new Date(date) : date;
-  const y = d.getFullYear();
-  const m = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${y}-${m}-${day}`;
-}
-
 function toTimeInputValue(date: Date | string | null | undefined): string {
  if (!date) return "09:00";
  const d = typeof date === "string" ? new Date(date) : date;
@@ -53,9 +45,6 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
  const [serverError, setServerError] = useState<string | null>(null);
  const [confirmDelete, setConfirmDelete] = useState(false);

-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
  const utils = trpc.useUtils();

  const createMutation = trpc.notification.createReminder.useMutation({
@@ -138,17 +127,8 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";

  return (
-    <div
-      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
-      >
+    <>
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-lg">
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
@@ -303,7 +283,7 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
            </div>
          </div>
        </form>
-      </div>
+    </AnimatedModal>

      {confirmDelete && reminder && (
        <ConfirmDialog
@@ -318,6 +298,6 @@ export function ReminderModal({ reminder, onClose, onSuccess }: ReminderModalPro
          onCancel={() => setConfirmDelete(false)}
        />
      )}
-    </div>
+    </>
  );
 }
@@ -1,12 +1,13 @@
 "use client";

-import { useState, useEffect, useRef } from "react";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { useState } from "react";
 import { OrderType, AllocationType, ProjectStatus } from "@capakraken/shared";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import type { Project } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { toDateInputValue } from "~/lib/format.js";

 const ORDER_TYPE_OPTIONS = [
  { value: "BD", label: "BD" },
@@ -28,14 +29,6 @@ const STATUS_OPTIONS = [
  { value: "CANCELLED", label: "Cancelled" },
 ] as const;

-function formatDateForInput(date: Date | string): string {
-  const d = new Date(date);
-  const year = d.getFullYear();
-  const month = String(d.getMonth() + 1).padStart(2, "0");
-  const day = String(d.getDate()).padStart(2, "0");
-  return `${year}-${month}-${day}`;
-}
-
 interface FormState {
  shortCode: string;
  name: string;
@@ -54,7 +47,7 @@ interface FormState {
 }

 function getDefaultForm(): FormState {
-  const today = formatDateForInput(new Date());
+  const today = toDateInputValue(new Date());
  return {
    shortCode: "",
    name: "",
@@ -81,8 +74,8 @@ function projectToForm(project: Project): FormState {
    allocationType: project.allocationType,
    winProbability: String(project.winProbability),
    budgetEur: String(Math.round(project.budgetCents) / 100),
-    startDate: formatDateForInput(project.startDate),
-    endDate: formatDateForInput(project.endDate),
+    startDate: toDateInputValue(project.startDate),
+    endDate: toDateInputValue(project.endDate),
    status: project.status,
    responsiblePerson: project.responsiblePerson ?? "",
    color: (project as unknown as { color?: string | null }).color ?? "",
@@ -108,9 +101,6 @@ export function ProjectModal({ project, onClose, onSuccess }: ProjectModalProps)
  const [errors, setErrors] = useState<Partial<Record<keyof FormState, string>>>({});
  const [serverError, setServerError] = useState<string | null>(null);

-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
  const { data: utilizationCategories } = trpc.utilizationCategory.list.useQuery(undefined, { staleTime: 60_000 });
  const { data: clientList } = trpc.clientEntity.list.useQuery(undefined, { staleTime: 60_000 });

@@ -139,15 +129,6 @@ export function ProjectModal({ project, onClose, onSuccess }: ProjectModalProps)

  const isLoading = createMutation.isPending || updateMutation.isPending;

-  // Close on Escape key
-  useEffect(() => {
-    function handleKeyDown(e: KeyboardEvent) {
-      if (e.key === "Escape") onClose();
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onClose]);
-
  function setField<K extends keyof FormState>(key: K, value: FormState[K]) {
    setForm((prev) => ({ ...prev, [key]: value }));
    setErrors((prev) => ({ ...prev, [key]: undefined }));
@@ -246,17 +227,8 @@ export function ProjectModal({ project, onClose, onSuccess }: ProjectModalProps)
  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";

  return (
-    <div
-      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-xl mx-4"
-        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
-      >
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-xl" className="mx-4">
+      <div>
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
@@ -609,6 +581,6 @@ export function ProjectModal({ project, onClose, onSuccess }: ProjectModalProps)
          </div>
        </form>
      </div>
-    </div>
+    </AnimatedModal>
  );
 }
@@ -11,7 +11,7 @@ import { DateInput } from "~/components/ui/DateInput.js";
 import { SkillTagInput } from "~/components/ui/SkillTagInput.js";
 import { usePermissions } from "~/hooks/usePermissions.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
-import { formatCents } from "~/lib/format.js";
+import { formatCents, toDateInputValue } from "~/lib/format.js";
 import { ConfettiBurst } from "~/components/ui/ConfettiBurst.js";
 import { SuccessToast } from "~/components/ui/SuccessToast.js";
 import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
@@ -75,15 +75,8 @@ interface WizardState {
  blueprintFieldDefs: BlueprintFieldDefinition[];
 }

-function formatDateForInput(date: Date): string {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
-}
-
 function makeDefaultState(): WizardState {
-  const today = formatDateForInput(new Date());
+  const today = toDateInputValue(new Date());
  return {
    blueprintId: null,
    shortCode: "",
@@ -1,6 +1,7 @@
 "use client";

 import { useState, useCallback, useMemo } from "react";
+import { toIsoDate } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
@@ -87,11 +88,6 @@ interface ScenarioPlannerProps {

 // ── Helpers ──────────────────────────────────────────────────────────────────

-function toISODate(d: Date | string): string {
-  if (typeof d === "string") return d.split("T")[0] ?? d;
-  return d.toISOString().split("T")[0] ?? "";
-}
-
 let nextKey = 1;
 function genKey(): string {
  return `new-${nextKey++}`;
@@ -100,8 +96,8 @@ function genKey(): string {
 // ── Component ────────────────────────────────────────────────────────────────

 export function ScenarioPlanner({ projectId, baseline, resources, roles }: ScenarioPlannerProps) {
-  const projectStart = toISODate(baseline.project.startDate);
-  const projectEnd = toISODate(baseline.project.endDate);
+  const projectStart = toIsoDate(baseline.project.startDate);
+  const projectEnd = toIsoDate(baseline.project.endDate);

  // Initialize scenario rows from baseline assignments
  const initialRows: ScenarioRow[] = baseline.assignments.map((a) => ({
@@ -109,8 +105,8 @@ export function ScenarioPlanner({ projectId, baseline, resources, roles }: Scena
    assignmentId: a.id,
    resourceId: a.resourceId ?? "",
    roleId: a.roleId ?? "",
-    startDate: toISODate(a.startDate),
-    endDate: toISODate(a.endDate),
+    startDate: toIsoDate(a.startDate),
+    endDate: toIsoDate(a.endDate),
    hoursPerDay: a.hoursPerDay,
  }));

@@ -51,7 +51,7 @@ export function AllocationPopover({
  const allocationQuery = trpc.allocation.getAssignmentById.useQuery(
    { id: allocationId },
    {
-      staleTime: 0,
+      staleTime: 10_000,
      enabled: shouldLoadAllocation,
      retry: false,
    },
@@ -133,7 +133,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
  if (isLoading || !ctx) {
    return (
      <PanelShell onClose={onClose}>
-        <div className="flex items-center justify-center h-64 text-gray-400 text-sm">Loading…</div>
+        <div className="flex items-center justify-center h-64 text-gray-500 text-sm">Loading…</div>
      </PanelShell>
    );
  }
@@ -239,17 +239,20 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
          <div className="flex items-center gap-2 flex-shrink-0">
            <span className={clsx(
              "px-2 py-0.5 rounded-full text-xs font-medium",
-              project.orderType === "CHARGEABLE" ? "bg-emerald-100 text-emerald-700" :
-              project.orderType === "BD" ? "bg-violet-100 text-violet-700" :
-              project.orderType === "INTERNAL" ? "bg-blue-100 text-blue-700" :
-              "bg-gray-100 text-gray-600",
+              project.orderType === "CHARGEABLE"
+                ? "bg-emerald-100 text-emerald-700 dark:bg-emerald-900/40 dark:text-emerald-300"
+                : project.orderType === "BD"
+                ? "bg-violet-100 text-violet-700 dark:bg-violet-900/40 dark:text-violet-300"
+                : project.orderType === "INTERNAL"
+                ? "bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"
+                : "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300",
            )}>
              {project.orderType}
            </span>
-            <span className="text-xs text-gray-400">{project.status}</span>
+            <span className="text-xs text-gray-500">{project.status}</span>
          </div>
        </div>
-        <div className="text-xs text-gray-400 mt-1">
+        <div className="text-xs text-gray-500 mt-1">
          {toDateInput(project.startDate)} → {toDateInput(project.endDate)}
        </div>
      </div>
@@ -258,19 +261,19 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {

        {/* Budget section */}
        <section>
-          <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Budget</h3>
+          <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">Budget</h3>
          <div className="bg-gray-50 rounded-xl p-3 space-y-2">
            <div className="flex justify-between text-sm">
-              <span className="text-gray-600">Allocated</span>
-              <span className="font-semibold text-gray-900">€{allocatedEUR} / €{budgetEUR}</span>
+              <span className="text-gray-600 dark:text-gray-300">Allocated</span>
+              <span className="font-semibold text-gray-900 dark:text-gray-100">€{allocatedEUR} / €{budgetEUR}</span>
            </div>
-            <div className="w-full h-2 bg-gray-200 rounded-full overflow-hidden">
+            <div className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
              <div
                className={clsx("h-full rounded-full transition-all", budgetBarColor)}
                style={{ width: `${Math.min(utilPct, 100)}%` }}
              />
            </div>
-            <div className="flex justify-between text-xs text-gray-400">
+            <div className="flex justify-between text-xs text-gray-500">
              <span>{utilPct.toFixed(1)}% utilized</span>
              {budgetStatus && (
                <span>€{(budgetStatus.remainingCents / 100).toFixed(0)} remaining</span>
@@ -281,9 +284,11 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                key={i}
                className={clsx(
                  "text-xs px-2 py-1 rounded-lg",
-                  w.level === "critical" ? "bg-red-50 text-red-700" :
-                  w.level === "warning" ? "bg-amber-50 text-amber-700" :
-                  "bg-blue-50 text-blue-700",
+                  w.level === "critical"
+                    ? "bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300"
+                    : w.level === "warning"
+                    ? "bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+                    : "bg-blue-50 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300",
                )}
              >
                {w.message}
@@ -295,23 +300,31 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
        {/* Demand vs Supply */}
        {effectiveDemands.length > 0 && (
          <section>
-            <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">
+            <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider mb-2">
              Demand vs Supply
            </h3>
            <div className="space-y-2">
              {reqMatches.map(({ demand, matched, fulfilled, partial }) => (
-                <div key={demand.id} className="border border-gray-100 rounded-xl overflow-hidden">
+                <div key={demand.id} className="border border-gray-200 rounded-xl overflow-hidden">
                  <div className={clsx(
                    "flex items-center justify-between px-3 py-2",
-                    fulfilled ? "bg-green-50" : partial ? "bg-amber-50" : "bg-red-50",
+                    fulfilled
+                      ? "bg-green-50 dark:bg-green-900/20"
+                      : partial
+                      ? "bg-amber-50 dark:bg-amber-900/20"
+                      : "bg-red-50 dark:bg-red-900/20",
                  )}>
                    <div>
-                      <span className="text-sm font-medium text-gray-800">{demand.role}</span>
+                      <span className="text-sm font-medium text-gray-800 dark:text-gray-100">{demand.role}</span>
                      <span className="ml-2 text-xs text-gray-500">{demand.requestedHeadcount} needed · {demand.hoursPerDay}h/day</span>
                    </div>
                    <span className={clsx(
                      "text-xs font-semibold",
-                      fulfilled ? "text-green-600" : partial ? "text-amber-600" : "text-red-600",
+                      fulfilled
+                        ? "text-green-600 dark:text-green-400"
+                        : partial
+                        ? "text-amber-600 dark:text-amber-400"
+                        : "text-red-600 dark:text-red-400",
                    )}>
                      {fulfilled ? "✓ Filled" : partial ? `${matched.length}/${demand.requestedHeadcount}` : "Unfilled"}
                    </span>
@@ -319,9 +332,9 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                  {matched.length > 0 && (
                    <div className="px-3 py-1.5 bg-white border-t border-gray-100 space-y-0.5">
                      {matched.map((a) => (
-                        <div key={a.id} className="flex items-center justify-between text-xs text-gray-600">
+                        <div key={a.id} className="flex items-center justify-between text-xs text-gray-700">
                          <span>{a.resource?.displayName}</span>
-                          <span className="text-gray-400">{a.hoursPerDay}h/day</span>
+                          <span className="text-gray-500">{a.hoursPerDay}h/day</span>
                        </div>
                      ))}
                    </div>
@@ -331,7 +344,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
            </div>
            {unmatchedAssignments.length > 0 && (
              <div className="mt-2">
-                <div className="text-xs text-gray-400 mb-1">Unmatched assignments</div>
+                <div className="text-xs text-gray-600 font-medium mb-1">Unmatched assignments</div>
                {unmatchedAssignments.map((a) => (
                  <div key={a.id} className="text-xs text-gray-500 flex justify-between">
                    <span>{a.resource?.displayName} — {a.role}</span>
@@ -346,10 +359,10 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
        {/* Team */}
        <section>
          <div className="flex items-center justify-between mb-2">
-            <h3 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Team</h3>
+            <h3 className="text-xs font-semibold text-gray-600 uppercase tracking-wider">Team</h3>
            <button
              onClick={() => setAddingMember(true)}
-              className="text-xs text-brand-600 hover:text-brand-800 font-medium"
+              className="text-xs text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 font-medium"
            >
              + Add Member
            </button>
@@ -364,23 +377,23 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                placeholder="Search by name or EID…"
                value={resourceSearch}
                onChange={(e) => setResourceSearch(e.target.value)}
-                className="w-full border border-gray-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
+                className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-brand-400"
              />
              {filteredResources.slice(0, 8).map((r) => (
-                  <button
-                    key={r.id}
-                    onClick={() => handleAddMember(r.id)}
-                    disabled={createAssignmentMutation.isPending}
-                    className="w-full text-left px-3 py-2 rounded-lg hover:bg-white text-sm text-gray-800 border border-transparent hover:border-gray-200 transition-colors"
-                  >
+                <button
+                  key={r.id}
+                  onClick={() => handleAddMember(r.id)}
+                  disabled={createAssignmentMutation.isPending}
+                  className="w-full text-left px-3 py-2 rounded-lg hover:bg-white dark:hover:bg-gray-700 text-sm text-gray-800 dark:text-gray-200 border border-transparent hover:border-gray-200 dark:hover:border-gray-600 transition-colors"
+                >
                  <span className="font-medium">{r.displayName}</span>
-                  <span className="text-gray-400 ml-2 text-xs">{r.eid}</span>
-                  {r.chapter && <span className="text-gray-300 ml-1 text-xs">· {r.chapter}</span>}
+                  <span className="text-gray-500 ml-2 text-xs">{r.eid}</span>
+                  {r.chapter && <span className="text-gray-500 ml-1 text-xs">· {r.chapter}</span>}
                </button>
              ))}
              <button
                onClick={() => { setAddingMember(false); setResourceSearch(""); }}
-                className="text-xs text-gray-400 hover:text-gray-600"
+                className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
              >
                Cancel
              </button>
@@ -397,26 +410,26 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
              return (
                <div
                  key={alloc.id}
-                  className="border border-gray-100 rounded-xl p-3 space-y-2 bg-white"
+                  className="border border-gray-200 rounded-xl p-3 space-y-2 bg-white"
                >
                  {/* Resource name + delete */}
                  <div className="flex items-center justify-between">
                    <div>
-                      <span className="text-sm font-medium text-gray-800">{alloc.resource?.displayName}</span>
-                      <span className="text-xs text-gray-400 ml-1.5">{alloc.resource?.eid}</span>
+                      <span className="text-sm font-medium text-gray-800 dark:text-gray-100">{alloc.resource?.displayName}</span>
+                      <span className="text-xs text-gray-500 ml-1.5">{alloc.resource?.eid}</span>
                    </div>
                    {confirmDelete === alloc.id ? (
                      <div className="flex items-center gap-2">
-                        <span className="text-xs text-red-600">Remove?</span>
+                        <span className="text-xs text-red-600 dark:text-red-400">Remove?</span>
                        <button
                          onClick={() => { deleteMutation.mutate({ id: getPlanningEntryMutationId(alloc) }); setConfirmDelete(null); }}
-                          className="text-xs text-red-600 font-medium hover:text-red-800"
+                          className="text-xs text-red-600 dark:text-red-400 font-medium hover:text-red-800 dark:hover:text-red-300"
                        >
                          Yes
                        </button>
                        <button
                          onClick={() => setConfirmDelete(null)}
-                          className="text-xs text-gray-400 hover:text-gray-600"
+                          className="text-xs text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300"
                        >
                          No
                        </button>
@@ -424,7 +437,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                    ) : (
                      <button
                        onClick={() => setConfirmDelete(alloc.id)}
-                        className="text-xs text-red-400 hover:text-red-600"
+                        className="text-xs text-red-400 dark:text-red-500 hover:text-red-600 dark:hover:text-red-400"
                      >
                        Remove
                      </button>
@@ -436,30 +449,30 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                    type="text"
                    value={edit.role ?? alloc.role ?? ""}
                    onChange={(e) => setEdit(alloc.id, { role: e.target.value })}
-                    className="w-full border border-gray-200 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+                    className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 placeholder-gray-400 rounded-lg px-3 py-1.5 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
                    placeholder="Role"
                  />

                  {/* Dates + hours */}
                  <div className="grid grid-cols-3 gap-2">
                    <div>
-                      <label className="block text-[10px] text-gray-400 mb-0.5">Start</label>
+                      <label className="block text-[10px] text-gray-500 mb-0.5">Start</label>
                      <DateInput
                        value={edit.startDate ?? toDateInput(alloc.startDate)}
                        onChange={(v) => setEdit(alloc.id, { startDate: v })}
-                        className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+                        className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
                      />
                    </div>
                    <div>
-                      <label className="block text-[10px] text-gray-400 mb-0.5">End</label>
+                      <label className="block text-[10px] text-gray-500 mb-0.5">End</label>
                      <DateInput
                        value={edit.endDate ?? toDateInput(alloc.endDate)}
                        onChange={(v) => setEdit(alloc.id, { endDate: v })}
-                        className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+                        className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
                      />
                    </div>
                    <div>
-                      <label className="block text-[10px] text-gray-400 mb-0.5">h/day</label>
+                      <label className="block text-[10px] text-gray-500 mb-0.5">h/day</label>
                      <input
                        type="number"
                        min={0.5}
@@ -467,7 +480,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                        step={0.5}
                        value={edit.hoursPerDay ?? alloc.hoursPerDay}
                        onChange={(e) => setEdit(alloc.id, { hoursPerDay: parseFloat(e.target.value) })}
-                        className="w-full border border-gray-200 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
+                        className="w-full border border-gray-200 dark:border-gray-600 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 rounded-lg px-2 py-1 text-xs focus:outline-none focus:ring-2 focus:ring-brand-400"
                      />
                    </div>
                  </div>
@@ -478,9 +491,9 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
                      type="checkbox"
                      checked={inclSat}
                      onChange={(e) => setEdit(alloc.id, { includeSaturday: e.target.checked })}
-                      className="rounded border-gray-300 text-brand-600 focus:ring-brand-400"
+                      className="rounded border-gray-300 dark:border-gray-600 text-brand-600 focus:ring-brand-400"
                    />
-                    <span className="text-xs text-gray-600">Include Saturdays</span>
+                    <span className="text-xs text-gray-600 dark:text-gray-300">Include Saturdays</span>
                  </label>

                  {/* Save button */}
@@ -498,7 +511,7 @@ export function ProjectPanel({ projectId, onClose }: ProjectPanelProps) {
            })}

            {effectiveAssignments.length === 0 && (
-              <div className="text-center py-8 text-sm text-gray-400">
+              <div className="text-center py-8 text-sm text-gray-500">
                No team members yet. Add one above.
              </div>
            )}
@@ -527,7 +540,7 @@ function PanelShell({ children, onClose }: { children: React.ReactNode; onClose:
        <span className="text-sm font-semibold text-gray-700">Project Details</span>
        <button
          onClick={onClose}
-          className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-400 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
+          className="w-7 h-7 rounded-lg flex items-center justify-center text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-colors text-lg leading-none"
        >
          &times;
        </button>
@@ -222,8 +222,9 @@ function TimelineProjectPanelInner({
        toWidth,
        CELL_WIDTH,
        totalCanvasWidth,
+        filters.showWeekends,
      ),
-    [CELL_WIDTH, filters.showVacations, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
+    [CELL_WIDTH, filters.showVacations, filters.showWeekends, toLeft, toWidth, totalCanvasWidth, vacationsByResource],
  );

  const projectRowMetrics = useMemo(() => {
@@ -699,6 +700,7 @@ function renderOpenDemandRow(
  allocDragState: AllocDragState,
  suppressHoverInteractions: boolean,
 ) {
+  const selectedAllocationSet = new Set(multiSelectState.selectedAllocationIds);
  const { visibleOpenDemands, laneMap, rowHeight } = layout;
  if (visibleOpenDemands.length === 0) return null;

@@ -750,7 +752,7 @@ function renderOpenDemandRow(
          // Multi-drag visual offset
          const isMultiDragTarget =
            multiSelectState.isMultiDragging &&
-            multiSelectState.selectedAllocationIds.includes(alloc.id);
+            selectedAllocationSet.has(alloc.id);
          const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
          const multiDragMode = multiSelectState.multiDragMode;

@@ -825,7 +827,7 @@ function renderOpenDemandRow(
                isAllocDragged
                  ? "ring-2 ring-amber-500 z-20"
                  : "hover:ring-2 hover:ring-amber-400 hover:ring-offset-1",
-                multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
+                selectedAllocationSet.has(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
              )}
              style={{
                left: left + 2,
@@ -1042,6 +1044,7 @@ function renderProjectDragHandles(
  multiSelectState: MultiSelectState,
  suppressHoverInteractions: boolean,
 ) {
+  const selectedAllocationSet = new Set(multiSelectState.selectedAllocationIds);
  return allocs.map((alloc) => {
    const allocStart = new Date(alloc.startDate);
    const allocEnd = new Date(alloc.endDate);
@@ -1079,7 +1082,7 @@ function renderProjectDragHandles(
    // Multi-drag visual offset
    const isMultiDragTarget =
      multiSelectState.isMultiDragging &&
-      multiSelectState.selectedAllocationIds.includes(alloc.id);
+      selectedAllocationSet.has(alloc.id);
    const multiDragPx = isMultiDragTarget ? multiSelectState.multiDragDaysDelta * CELL_WIDTH : 0;
    const multiDragMode = multiSelectState.multiDragMode;

@@ -1118,7 +1121,7 @@ function renderProjectDragHandles(
          isAllocDragged
            ? "ring-2 ring-brand-400 z-20"
            : "hover:ring-1 hover:ring-brand-300/70 z-[15]",
-          multiSelectState.selectedAllocationIds.includes(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
+          selectedAllocationSet.has(alloc.id) && "ring-2 ring-sky-500 ring-offset-1 z-20",
        )}
        style={{
          left: left + 2,
@@ -520,6 +520,7 @@ function TimelineResourcePanelInner({
                      onInlineEdit,
                      scrollLeft,
                      containerWidth,
+                      optimisticAllocations.size > 0 ? new Set(optimisticAllocations.keys()) : undefined,
                    )}
                {filters.showVacations &&
                  renderVacationBlocks(
@@ -628,6 +629,7 @@ function renderAllocBlocksFromData(
  onInlineEdit?: (allocationId: string, initialValues: { startDate: Date; endDate: Date; hoursPerDay: number }, barRect: DOMRect) => void,
  scrollLeft = 0,
  containerWidth = 1200,
+  pendingMutationIds?: ReadonlySet<string>,
 ) {
  const OVERSCAN_PX = 10 * CELL_WIDTH;
  const visibleLeft = scrollLeft - OVERSCAN_PX;
@@ -810,6 +812,7 @@ function renderAllocBlocksFromData(
                ? "opacity-30 z-[10]"
                : "transition-[opacity] duration-75 z-[10]",
            selectedAllocationSet.has(alloc.id) && "z-20",
+            pendingMutationIds?.has(alloc.id) && !isBeingDragged && "animate-pulse",
          )}
          style={{
            left: segmentLeft + 2,
@@ -14,11 +14,12 @@ export function pixelsToDays(deltaX: number, cellWidth: number): number {

 /**
 * Shift a date by a given number of days, returning a new Date.
+ * Uses UTC methods to preserve UTC-midnight dates across DST/timezone boundaries.
 * Does not mutate the input.
 */
 export function shiftDate(date: Date, daysDelta: number): Date {
  const result = new Date(date);
-  result.setDate(result.getDate() + daysDelta);
+  result.setUTCDate(result.getUTCDate() + daysDelta);
  return result;
 }

@@ -37,15 +38,15 @@ export function computeDragDates(
  const newEnd = new Date(originalEnd);

  if (mode === "move") {
-    newStart.setDate(newStart.getDate() + daysDelta);
-    newEnd.setDate(newEnd.getDate() + daysDelta);
+    newStart.setUTCDate(newStart.getUTCDate() + daysDelta);
+    newEnd.setUTCDate(newEnd.getUTCDate() + daysDelta);
  } else if (mode === "resize-start") {
-    newStart.setDate(newStart.getDate() + daysDelta);
+    newStart.setUTCDate(newStart.getUTCDate() + daysDelta);
    // Clamp: allow same-day but prevent crossing
    if (newStart > newEnd) newStart.setTime(newEnd.getTime());
  } else {
    // resize-end
-    newEnd.setDate(newEnd.getDate() + daysDelta);
+    newEnd.setUTCDate(newEnd.getUTCDate() + daysDelta);
    // Clamp: allow same-day but prevent crossing
    if (newEnd < newStart) newEnd.setTime(newStart.getTime());
  }
@@ -29,6 +29,7 @@ export function buildVacationBlocksByResource(
  toWidth: (start: Date, end: Date) => number,
  cellWidth: number,
  totalCanvasWidth: number,
+  showWeekends = true,
 ) {
  if (!showVacations) return new Map<string, VacationBlockInfo[]>();

@@ -38,6 +39,13 @@ export function buildVacationBlocksByResource(
    for (const vacation of vacations) {
      const start = new Date(vacation.startDate);
      const end = new Date(vacation.endDate);
+      // When weekends are hidden, skip single-day entries that fall on a weekend
+      // (e.g. Easter Sunday). They would otherwise render at Monday's column,
+      // shadowing Monday's own holiday (e.g. Easter Monday).
+      if (!showWeekends && start.toDateString() === end.toDateString()) {
+        const dow = start.getDay();
+        if (dow === 0 || dow === 6) continue;
+      }
      const left = toLeft(start);
      const width = Math.max(cellWidth, toWidth(start, end));
      if (width <= 0 || left >= totalCanvasWidth) continue;
@@ -126,18 +134,23 @@ export function renderOverbookingBlink(
 ) {
  const overbooked: number[] = [];

+  const allocRanges = allocs.map((a) => {
+    const s = new Date(a.startDate);
+    s.setHours(0, 0, 0, 0);
+    const e = new Date(a.endDate);
+    e.setHours(0, 0, 0, 0);
+    return { s: s.getTime(), e: e.getTime(), h: a.hoursPerDay };
+  });
+
  for (let i = 0; i < dates.length; i++) {
    const d = new Date(dates[i]!);
    d.setHours(0, 0, 0, 0);
    const t = d.getTime();
    let totalH = 0;
-    for (const a of allocs) {
-      const s = new Date(a.startDate);
-      s.setHours(0, 0, 0, 0);
-      const e = new Date(a.endDate);
-      e.setHours(0, 0, 0, 0);
-      if (t >= s.getTime() && t <= e.getTime()) {
-        totalH += a.hoursPerDay * (bookingFactorsByDay?.[i] ?? 1);
+    const factor = bookingFactorsByDay?.[i] ?? 1;
+    for (const { s, e, h } of allocRanges) {
+      if (t >= s && t <= e) {
+        totalH += h * factor;
      }
    }
    if (totalH > (capacityHoursByDay?.[i] ?? 8)) overbooked.push(i);
@@ -1,16 +1,6 @@
-import type { WeekdayAvailability } from "@capakraken/shared";
+import { DAY_KEYS, type WeekdayAvailability } from "@capakraken/shared";
 import type { TimelineAssignmentEntry } from "./TimelineContext.js";

-const DAY_KEYS: (keyof WeekdayAvailability)[] = [
-  "sunday",
-  "monday",
-  "tuesday",
-  "wednesday",
-  "thursday",
-  "friday",
-  "saturday",
-];
-
 export const DEFAULT_TIMELINE_AVAILABILITY: WeekdayAvailability = {
  sunday: 0,
  monday: 8,
@@ -7,15 +7,22 @@ import {

 describe("timelineHover", () => {
  it("matches vacation hits inclusively across differing time components", () => {
+    // Use local-noon timestamps so the date is unambiguous in any timezone
+    // (findVacationHit uses local midnight truncation for comparison)
+    const localNoon = (iso: string) => {
+      const d = new Date(iso);
+      d.setHours(12, 0, 0, 0);
+      return d;
+    };
    const hit = findVacationHit(
      [
        {
          id: "vacation_1",
-          startDate: "2026-04-10T15:00:00.000Z",
-          endDate: "2026-04-12T01:00:00.000Z",
+          startDate: localNoon("2026-04-10"),
+          endDate: localNoon("2026-04-12"),
        },
      ],
-      new Date("2026-04-12T23:59:59.000Z"),
+      localNoon("2026-04-12"),
    );

    expect(hit?.id).toBe("vacation_1");
@@ -1,3 +1,4 @@
+import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
 import type { MutableRefObject, RefObject } from "react";
 import type { TimelineDemandEntry, VacationEntry } from "./TimelineContext.js";
 import type { DemandHoverData } from "./TimelineTooltip.js";
@@ -7,9 +8,10 @@ export type TooltipPosition = {
  top: number;
 };

-function toUtcDayTimestamp(value: Date | string): number {
+function toLocalDayTimestamp(value: Date | string): number {
  const date = new Date(value);
-  return Date.UTC(date.getUTCFullYear(), date.getUTCMonth(), date.getUTCDate());
+  date.setHours(0, 0, 0, 0);
+  return date.getTime();
 }

 export function updateTooltipPosition(
@@ -37,12 +39,12 @@ export function findVacationHit<T extends { startDate: Date | string; endDate: D
  vacations: T[],
  date: Date,
 ): T | null {
-  const target = toUtcDayTimestamp(date);
+  const target = toLocalDayTimestamp(date);

  return (
    vacations.find((vacation) => {
-      const start = toUtcDayTimestamp(vacation.startDate);
-      const end = toUtcDayTimestamp(vacation.endDate);
+      const start = toLocalDayTimestamp(vacation.startDate);
+      const end = toLocalDayTimestamp(vacation.endDate);
      return target >= start && target <= end;
    }) ?? null
  );
@@ -100,7 +102,7 @@ export function scheduleVacationHoverUpdate<T extends { id: string; startDate: D
 export function buildDemandHoverData(demand: TimelineDemandEntry): DemandHoverData {
  const startDate = new Date(demand.startDate);
  const endDate = new Date(demand.endDate);
-  const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / 86_400_000) + 1);
+  const days = Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / MILLISECONDS_PER_DAY) + 1);

  return {
    roleName: demand.roleEntity?.name ?? demand.role ?? "Open demand",
@@ -2,6 +2,7 @@

 import { motion, AnimatePresence } from "framer-motion";
 import { useEffect, useCallback, useRef, type ReactNode } from "react";
+import { useFocusTrap } from "~/hooks/useFocusTrap.js";

 interface AnimatedModalProps {
  open: boolean;
@@ -24,6 +25,8 @@ export function AnimatedModal({
 }: AnimatedModalProps) {
  const panelRef = useRef<HTMLDivElement>(null);

+  useFocusTrap(panelRef, open);
+
  const handleEscape = useCallback(
    (e: KeyboardEvent) => {
      if (e.key === "Escape") onClose();
@@ -1,7 +1,7 @@
 "use client";

-import { useRef, useState } from "react";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { useState } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { VacationType } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { DateInput } from "~/components/ui/DateInput.js";
@@ -85,9 +85,6 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
  const [halfDayPart, setHalfDayPart] = useState<"MORNING" | "AFTERNOON">("MORNING");
  const [serverError, setServerError] = useState<string | null>(null);

-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
-
  const debouncedStart = useDebounce(startDate, 400);
  const debouncedEnd = useDebounce(endDate, 400);

@@ -139,6 +136,7 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces

  const utils = trpc.useUtils();

+  // @ts-ignore TS2589: tRPC infers union type too deeply for CreateVacationRequestSchema with .superRefine()
  const createMutation = trpc.vacation.create.useMutation({
    onSuccess: async () => {
      await utils.vacation.list.invalidate();
@@ -182,17 +180,8 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
  const resourceList: { id: string; displayName: string; eid: string }[] = resources?.resources ?? [];

  return (
-    <div
-      className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
-      onClick={(e) => {
-        if (e.target === e.currentTarget) onClose();
-      }}
-    >
-      <div
-        ref={panelRef}
-        className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
-        onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
-      >
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-lg" className="mx-4">
+      <div>
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
          <h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">Request Vacation</h2>
@@ -467,6 +456,6 @@ export function VacationModal({ resourceId: initialResourceId, onClose, onSucces
          </div>
        </form>
      </div>
-    </div>
+    </AnimatedModal>
  );
 }
@@ -1,5 +1,7 @@
 "use client";

+import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
+
 export const HOLIDAY_SOURCE_LABELS = {
  CALENDAR: "Holiday Calendar",
  LEGACY_PUBLIC_HOLIDAY: "Legacy import",
@@ -32,7 +34,7 @@ export function getRequestedDays(vacation: Pick<VacationExplainabilityEntry, "st

  const start = new Date(vacation.startDate);
  const end = new Date(vacation.endDate);
-  return Math.round((end.getTime() - start.getTime()) / 86_400_000) + 1;
+  return Math.round((end.getTime() - start.getTime()) / MILLISECONDS_PER_DAY) + 1;
 }

 export function getHolidayBasis(vacation: VacationExplainabilityEntry): string[] {
@@ -30,6 +30,7 @@ type FinalizeAllocationReleaseEffectsParams = {
  extractAllocationFragment: (input: MutationInput) => Promise<{ extractedAllocationId: string }>;
  updateAllocation: (input: MutationInput) => void;
  clearPendingOptimisticAllocation: (allocationId: string) => void;
+  onError?: (message: string) => void;
  resolveRelease?: (
    alloc: AllocationDragReleaseLike,
    options: { clickThresholdPx: number; wasShift: boolean },
@@ -52,6 +53,7 @@ export async function finalizeAllocationReleaseEffects({
  extractAllocationFragment,
  updateAllocation,
  clearPendingOptimisticAllocation,
+  onError,
  resolveRelease = resolveAllocationRelease,
  previewOps = { preserve: preserveLivePreview, clear: clearLivePreview },
 }: FinalizeAllocationReleaseEffectsParams): Promise<void> {
@@ -98,7 +100,10 @@ export async function finalizeAllocationReleaseEffects({
      ? { ...pendingSnapshotRef.current, mutationAllocationId }
      : null;
    updateAllocation({ allocationId: mutationAllocationId, startDate: currentStartDate, endDate: currentEndDate });
-  } catch {
+  } catch (err) {
+    console.error("[timeline] finalizeAllocationReleaseEffects error:", err);
+    const message = err instanceof Error ? err.message : "Zuweisung konnte nicht verschoben werden.";
+    onError?.(message);
    clearPendingOptimisticAllocation(activeAllocationId);
  }
 }
@@ -1,3 +1,4 @@
+import { MILLISECONDS_PER_DAY } from "@capakraken/shared";
 import { pixelsToDays } from "~/components/timeline/dragMath.js";

 type RangeStateLike = {
@@ -46,7 +47,7 @@ export function updateRangeSelectionDraft<TState extends RangeStateLike>(
  currentDate.setDate(currentDate.getDate() + daysDelta);

  const prevDelta = state.currentDate
-    ? Math.round((state.currentDate.getTime() - state.startDate.getTime()) / 86400000)
+    ? Math.round((state.currentDate.getTime() - state.startDate.getTime()) / MILLISECONDS_PER_DAY)
    : 0;
  if (daysDelta === prevDelta) return null;

@@ -1,6 +1,7 @@
 "use client";

-import { useCallback, useEffect, useState } from "react";
+import { useCallback } from "react";
+import { useLocalStorage } from "./useLocalStorage.js";

 export type HeatmapColorScheme = "green-red" | "blue-orange" | "purple-yellow" | "mono";

@@ -44,66 +45,28 @@ export function readAppPreferences(): AppPreferences {
  }
 }

-function saveAppPreferences(prefs: AppPreferences) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
-  // Broadcast to all hook instances in the same tab
-  window.dispatchEvent(new CustomEvent<AppPreferences>(CHANGE_EVENT, { detail: prefs }));
-}
-
 export function useAppPreferences() {
-  const [prefs, setPrefs] = useState<AppPreferences>(DEFAULT);
-
-  useEffect(() => {
-    // Sync from storage on mount
-    setPrefs(readAppPreferences());
-
-    // Keep in sync when any hook instance saves a change
-    function handleChange(e: Event) {
-      setPrefs((e as CustomEvent<AppPreferences>).detail);
-    }
-    window.addEventListener(CHANGE_EVENT, handleChange);
-    return () => window.removeEventListener(CHANGE_EVENT, handleChange);
-  }, []);
+  const [prefs, setPrefs] = useLocalStorage<AppPreferences>(STORAGE_KEY, DEFAULT, CHANGE_EVENT);

  const setHideCompletedProjects = useCallback((value: boolean) => {
-    setPrefs((prev) => {
-      const next = { ...prev, hideCompletedProjects: value };
-      saveAppPreferences(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, hideCompletedProjects: value }));
+  }, [setPrefs]);

  const setTimelineDisplayMode = useCallback((value: AppPreferences["timelineDisplayMode"]) => {
-    setPrefs((prev) => {
-      const next = { ...prev, timelineDisplayMode: value };
-      saveAppPreferences(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, timelineDisplayMode: value }));
+  }, [setPrefs]);

  const setHeatmapColorScheme = useCallback((value: HeatmapColorScheme) => {
-    setPrefs((prev) => {
-      const next = { ...prev, heatmapColorScheme: value };
-      saveAppPreferences(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, heatmapColorScheme: value }));
+  }, [setPrefs]);

  const setShowDemandProjects = useCallback((value: boolean) => {
-    setPrefs((prev) => {
-      const next = { ...prev, showDemandProjects: value };
-      saveAppPreferences(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, showDemandProjects: value }));
+  }, [setPrefs]);

  const setBlinkOverbookedDays = useCallback((value: boolean) => {
-    setPrefs((prev) => {
-      const next = { ...prev, blinkOverbookedDays: value };
-      saveAppPreferences(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, blinkOverbookedDays: value }));
+  }, [setPrefs]);

  return { prefs, setHideCompletedProjects, setTimelineDisplayMode, setHeatmapColorScheme, setShowDemandProjects, setBlinkOverbookedDays };
 }
@@ -1,6 +1,7 @@
 "use client";

-import { useCallback, useEffect, useState } from "react";
+import { useCallback, useEffect } from "react";
+import { useLocalStorage } from "./useLocalStorage.js";

 export type ThemeMode = "light" | "dark";
 export type AccentColor = "sky" | "indigo" | "violet" | "emerald" | "rose" | "amber";
@@ -13,17 +14,6 @@ export interface ThemePreferences {
 const STORAGE_KEY = "capakraken_theme";
 const DEFAULT: ThemePreferences = { mode: "light", accent: "sky" };

-function readStorage(): ThemePreferences {
-  if (typeof window === "undefined") return DEFAULT;
-  try {
-    const raw = localStorage.getItem(STORAGE_KEY);
-    if (!raw) return DEFAULT;
-    return { ...DEFAULT, ...(JSON.parse(raw) as Partial<ThemePreferences>) };
-  } catch {
-    return DEFAULT;
-  }
-}
-
 function applyTheme(prefs: ThemePreferences) {
  const html = document.documentElement;
  if (prefs.mode === "dark") html.classList.add("dark");
@@ -32,32 +22,20 @@ function applyTheme(prefs: ThemePreferences) {
 }

 export function useTheme() {
-  const [prefs, setPrefs] = useState<ThemePreferences>(DEFAULT);
+  const [prefs, setPrefs] = useLocalStorage<ThemePreferences>(STORAGE_KEY, DEFAULT);

-  // Read from storage on mount
+  // Apply theme to DOM whenever prefs change
  useEffect(() => {
-    const stored = readStorage();
-    setPrefs(stored);
-    applyTheme(stored);
-  }, []);
+    applyTheme(prefs);
+  }, [prefs]);

  const setMode = useCallback((mode: ThemeMode) => {
-    setPrefs((prev) => {
-      const next = { ...prev, mode };
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-      applyTheme(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, mode }));
+  }, [setPrefs]);

  const setAccent = useCallback((accent: AccentColor) => {
-    setPrefs((prev) => {
-      const next = { ...prev, accent };
-      localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
-      applyTheme(next);
-      return next;
-    });
-  }, []);
+    setPrefs((prev) => ({ ...prev, accent }));
+  }, [setPrefs]);

  return { prefs, setMode, setAccent };
 }
@@ -1,6 +1,6 @@
 "use client";

-import { useCallback, useEffect, useRef, useState, type MutableRefObject } from "react";
+import { useCallback, useDeferredValue, useEffect, useRef, useState, type MutableRefObject } from "react";
 import { trpc } from "~/lib/trpc/client.js";
 import { useInvalidateTimeline } from "./useInvalidatePlanningViews.js";
 import { pixelsToDays } from "~/components/timeline/dragMath.js";
@@ -233,6 +233,7 @@ export function useTimelineDrag({
  onAllocationMoved,
  onShiftClickAlloc,
  onMultiDragComplete,
+  onMutationError,
 }: {
  cellWidthRef: MutableRefObject<number>;
  onShiftApplied?: (projectId: string) => void;
@@ -241,6 +242,7 @@ export function useTimelineDrag({
  onAllocationMoved?: (snapshot: AllocationMovedSnapshot) => void;
  onShiftClickAlloc?: (allocationId: string) => void;
  onMultiDragComplete?: (daysDelta: number, mode: AllocDragMode, selectedIds?: string[]) => void;
+  onMutationError?: (message: string) => void;
 }) {
  const [dragState, setDragState] = useState<DragState>(INITIAL_DRAG_STATE);
  const [allocDragState, setAllocDragState] = useState<AllocDragState>(INITIAL_ALLOC_DRAG);
@@ -278,6 +280,9 @@ export function useTimelineDrag({
  const onMultiDragCompleteRef = useRef(onMultiDragComplete);
  onMultiDragCompleteRef.current = onMultiDragComplete;

+  const onMutationErrorRef = useRef(onMutationError);
+  onMutationErrorRef.current = onMutationError;
+
  const utils = trpc.useUtils();
  const invalidateTimeline = useInvalidateTimeline();

@@ -387,6 +392,9 @@ export function useTimelineDrag({
    setMultiSelectState(nextMultiSelectState);
  }, []);

+  // Defer daysDelta to avoid firing the preview query every pixel during drag
+  const deferredDaysDelta = useDeferredValue(dragState.daysDelta);
+
  // Project-shift preview
  const { data: previewData, isFetching: isPreviewLoading } = trpc.timeline.previewShift.useQuery(
    {
@@ -398,7 +406,7 @@ export function useTimelineDrag({
      enabled:
        dragState.isDragging &&
        dragState.projectId !== null &&
-        dragState.daysDelta !== 0 &&
+        deferredDaysDelta !== 0 &&
        dragState.currentStartDate !== null,
      staleTime: 0,
    },
@@ -447,7 +455,10 @@ export function useTimelineDrag({
        pendingSnapshotRef.current = null;
      }
    },
-    onError: () => {
+    onError: (error) => {
+      console.error("[timeline] updateAllocationInline failed:", error);
+      const message = (error as { message?: string }).message ?? "Zuweisung konnte nicht verschoben werden.";
+      onMutationErrorRef.current?.(message);
      clearPendingOptimisticAllocation();
    },
  });
@@ -653,6 +664,7 @@ export function useTimelineDrag({
            extractAllocationFragment: extractAllocFragmentMutation.mutateAsync,
            updateAllocation: updateAllocMutation.mutate,
            clearPendingOptimisticAllocation,
+            onError: (msg) => onMutationErrorRef.current?.(msg),
          });

          allocDragRef.current = INITIAL_ALLOC_DRAG;
@@ -1,3 +1,16 @@
+/**
+ * Format a Date for an HTML <input type="date"> value (yyyy-mm-dd, local timezone).
+ * Returns "" for null/undefined.
+ */
+export function toDateInputValue(date: Date | string | null | undefined): string {
+  if (!date) return "";
+  const d = typeof date === "string" ? new Date(date) : date;
+  const y = d.getFullYear();
+  const m = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
 /**
 * Format a date as dd/mm/yyyy for display in the UI.
 * Input date inputs (type="date") still use yyyy-mm-dd — this is for rendered text only.