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>
   );
 }