feat(web): overbooking and vacation conflict warnings in AllocationModal

- New ConflictWarningPanel component: amber box with per-day overbooking
  table (capacity / already booked / new / overage) and sky-blue info box
  for vacation overlap. Overbooking section has an 'I understand' checkbox
  that must be ticked before Save is enabled; vacation overlap is
  informational only.
- AllocationModal: fires allocation.checkConflicts reactively when
  resourceId, dates and hoursPerDay are all set. Shows ConflictWarningPanel
  between form body and footer. Passes allowOverbooking: true to the
  createAssignment mutation when the user acknowledges. Acknowledgment
  resets whenever key fields change.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/web/src/components/allocations/AllocationModal.tsx

@@ -1,15 +1,17 @@
 "use client";
 
-import { useState, useEffect, useRef, useMemo } from "react";
-import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { useState, useEffect, useMemo } from "react";
+import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
 import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
 import { AllocationStatus } from "@capakraken/shared";
 import type { AllocationWithDetails, RecurrencePattern } from "@capakraken/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
+import { toDateInputValue } from "~/lib/format.js";
 import { DateInput } from "~/components/ui/DateInput.js";
 import { RecurrenceEditor } from "./RecurrenceEditor.js";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ConflictWarningPanel } from "./ConflictWarningPanel.js";
 
 const ALLOCATION_STATUSES = Object.values(AllocationStatus);
 type EntryKind = "demand" | "assignment";
