rename(phase 1): CapaKraken → Nexus across code, UI, docs, CI

- @capakraken/* → @nexus/* across 12 packages (root + 11 workspaces), 1551 import lines migrated via codemod - User-visible brand strings renamed (emails, page titles, PWA manifest, mobile header, MFA backup-codes header, tooltips, signin page, invite page, weekly digest, install prompt) - TOTP issuer "CapaKraken" → "Nexus" (existing secrets still valid; re-enrollment relabels them in users' authenticator apps) - Function rename: assertCapaKrakenDbTarget → assertNexusDbTarget - LocalStorage migration shim in apps/web/src/app/layout.tsx copies capakraken_* → nexus_* on first load (guarded by nexus_migrated_v1 sentinel; runs once per browser, then never again) - Service-worker cache name capakraken-v2 → nexus-v2 with one-time caches.delete('capakraken-v2') from the same shim - Email-domain fixtures @capakraken.{dev,app} → @nexus.{dev,app} in seed data, e2e specs, SMTP default fallback - Dockerfile.dev / Dockerfile.prod / all .github/workflows/*.yml pnpm --filter @capakraken/* → @nexus/* - README, CLAUDE.md, LEARNINGS.md, all docs/*.md, .env.example, tooling/deploy/.env.production.example brand sweep Phase 1 deliberately leaves untouched (handled in Phase 3 cutover): - PostgreSQL DB name "capakraken" and POSTGRES_USER "capakraken" - Volume names capakraken_pgdata etc. - Compose project name "capakraken" / "capakraken-prod" - db-target-guard default expectedDatabase - env-var CAPAKRAKEN_EXPECTED_DB_NAME - Container DNS names in docker-compose.ci.yml Quality gates green: pnpm typecheck (7/7), pnpm test:unit (7/7), pnpm lint (0 errors), check:exports/imports/architecture all pass. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
2026-05-21 15:10:44 +02:00
parent d9a7ec0338
commit 4a5edeef3e
941 changed files with 24475 additions and 16760 deletions
@@ -1,4 +1,4 @@
-import type { AllocationWithDetails, AllocationStatus } from "@capakraken/shared";
+import type { AllocationWithDetails, AllocationStatus } from "@nexus/shared";
 import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
 import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
 import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
@@ -1,4 +1,4 @@
-import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
+import type { AllocationWithDetails, ColumnDef } from "@nexus/shared";
 import type { CollapsedAllocationGroups } from "./allocationGroupState.js";
 import { formatDate } from "~/lib/format.js";
 import { AllocationRow } from "./AllocationRow.js";
@@ -4,8 +4,8 @@ import { useState, useEffect, useMemo } from "react";
 import { useDebounce } from "~/hooks/useDebounce.js";
 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 { AllocationStatus } from "@nexus/shared";
+import type { AllocationWithDetails, RecurrencePattern } from "@nexus/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
 import { toDateInputValue } from "~/lib/format.js";
@@ -26,7 +26,8 @@ interface AllocationModalProps {

 export function AllocationModal({ allocation, onClose, onSuccess }: AllocationModalProps) {
  const isEditing = Boolean(allocation);
-  const initialEntryKind: EntryKind = allocation && !allocation.resourceId ? "demand" : "assignment";
+  const initialEntryKind: EntryKind =
+    allocation && !allocation.resourceId ? "demand" : "assignment";
  const [entryKind, setEntryKind] = useState<EntryKind>(initialEntryKind);
  const isDemandEntry = entryKind === "demand";

@@ -57,14 +58,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
    { isActive: true, limit: 500 },
    { staleTime: 60_000 },
  );
-  const { data: projects } = trpc.project.list.useQuery(
-    { limit: 500 },
-    { staleTime: 60_000 },
-  );
-  const { data: rolesData } = trpc.role.list.useQuery(
-    { isActive: true },
-    { staleTime: 60_000 },
-  );
+  const { data: projects } = trpc.project.list.useQuery({ limit: 500 }, { staleTime: 60_000 });
+  const { data: rolesData } = trpc.role.list.useQuery({ isActive: true }, { staleTime: 60_000 });

  // Fetch existing allocations for the selected resource+project to detect overlaps
  const shouldCheckOverlap = !isDemandEntry && !!resourceId && !!projectId;
@@ -85,11 +80,15 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
  const shouldCheckConflicts =
    !isDemandEntry &&
    !!debouncedResourceId &&
-    conflictCheckStart !== null && !isNaN(conflictCheckStart.getTime()) &&
-    conflictCheckEnd !== null && !isNaN(conflictCheckEnd.getTime()) &&
+    conflictCheckStart !== null &&
+    !isNaN(conflictCheckStart.getTime()) &&
+    conflictCheckEnd !== null &&
+    !isNaN(conflictCheckEnd.getTime()) &&
    debouncedHoursPerDay > 0;
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const { data: conflictResult, isFetching: checkingConflicts } = (trpc.allocation.checkConflicts.useQuery as any)(
+  const { data: conflictResult, isFetching: checkingConflicts } = (
+    trpc.allocation.checkConflicts.useQuery as any
+  )(
    {
      resourceId: debouncedResourceId,
      startDate: conflictCheckStart,
@@ -98,7 +97,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
      excludeAssignmentId: isEditing && allocation?.id ? allocation.id : undefined,
    },
    { enabled: shouldCheckConflicts, staleTime: 15_000 },
-  ) as { data: import("@capakraken/shared").AllocationConflictCheckResult | undefined; isFetching: boolean };
+  ) as {
+    data: import("@nexus/shared").AllocationConflictCheckResult | undefined;
+    isFetching: boolean;
+  };

  const overlapWarning = useMemo(() => {
    if (!shouldCheckOverlap || !existingAllocations || !startDate || !endDate) return null;
@@ -106,7 +108,17 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
    const formEnd = new Date(endDate);
    if (isNaN(formStart.getTime()) || isNaN(formEnd.getTime())) return null;

-    const allocList = (existingAllocations as { allocations?: Array<{ id: string; resourceId?: string | null; startDate: string | Date; endDate: string | Date }> }).allocations ?? [];
+    const allocList =
+      (
+        existingAllocations as {
+          allocations?: Array<{
+            id: string;
+            resourceId?: string | null;
+            startDate: string | Date;
+            endDate: string | Date;
+          }>;
+        }
+      ).allocations ?? [];
    for (const existing of allocList) {
      // Skip the allocation being edited
      if (isEditing && allocation && existing.id === allocation.id) continue;
@@ -121,7 +133,15 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
      }
    }
    return null;
-  }, [shouldCheckOverlap, existingAllocations, startDate, endDate, isEditing, allocation, resourceId]);
+  }, [
+    shouldCheckOverlap,
+    existingAllocations,
+    startDate,
+    endDate,
+    isEditing,
+    allocation,
+    resourceId,
+  ]);

  const invalidatePlanningViews = useInvalidatePlanningViews();

@@ -185,7 +205,17 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
  useEffect(() => {
    setServerError(null);
    setOverbookingAcknowledged(false);
-  }, [resourceId, projectId, roleId, roleFreeText, startDate, endDate, hoursPerDay, status, entryKind]);
+  }, [
+    resourceId,
+    projectId,
+    roleId,
+    roleFreeText,
+    startDate,
+    endDate,
+    hoursPerDay,
+    status,
+    entryKind,
+  ]);

  function handleSubmit(e: React.FormEvent) {
    e.preventDefault();
@@ -222,7 +252,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
    // Determine role string from roleId if set
    const rolesList = rolesData ?? [];
    const selectedRole = rolesList.find((r) => r.id === roleId);
-    const roleString = selectedRole ? selectedRole.name : (roleFreeText || undefined);
+    const roleString = selectedRole ? selectedRole.name : roleFreeText || undefined;

    const percentage = Math.min(100, Math.round((hoursPerDay / 8) * 100));

@@ -230,12 +260,14 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
      updateMutation.mutate({
        id: getPlanningEntryMutationId(allocation),
        data: {
-          resourceId: isDemandEntry ? undefined : (resourceId || undefined),
+          resourceId: isDemandEntry ? undefined : resourceId || undefined,
          projectId,
          role: roleString,
          roleId: roleId || undefined,
          headcount: isDemandEntry ? headcount : 1,
-          ...(isDemandEntry && budgetEur ? { budgetCents: Math.round(parseFloat(budgetEur) * 100) } : {}),
+          ...(isDemandEntry && budgetEur
+            ? { budgetCents: Math.round(parseFloat(budgetEur) * 100) }
+            : {}),
          startDate: start,
          endDate: end,
          hoursPerDay,
@@ -279,18 +311,22 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
    "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
  const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";

-  const resourceList = (resources?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
-  const projectList = (projects?.projects ?? []) as Array<{ id: string; name: string; shortCode: string }>;
+  const resourceList = (resources?.resources ?? []) as Array<{
+    id: string;
+    displayName: string;
+    eid: string;
+  }>;
+  const projectList = (projects?.projects ?? []) as Array<{
+    id: string;
+    name: string;
+    shortCode: string;
+  }>;
  const rolesList = (rolesData ?? []) as Array<{ id: string; name: string; color: string | null }>;
  const entryLabel = isDemandEntry ? "Open Demand" : "Assignment";

  return (
    <AnimatedModal open={true} onClose={onClose} maxWidth="max-w-xl" className="mx-4">
-      <div
-        role="dialog"
-        aria-modal="true"
-        data-testid="allocation-modal"
-      >
+      <div role="dialog" aria-modal="true" data-testid="allocation-modal">
        {/* 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">
@@ -333,7 +369,9 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
            {isDemandEntry && (
              <div className="flex items-center gap-3">
                <div className="flex items-center gap-2">
-                  <label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">Headcount:</label>
+                  <label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
+                    Headcount:
+                  </label>
                  <input
                    type="number"
                    value={headcount}
@@ -344,7 +382,9 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
                  />
                </div>
                <div className="flex items-center gap-2">
-                  <label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">Budget (EUR):</label>
+                  <label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
+                    Budget (EUR):
+                  </label>
                  <input
                    type="number"
                    value={budgetEur}
@@ -363,7 +403,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
          {!isDemandEntry && (
            <div>
              <label htmlFor="modal-resource" className={labelClass}>
-                Resource <span className="text-red-500">*</span><InfoTooltip content="The person to assign. Their LCR determines the daily cost of this allocation." />
+                Resource <span className="text-red-500">*</span>
+                <InfoTooltip content="The person to assign. Their LCR determines the daily cost of this allocation." />
              </label>
              <select
                id="modal-resource"
@@ -385,7 +426,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
          {/* Project */}
          <div>
            <label htmlFor="modal-project" className={labelClass}>