@@ -20,15 +22,6 @@ interface AllocationModalProps {
   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}`;
-}
-
 export function AllocationModal({ allocation, onClose, onSuccess }: AllocationModalProps) {
   const isEditing = Boolean(allocation);
   const initialEntryKind: EntryKind = allocation && !allocation.resourceId ? "demand" : "assignment";
@@ -56,9 +49,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
     existingMeta?.recurrence as RecurrencePattern | undefined,
   );
   const [serverError, setServerError] = useState<string | null>(null);
-
-  const panelRef = useRef<HTMLDivElement>(null);
-  useFocusTrap(panelRef, true);
+  const [overbookingAcknowledged, setOverbookingAcknowledged] = useState(false);
 
   const { data: resources } = trpc.resource.directory.useQuery(
     { isActive: true, limit: 500 },
@@ -80,6 +71,27 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
     { enabled: shouldCheckOverlap, staleTime: 30_000 },
   );
 
+  // Pre-flight conflict check: overbooking + vacation overlap for this resource/period.
+  const conflictCheckStart = startDate ? new Date(startDate) : null;
+  const conflictCheckEnd = endDate ? new Date(endDate) : null;
+  const shouldCheckConflicts =
+    !isDemandEntry &&
+    !!resourceId &&
+    conflictCheckStart !== null && !isNaN(conflictCheckStart.getTime()) &&
+    conflictCheckEnd !== null && !isNaN(conflictCheckEnd.getTime()) &&
+    hoursPerDay > 0;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { data: conflictResult, isFetching: checkingConflicts } = (trpc.allocation.checkConflicts.useQuery as any)(
+    {
+      resourceId,
+      startDate: conflictCheckStart,
+      endDate: conflictCheckEnd,
+      hoursPerDay,
+      excludeAssignmentId: isEditing && allocation?.id ? allocation.id : undefined,
+    },
+    { enabled: shouldCheckConflicts, staleTime: 15_000 },
+  ) as { data: import("@capakraken/shared").AllocationConflictCheckResult | undefined; isFetching: boolean };
+
   const overlapWarning = useMemo(() => {
     if (!shouldCheckOverlap || !existingAllocations || !startDate || !endDate) return null;
     const formStart = new Date(startDate);
@@ -158,8 +170,13 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
     createAssignmentMutation.isPending ||
     updateMutation.isPending;
 
+  // Block submit when overbooking detected but not yet acknowledged
+  const hasUnacknowledgedOverbooking =
+    !isDemandEntry && conflictResult?.isOverbooking === true && !overbookingAcknowledged;
+
   useEffect(() => {
     setServerError(null);
+    setOverbookingAcknowledged(false);
   }, [resourceId, projectId, roleId, roleFreeText, startDate, endDate, hoursPerDay, status, entryKind]);
 
   function handleSubmit(e: React.FormEvent) {
@@ -245,6 +262,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
         percentage,
         status: status as AllocationStatus,
         metadata,
+        allowOverbooking: overbookingAcknowledged,
       });
     }
   }
@@ -259,19 +277,11 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
   const entryLabel = isDemandEntry ? "Open Demand" : "Assignment";
 
   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();
-      }}
-    >
+    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-xl" className="mx-4">
       <div
-        ref={panelRef}
         role="dialog"
         aria-modal="true"
         data-testid="allocation-modal"
-        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(); }}
       >
         {/* Header */}
         <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -506,13 +516,31 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
             </div>
           )}
 
-          {/* Overlap warning */}
+          {/* Overlap warning (same-project duplicate) */}
           {overlapWarning && (
             <div className="rounded-lg border border-amber-300 bg-amber-50 px-3 py-2 text-sm text-amber-800 dark:border-amber-700 dark:bg-amber-950/30 dark:text-amber-300">
               {"\u26A0"} {overlapWarning}
             </div>
           )}
 
+          {/* Overbooking + vacation conflict panel */}
+          {conflictResult && (
+            <ConflictWarningPanel
+              result={conflictResult}
+              isLoading={checkingConflicts}
+              acknowledged={overbookingAcknowledged}
+              onAcknowledge={setOverbookingAcknowledged}
+            />
+          )}
+          {!conflictResult && checkingConflicts && (
+            <ConflictWarningPanel
+              result={{ isOverbooking: false, overbooking: null, vacationOverlap: [], hasVacationOverlap: false }}
+              isLoading={true}
+              acknowledged={false}
+              onAcknowledge={() => {}}
+            />
+          )}
+
           {/* Footer */}
           <div className="flex items-center justify-end gap-3 pt-2">
             <button
@@ -525,7 +553,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
             </button>
             <button
               type="submit"
-              disabled={isPending}
+              disabled={isPending || hasUnacknowledgedOverbooking}
+              title={hasUnacknowledgedOverbooking ? "Acknowledge the overbooking warning above to proceed" : undefined}
               className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
             >
               {isPending ? "Saving…" : "Save"}
@@ -533,6 +562,6 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
           </div>
         </form>
       </div>
-    </div>
+    </AnimatedModal>
   );
 }

apps/web/src/components/allocations/ConflictWarningPanel.tsx

@@ -0,0 +1,130 @@
+"use client";
+
+import { useState } from "react";
+import type { AllocationConflictCheckResult } from "@capakraken/shared";
+
+const INITIAL_ROWS_SHOWN = 5;
+
+interface ConflictWarningPanelProps {
+  result: AllocationConflictCheckResult;
+  isLoading: boolean;
+  acknowledged: boolean;
+  onAcknowledge: (v: boolean) => void;
+}
+
+export function ConflictWarningPanel({
+  result,
+  isLoading,
+  acknowledged,
+  onAcknowledge,
+}: ConflictWarningPanelProps) {
+  const [showAllDays, setShowAllDays] = useState(false);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/40 px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
+        <span className="inline-block h-3 w-3 shrink-0 animate-spin rounded-full border-2 border-gray-400 border-t-transparent" />
+        Checking availability…
+      </div>
+    );
+  }
+
+  const hasAny = result.isOverbooking || result.hasVacationOverlap;
+  if (!hasAny) return null;
+
+  const conflictDays = result.overbooking?.conflictDays ?? [];
+  const visibleDays = showAllDays ? conflictDays : conflictDays.slice(0, INITIAL_ROWS_SHOWN);
+  const hiddenCount = conflictDays.length - INITIAL_ROWS_SHOWN;
+
+  return (
+    <div className="space-y-3">
+      {/* ── Overbooking ─────────────────────────────────────────────── */}
+      {result.isOverbooking && result.overbooking && (
+        <div className="rounded-lg border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30 p-4 text-sm">
+          <p className="font-semibold text-amber-800 dark:text-amber-300">
+            ⚠ Overbooking on {result.overbooking.totalConflictDays} day
+            {result.overbooking.totalConflictDays !== 1 ? "s" : ""}
+            {" "}(up to {result.overbooking.maxOverbookPercent}% over capacity)
+          </p>
+          <p className="mt-1 text-amber-700 dark:text-amber-400">
+            The resource already has allocations that exceed their daily capacity on the following days.
+            You can still save — check the box below to confirm.
+          </p>
+
+          {/* Day-by-day table */}
+          <div className="mt-3 overflow-x-auto">
+            <table className="w-full text-xs text-left text-amber-800 dark:text-amber-300">
+              <thead>
+                <tr className="border-b border-amber-200 dark:border-amber-800">
+                  <th className="pb-1 pr-4 font-medium">Date</th>
+                  <th className="pb-1 pr-4 font-medium text-right">Capacity</th>
+                  <th className="pb-1 pr-4 font-medium text-right">Booked</th>
+                  <th className="pb-1 pr-4 font-medium text-right">New</th>
+                  <th className="pb-1 font-medium text-right">Over</th>
+                </tr>
+              </thead>
+              <tbody>
+                {visibleDays.map((day) => (
+                  <tr key={day.date} className="border-b border-amber-100 dark:border-amber-900/50 last:border-0">
+                    <td className="py-1 pr-4">{day.date}</td>
+                    <td className="py-1 pr-4 text-right">{day.availableHours}h</td>
+                    <td className="py-1 pr-4 text-right">{day.existingHours}h</td>
+                    <td className="py-1 pr-4 text-right">{day.requestedHours}h</td>
+                    <td className="py-1 text-right font-semibold text-red-600 dark:text-red-400">
+                      +{day.overageHours.toFixed(1)}h
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {hiddenCount > 0 && (
+            <button
+              type="button"
+              onClick={() => setShowAllDays((v) => !v)}
+              className="mt-2 text-xs font-medium text-amber-700 dark:text-amber-400 underline underline-offset-2"
+            >
+              {showAllDays ? "Show less" : `Show ${hiddenCount} more day${hiddenCount !== 1 ? "s" : ""}…`}
+            </button>
+          )}
+
+          {/* Acknowledgment checkbox */}
+          <label className="mt-3 flex cursor-pointer items-center gap-2 select-none">
+            <input
+              type="checkbox"
+              checked={acknowledged}
+              onChange={(e) => onAcknowledge(e.target.checked)}
+              className="rounded border-amber-400 dark:border-amber-600 text-amber-600 focus:ring-amber-500"
+            />
+            <span className="text-amber-800 dark:text-amber-300 text-xs font-medium">
+              I understand and want to proceed with overbooking
+            </span>
+          </label>
+        </div>
+      )}
+
+      {/* ── Vacation overlap ─────────────────────────────────────────── */}
+      {result.hasVacationOverlap && (
+        <div className="rounded-lg border border-sky-200 dark:border-sky-800 bg-sky-50 dark:bg-sky-950/30 p-4 text-sm">
+          <p className="font-semibold text-sky-800 dark:text-sky-300">
+            ℹ Resource has approved leave during this period
+          </p>
+          <p className="mt-1 text-sky-700 dark:text-sky-400">
+            Vacation days are excluded from billable hours and daily cost calculations.
+          </p>
+          <ul className="mt-2 space-y-1">
+            {result.vacationOverlap.map((v, i) => (
+              <li key={i} className="flex items-center gap-2 text-xs text-sky-700 dark:text-sky-400">
+                <span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-sky-400" />
+                <span className="font-medium capitalize">{v.type.replace(/_/g, " ").toLowerCase()}</span>
+                {v.isHalfDay && <span className="text-sky-500">(half-day)</span>}
+                <span>{v.startDate === v.endDate ? v.startDate : `${v.startDate} – ${v.endDate}`}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}