-              Project <span className="text-red-500">*</span><InfoTooltip content="The project this time block is allocated to. Costs roll up to the project budget." />
+              Project <span className="text-red-500">*</span>
+              <InfoTooltip content="The project this time block is allocated to. Costs roll up to the project budget." />
            </label>
            <select
              id="modal-project"
@@ -405,7 +447,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo

          {/* Role */}
          <div>
-            <label htmlFor="modal-role" className={labelClass}>Role<InfoTooltip content="Role for this allocation. Pick a predefined role or type a custom one." /></label>
+            <label htmlFor="modal-role" className={labelClass}>
+              Role
+              <InfoTooltip content="Role for this allocation. Pick a predefined role or type a custom one." />
+            </label>
            <select
              id="modal-role"
              value={roleId}
@@ -434,35 +479,43 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
          {/* Dates */}
          <div>
            <div className="flex items-center justify-between mb-1">
-              <span className={labelClass}>Date Range <span className="text-red-500">*</span></span>
-              <DateRangePresets onSelect={(s, e) => { setStartDate(s); setEndDate(e); }} />
+              <span className={labelClass}>
+                Date Range <span className="text-red-500">*</span>
+              </span>
+              <DateRangePresets
+                onSelect={(s, e) => {
+                  setStartDate(s);
+                  setEndDate(e);
+                }}
+              />
            </div>
            <div className="grid grid-cols-2 gap-4">
-            <div>
-              <label htmlFor="modal-start" className={labelClass}>
-                Start Date <InfoTooltip content="First day of this allocation period (inclusive)." />
-              </label>
-              <DateInput
-                id="modal-start"
-                value={startDate}
-                onChange={setStartDate}
-                className={inputClass}
-                required
-              />
-            </div>
-            <div>
-              <label htmlFor="modal-end" className={labelClass}>
-                End Date <InfoTooltip content="Last day of this allocation period (inclusive)." />
-              </label>
-              <DateInput
-                id="modal-end"
-                value={endDate}
-                onChange={setEndDate}
-                min={startDate}
-                className={inputClass}
-                required
-              />
-            </div>
+              <div>
+                <label htmlFor="modal-start" className={labelClass}>
+                  Start Date{" "}
+                  <InfoTooltip content="First day of this allocation period (inclusive)." />
+                </label>
+                <DateInput
+                  id="modal-start"
+                  value={startDate}
+                  onChange={setStartDate}
+                  className={inputClass}
+                  required
+                />
+              </div>
+              <div>
+                <label htmlFor="modal-end" className={labelClass}>
+                  End Date <InfoTooltip content="Last day of this allocation period (inclusive)." />
+                </label>
+                <DateInput
+                  id="modal-end"
+                  value={endDate}
+                  onChange={setEndDate}
+                  min={startDate}
+                  className={inputClass}
+                  required
+                />
+              </div>
            </div>
          </div>

@@ -470,7 +523,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
          <div className="grid grid-cols-2 gap-4">
            <div>
              <label htmlFor="modal-hours" className={labelClass}>
-                Hours / Day<InfoTooltip content="Working hours per day. Total cost = LCR x hours/day x working days. Vacation days are excluded." />
+                Hours / Day
+                <InfoTooltip content="Working hours per day. Total cost = LCR x hours/day x working days. Vacation days are excluded." />
              </label>
              <input
                id="modal-hours"
@@ -485,7 +539,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
            </div>
            <div>
              <label htmlFor="modal-status" className={labelClass}>
-                Status<InfoTooltip content="PROPOSED = draft/request · CONFIRMED = approved · ACTIVE = in progress · COMPLETED = done · CANCELLED = removed." />
+                Status
+                <InfoTooltip content="PROPOSED = draft/request · CONFIRMED = approved · ACTIVE = in progress · COMPLETED = done · CANCELLED = removed." />
              </label>
              <select
                id="modal-status"
@@ -514,7 +569,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
                }}
                className="rounded border-gray-300 dark:border-gray-600"
              />
-              <span className="font-medium text-gray-700 dark:text-gray-300">Recurring schedule</span><InfoTooltip content="Enable to repeat this allocation on specific days (e.g. every Monday/Wednesday). Hours per day applies on active days only." />
+              <span className="font-medium text-gray-700 dark:text-gray-300">
+                Recurring schedule
+              </span>
+              <InfoTooltip content="Enable to repeat this allocation on specific days (e.g. every Monday/Wednesday). Hours per day applies on active days only." />
            </label>
            {isRecurring && (
              <div className="mt-2">
@@ -548,7 +606,12 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
          )}
          {!conflictResult && checkingConflicts && (
            <ConflictWarningPanel
-              result={{ isOverbooking: false, overbooking: null, vacationOverlap: [], hasVacationOverlap: false }}
+              result={{
+                isOverbooking: false,
+                overbooking: null,
+                vacationOverlap: [],
+                hasVacationOverlap: false,
+              }}
              isLoading={true}
              acknowledged={false}
              onAcknowledge={() => {}}
@@ -568,7 +631,11 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
            <button
              type="submit"
              disabled={isPending || hasUnacknowledgedOverbooking}
-              title={hasUnacknowledgedOverbooking ? "Acknowledge the overbooking warning above to proceed" : undefined}
+              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"}
@@ -1,4 +1,4 @@
-import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
+import type { AllocationWithDetails, ColumnDef } from "@nexus/shared";
 import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";

 const STATUS_LEFT_BORDER: Record<string, string> = {
@@ -13,8 +13,8 @@ import type {
  AllocationWithDetails,
  ColumnDef,
  AllocationStatus,
-} from "@capakraken/shared";
-import { ALLOCATION_COLUMNS } from "@capakraken/shared";
+} from "@nexus/shared";
+import { ALLOCATION_COLUMNS } from "@nexus/shared";
 import { useSelection } from "~/hooks/useSelection.js";
 import { FilterBar } from "~/components/ui/FilterBar.js";
 import { FilterChips } from "~/components/ui/FilterChips.js";
@@ -328,7 +328,7 @@ export function AllocationsClient() {

  // ─── View mode: grouped (default) vs flat ──────────────────────────────────
  const [viewMode, setViewMode] = useLocalStorage<"grouped" | "flat">(
-    "capakraken:allocations:viewMode",
+    "nexus:allocations:viewMode",
    "grouped",
  );
  const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(() =>
@@ -1,7 +1,7 @@
 "use client";

 import { useState } from "react";
-import type { AllocationConflictCheckResult } from "@capakraken/shared";
+import type { AllocationConflictCheckResult } from "@nexus/shared";

 const INITIAL_ROWS_SHOWN = 5;

@@ -43,12 +43,12 @@ export function ConflictWarningPanel({
        <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)
+            {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.
+            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 */}
@@ -65,7 +65,10 @@ export function ConflictWarningPanel({
              </thead>
              <tbody>
                {visibleDays.map((day) => (
-                  <tr key={day.date} className="border-b border-amber-100 dark:border-amber-900/50 last:border-0">
+                  <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>
@@ -85,7 +88,9 @@ export function ConflictWarningPanel({
              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" : ""}…`}
+              {showAllDays
+                ? "Show less"
+                : `Show ${hiddenCount} more day${hiddenCount !== 1 ? "s" : ""}…`}
            </button>
          )}

@@ -115,11 +120,18 @@ export function ConflictWarningPanel({
          </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">
+              <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>
+                <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>
+                <span>
+                  {v.startDate === v.endDate ? v.startDate : `${v.startDate} – ${v.endDate}`}
+                </span>
              </li>
            ))}
          </ul>
@@ -1,7 +1,7 @@
 "use client";

 import { useRef, useState, useMemo } from "react";
-import { AllocationStatus } from "@capakraken/shared";
+import { AllocationStatus } from "@nexus/shared";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
 import { formatCents, formatDateMedium } from "~/lib/format.js";
 import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
@@ -75,7 +75,11 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
  const { data: resources } = trpc.resource.listStaff.useQuery(
    { isActive: true, search: debouncedSearch || undefined, limit: 50 },
    { staleTime: 15_000 },
-  ) as { data: { resources: Array<{ id: string; displayName: string; eid: string; lcrCents: number }> } | undefined };
+  ) as {
+    data:
+      | { resources: Array<{ id: string; displayName: string; eid: string; lcrCents: number }> }
+      | undefined;
+  };

  const availabilityQuery = trpc.allocation.checkResourceAvailability.useQuery(
    {
@@ -118,17 +122,20 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
    const lcrCents = selectedResource.lcrCents ?? 0;
    const estimatedCostCents = Math.round(lcrCents * avail.totalAvailableHours);

-    setPlanned((prev) => [...prev, {
-      resourceId: selectedResource.id,
-      resourceName: selectedResource.displayName,
-      eid: selectedResource.eid,
-      hoursPerDay,
-      availableHours: avail.totalAvailableHours,
-      availableDays: avail.availableDays,
-      conflictDays: avail.conflictDays,
-      coveragePercent: avail.coveragePercent,
-      estimatedCostCents,
-    }]);
+    setPlanned((prev) => [
+      ...prev,
+      {
+        resourceId: selectedResource.id,
+        resourceName: selectedResource.displayName,
+        eid: selectedResource.eid,
+        hoursPerDay,
+        availableHours: avail.totalAvailableHours,
+        availableDays: avail.availableDays,
+        conflictDays: avail.conflictDays,
+        coveragePercent: avail.coveragePercent,
+        estimatedCostCents,
+      },
+    ]);

    // Reset for next resource
    setResourceId("");
@@ -160,7 +167,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
          status: AllocationStatus.PROPOSED,
        });
      } catch (err) {
-        setServerError(`Failed to assign ${p.resourceName}: ${err instanceof Error ? err.message : String(err)}`);
+        setServerError(
+          `Failed to assign ${p.resourceName}: ${err instanceof Error ? err.message : String(err)}`,
+        );
        setSubmitting(false);
        return;
      }
@@ -177,12 +186,16 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
  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 && !submitting) onClose(); }}
+      onClick={(e) => {
+        if (e.target === e.currentTarget && !submitting) 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" && !submitting) onClose(); }}
+        onKeyDown={(e) => {
+          if (e.key === "Escape" && !submitting) onClose();
+        }}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -190,21 +203,34 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
            {phase === "plan" ? "Plan Demand Assignment" : "Confirm Assignments"}
            <InfoTooltip content="Fill an open demand by assigning one or more real resources to a placeholder staffing requirement. Each assignment creates a new allocation." />
          </h2>
-          <button type="button" onClick={onClose} disabled={submitting} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none disabled:opacity-30">&times;</button>
+          <button
+            type="button"
+            onClick={onClose}
+            disabled={submitting}
+            className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none disabled:opacity-30"
+          >
+            &times;
+          </button>
        </div>

        <div className="px-6 pt-4 pb-2 space-y-3">
          {/* Demand summary */}
          <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 flex items-start gap-3">
-            <div className="w-3 h-3 rounded-full mt-1 flex-shrink-0" style={{ backgroundColor: roleColor }} />
+            <div
+              className="w-3 h-3 rounded-full mt-1 flex-shrink-0"
+              style={{ backgroundColor: roleColor }}
+            />
            <div className="flex-1">
              <div className="font-medium text-gray-900 dark:text-gray-100">{roleName}</div>
              <div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
-                {allocation.project?.name} · {formatDateMedium(allocation.startDate)} – {formatDateMedium(allocation.endDate)}
+                {allocation.project?.name} · {formatDateMedium(allocation.startDate)} –{" "}
+                {formatDateMedium(allocation.endDate)}
              </div>
              <div className="text-xs text-gray-500 dark:text-gray-400">
                {allocation.hoursPerDay}h/day · {totalDemandHours.toLocaleString()}h total
-                {allocation.budgetCents && allocation.budgetCents > 0 ? ` · Budget: ${formatCents(allocation.budgetCents)} EUR` : ""}
+                {allocation.budgetCents && allocation.budgetCents > 0
+                  ? ` · Budget: ${formatCents(allocation.budgetCents)} EUR`
+                  : ""}
              </div>
            </div>
          </div>
@@ -213,7 +239,10 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
          <div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
            <div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1.5">
              <span>Demand coverage</span>
-              <span>{Math.round(consumedHours)}h / {totalDemandHours}h ({totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%)</span>
+              <span>
+                {Math.round(consumedHours)}h / {totalDemandHours}h (
+                {totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%)
+              </span>
            </div>
            <div className="w-full h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex">
              {planned.map((r, i) => (
@@ -234,11 +263,18 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
              <div className="mt-2 space-y-1">
                {planned.map((r, i) => (
                  <div key={r.resourceId} className="flex items-center gap-2 text-xs group">
-                    <div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: `hsl(${(i * 60 + 200) % 360}, 60%, 55%)` }} />
-                    <span className="text-gray-700 dark:text-gray-300 font-medium">{r.resourceName}</span>
+                    <div
+                      className="w-2 h-2 rounded-full flex-shrink-0"
+                      style={{ backgroundColor: `hsl(${(i * 60 + 200) % 360}, 60%, 55%)` }}
+                    />
+                    <span className="text-gray-700 dark:text-gray-300 font-medium">
+                      {r.resourceName}
+                    </span>
                    <span className="text-gray-400">({r.eid})</span>
                    <span className="text-gray-500">{r.hoursPerDay}h/day</span>
-                    <span className="ml-auto text-gray-500">{Math.round(r.availableHours)}h · {r.coveragePercent}%</span>
+                    <span className="ml-auto text-gray-500">
+                      {Math.round(r.availableHours)}h · {r.coveragePercent}%
+                    </span>
                    {phase === "plan" && (
                      <button
                        type="button"
@@ -254,7 +290,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                {remainingHours > 0 && (
                  <div className="flex items-center gap-2 text-xs">
                    <div className="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0" />
-                    <span className="text-amber-600 dark:text-amber-400 font-medium">Remaining: {Math.round(remainingHours)}h</span>
+                    <span className="text-amber-600 dark:text-amber-400 font-medium">
+                      Remaining: {Math.round(remainingHours)}h
+                    </span>
                  </div>
                )}
              </div>
@@ -266,7 +304,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
        {phase === "plan" && (
          <div className="px-6 pb-5 space-y-4">
            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search Resource</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Search Resource
+              </label>
              <input
                type="text"
                placeholder="Search by name or EID..."
@@ -277,7 +317,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
            </div>

            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Select Resource</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Select Resource
+              </label>
              <select
                value={resourceId}
                onChange={(e) => setResourceId(e.target.value)}
@@ -297,7 +339,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
            </div>

            <div>
-              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Hours / Day</label>
+              <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
+                Hours / Day
+              </label>
              <input
                type="number"
                value={hoursPerDay}
@@ -311,41 +355,53 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen

            {/* Availability preview */}
            {resourceId && avail && (
-              <div className={`rounded-lg p-3 border text-sm ${
-                avail.coveragePercent >= 100
-                  ? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800"
-                  : avail.coveragePercent >= 50
-                    ? "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800"
-                    : "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"
-              }`}>
+              <div
+                className={`rounded-lg p-3 border text-sm ${
+                  avail.coveragePercent >= 100
+                    ? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800"
+                    : avail.coveragePercent >= 50
+                      ? "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800"
+                      : "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"
+                }`}
+              >
                <div className="font-medium text-gray-900 dark:text-gray-100 mb-1.5">
                  Availability: {avail.resource.name}
                </div>
                <div className="grid grid-cols-3 gap-2 text-xs">
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Available</span>
-                    <div className="font-semibold text-green-700 dark:text-green-400">{avail.availableDays} days</div>
+                    <div className="font-semibold text-green-700 dark:text-green-400">
+                      {avail.availableDays} days
+                    </div>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Conflicts</span>
-                    <div className="font-semibold text-red-700 dark:text-red-400">{avail.conflictDays} days</div>
+                    <div className="font-semibold text-red-700 dark:text-red-400">
+                      {avail.conflictDays} days
+                    </div>
                  </div>
                  <div>
                    <span className="text-gray-500 dark:text-gray-400">Hours</span>
-                    <div className="font-semibold text-gray-900 dark:text-gray-100">{avail.totalAvailableHours}h / {avail.totalRequestedHours}h</div>
+                    <div className="font-semibold text-gray-900 dark:text-gray-100">
+                      {avail.totalAvailableHours}h / {avail.totalRequestedHours}h
+                    </div>
                  </div>
                </div>

                {avail.existingAssignments.length > 0 && (
                  <div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
-                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Existing bookings:</div>
+                    <div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
+                      Existing bookings:
+                    </div>
                    {avail.existingAssignments.slice(0, 4).map((a, i) => (
                      <div key={i} className="text-xs text-gray-600 dark:text-gray-300">
                        {a.code} · {a.hoursPerDay}h/day · {a.start} – {a.end}
                      </div>
                    ))}
                    {avail.existingAssignments.length > 4 && (
-                      <div className="text-xs text-gray-400">+{avail.existingAssignments.length - 4} more</div>
+                      <div className="text-xs text-gray-400">
+                        +{avail.existingAssignments.length - 4} more
+                      </div>
                    )}
                  </div>
                )}
@@ -353,12 +409,18 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
            )}

            {resourceId && availabilityQuery.isLoading && (
-              <div className="text-xs text-gray-400 dark:text-gray-500 animate-pulse">Checking availability...</div>
+              <div className="text-xs text-gray-400 dark:text-gray-500 animate-pulse">
+                Checking availability...
+              </div>
            )}

            {/* Action buttons */}
            <div className="flex items-center justify-between gap-3 pt-2">
-              <button type="button" onClick={onClose} className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">
+              <button
+                type="button"
+                onClick={onClose}
+                className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
+              >
                Cancel
              </button>
              <div className="flex items-center gap-2">
@@ -391,11 +453,27 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
              <table className="w-full text-sm">
                <thead className="bg-gray-50 dark:bg-gray-900">
                  <tr>
-                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Resource</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">h/day</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">Hours</th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Est. Cost<InfoTooltip content="Estimated cost = resource LCR x available hours in the demand period." /></span></th>
-                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Coverage<InfoTooltip content="Percentage of the demand period this resource can cover, accounting for existing bookings." /></span></th>
+                    <th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">
+                      Resource
+                    </th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
+                      h/day
+                    </th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
+                      Hours
+                    </th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
+                      <span className="inline-flex items-center justify-end gap-0.5">
+                        Est. Cost
+                        <InfoTooltip content="Estimated cost = resource LCR x available hours in the demand period." />
+                      </span>
+                    </th>
+                    <th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
+                      <span className="inline-flex items-center justify-end gap-0.5">
+                        Coverage
+                        <InfoTooltip content="Percentage of the demand period this resource can cover, accounting for existing bookings." />
+                      </span>
+                    </th>
                  </tr>
                </thead>
                <tbody className="divide-y divide-gray-100 dark:divide-gray-800">
@@ -405,11 +483,19 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                        {r.resourceName}
                        <span className="ml-1 text-xs text-gray-400 font-mono">{r.eid}</span>
                      </td>
-                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{r.hoursPerDay}h</td>
-                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{Math.round(r.availableHours)}h</td>
-                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{formatCents(r.estimatedCostCents)} EUR</td>
+                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
+                        {r.hoursPerDay}h
+                      </td>
+                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
+                        {Math.round(r.availableHours)}h
+                      </td>
+                      <td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
+                        {formatCents(r.estimatedCostCents)} EUR
+                      </td>
                      <td className="px-3 py-2 text-right">
-                        <span className={`font-medium ${r.coveragePercent >= 100 ? "text-green-600" : r.coveragePercent >= 50 ? "text-amber-600" : "text-red-600"}`}>
+                        <span
+                          className={`font-medium ${r.coveragePercent >= 100 ? "text-green-600" : r.coveragePercent >= 50 ? "text-amber-600" : "text-red-600"}`}
+                        >
                          {r.coveragePercent}%
                        </span>
                      </td>
@@ -418,7 +504,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                </tbody>
                <tfoot className="bg-gray-50 dark:bg-gray-900">
                  <tr>
-                    <td className="px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-300">Total</td>
+                    <td className="px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-300">
+                      Total
+                    </td>
                    <td className="px-3 py-2" />
                    <td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
                      {Math.round(consumedHours)}h / {totalDemandHours}h
@@ -427,12 +515,20 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                      {formatCents(planned.reduce((s, r) => s + r.estimatedCostCents, 0))} EUR
                    </td>
                    <td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
-                      {totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%
+                      {totalDemandHours > 0
+                        ? Math.round((consumedHours / totalDemandHours) * 100)
+                        : 0}
+                      %
                    </td>
                  </tr>
                  {allocation.budgetCents && allocation.budgetCents > 0 && (
                    <tr>
-                      <td colSpan={3} className="px-3 py-1.5 text-right text-xs text-gray-500 dark:text-gray-400">Role Budget:</td>
+                      <td
+                        colSpan={3}
+                        className="px-3 py-1.5 text-right text-xs text-gray-500 dark:text-gray-400"
+                      >
+                        Role Budget:
+                      </td>
                      <td className="px-3 py-1.5 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
                        {formatCents(allocation.budgetCents)} EUR
                      </td>
@@ -441,8 +537,12 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                          const totalCost = planned.reduce((s, r) => s + r.estimatedCostCents, 0);
                          const remain = allocation.budgetCents! - totalCost;
                          return (
-                            <span className={remain < 0 ? "text-red-600 font-medium" : "text-green-600"}>
-                              {remain < 0 ? `${formatCents(Math.abs(remain))} over` : `${formatCents(remain)} left`}
+                            <span
+                              className={remain < 0 ? "text-red-600 font-medium" : "text-green-600"}
+                            >
+                              {remain < 0
+                                ? `${formatCents(Math.abs(remain))} over`
+                                : `${formatCents(remain)} left`}
                            </span>
                          );
                        })()}
@@ -455,7 +555,8 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen

            {remainingHours > 0 && (
              <div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2 border border-amber-200 dark:border-amber-800">
-                {Math.round(remainingHours)}h remain uncovered. You can add more resources or assign partially.
+                {Math.round(remainingHours)}h remain uncovered. You can add more resources or assign
+                partially.
              </div>
            )}

@@ -486,7 +587,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
                disabled={submitting || planned.length === 0}
                className="px-5 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-semibold disabled:opacity-50"
              >
-                {submitting ? `Assigning ${submitProgress}/${planned.length}...` : `Confirm & Assign ${planned.length} Resource${planned.length !== 1 ? "s" : ""}`}
+                {submitting
+                  ? `Assigning ${submitProgress}/${planned.length}...`
+                  : `Confirm & Assign ${planned.length} Resource${planned.length !== 1 ? "s" : ""}`}
              </button>
            </div>
          </div>
@@ -1,4 +1,4 @@
-import type { AllocationWithDetails } from "@capakraken/shared";
+import type { AllocationWithDetails } from "@nexus/shared";

 type DemandRow = AllocationWithDetails & {
  sourceAllocationId?: string;
@@ -1,7 +1,7 @@
 "use client";

-import { RecurrenceFrequency } from "@capakraken/shared";
-import type { RecurrencePattern } from "@capakraken/shared";
+import { RecurrenceFrequency } from "@nexus/shared";
+import type { RecurrencePattern } from "@nexus/shared";
 import { InfoTooltip } from "~/components/ui/InfoTooltip.js";

 const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -39,7 +39,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
    <div className="space-y-3 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
      {/* Frequency selector */}
      <div>
-        <span className={labelClass}>Frequency<InfoTooltip content="How often the allocation repeats: weekly, biweekly, monthly, or a custom pattern." /></span>
+        <span className={labelClass}>
+          Frequency
+          <InfoTooltip content="How often the allocation repeats: weekly, biweekly, monthly, or a custom pattern." />
+        </span>
        <div className="flex gap-2 flex-wrap">
          {Object.values(RecurrenceFrequency).map((f) => (
            <button
@@ -55,10 +58,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
              {f === RecurrenceFrequency.WEEKLY
                ? "Weekly"
                : f === RecurrenceFrequency.BIWEEKLY
-                ? "Biweekly"
-                : f === RecurrenceFrequency.MONTHLY
-                ? "Monthly"
-                : "Custom"}
+                  ? "Biweekly"
+                  : f === RecurrenceFrequency.MONTHLY
+                    ? "Monthly"
+                    : "Custom"}
            </button>
          ))}
        </div>
@@ -67,7 +70,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
      {/* Weekday picker — WEEKLY and BIWEEKLY */}
      {(freq === RecurrenceFrequency.WEEKLY || freq === RecurrenceFrequency.BIWEEKLY) && (
        <div>
-          <span className={labelClass}>Days of week<InfoTooltip content="Select which days of the week this allocation is active. Hours per day applies only on selected days." /></span>
+          <span className={labelClass}>
+            Days of week
+            <InfoTooltip content="Select which days of the week this allocation is active. Hours per day applies only on selected days." />
+          </span>
          <div className="flex gap-1">
            {WEEKDAY_LABELS.map((label, dow) => {
              const selected = (value?.weekdays ?? []).includes(dow);
@@ -139,7 +145,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
      {/* Optional hours override for WEEKLY/BIWEEKLY/MONTHLY */}
      {freq !== RecurrenceFrequency.CUSTOM && (
        <div>
-          <label className={labelClass}>Hours per recurring day (optional override)<InfoTooltip content="Override the allocation's default hours for recurring days only. Leave empty to use the allocation's hours/day." /></label>
+          <label className={labelClass}>
+            Hours per recurring day (optional override)
+            <InfoTooltip content="Override the allocation's default hours for recurring days only. Leave empty to use the allocation's hours/day." />
+          </label>
          <input
            type="number"
            min={0.5}