From 85e1bcc06f6db15171263553b823181e2a60ffff Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hartmut=20N=C3=B6renberg?= <hn@hartmut-noerenberg.com>
Date: Sat, 11 Apr 2026 08:30:33 +0200
Subject: [PATCH] refactor(web): decompose ProjectWizard into step components

Extract each wizard step into its own file under project-wizard/:
StepBar, DynamicFieldInput, Step1Identity, ResourcePersonPicker,
Step2Timeline, Step3Staffing, Step4Suggestions, Step5Review.
Main file reduced from 1,385 to 112 lines.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 .../src/components/projects/ProjectWizard.tsx | 1297 +----------------
 .../project-wizard/DynamicFieldInput.tsx      |  109 ++
 .../project-wizard/ResourcePersonPicker.tsx   |  113 ++
 .../projects/project-wizard/Step1Identity.tsx |  225 +++
 .../projects/project-wizard/Step2Timeline.tsx |   80 +
 .../projects/project-wizard/Step3Staffing.tsx |  249 ++++
 .../project-wizard/Step4Suggestions.tsx       |  209 +++
 .../projects/project-wizard/Step5Review.tsx   |  233 +++
 .../projects/project-wizard/StepBar.tsx       |   43 +
 9 files changed, 1273 insertions(+), 1285 deletions(-)
 create mode 100644 apps/web/src/components/projects/project-wizard/DynamicFieldInput.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/ResourcePersonPicker.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/Step1Identity.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/Step2Timeline.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/Step3Staffing.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/Step4Suggestions.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/Step5Review.tsx
 create mode 100644 apps/web/src/components/projects/project-wizard/StepBar.tsx

diff --git a/apps/web/src/components/projects/ProjectWizard.tsx b/apps/web/src/components/projects/ProjectWizard.tsx
index be99eb2..4ff8335 100644
--- a/apps/web/src/components/projects/ProjectWizard.tsx
+++ b/apps/web/src/components/projects/ProjectWizard.tsx
@@ -1,1288 +1,15 @@
 "use client";
 
-import { createPortal } from "react-dom";
-import { useState, useEffect, useMemo, useRef } from "react";
-import { clsx } from "clsx";
-import type { StaffingRequirement, BlueprintFieldDefinition } from "@capakraken/shared";
-import { BlueprintTarget, FieldType, RolePresetsSchema } from "@capakraken/shared";
-import { trpc } from "~/lib/trpc/client.js";
-import { uuid } from "~/lib/uuid.js";
-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 { ConfettiBurst } from "~/components/ui/ConfettiBurst.js";
 import { SuccessToast } from "~/components/ui/SuccessToast.js";
-import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
-import {
-  ORDER_TYPE_OPTIONS,
-  ALLOCATION_TYPE_OPTIONS,
-  BTN_PRIMARY,
-  BTN_SECONDARY,
-  STEPS,
-  makeReq,
-  type Assignment,
-  type WizardState,
-  type SuggestionItem,
-} from "./project-wizard/types.js";
+import { BTN_PRIMARY, BTN_SECONDARY } from "./project-wizard/types.js";
 import { useProjectWizardForm } from "./project-wizard/useProjectWizardForm.js";
-
-// ─── Step indicators ─────────────────────────────────────────────────────────
-
-function StepBar({ current }: { current: number }) {
-  return (
-    <div className="flex items-center gap-0 mb-6">
-      {STEPS.map((label, idx) => (
-        <div key={idx} className="flex items-center flex-1 min-w-0">
-          <div className="flex flex-col items-center flex-shrink-0">
-            <div
-              className={clsx(
-                "w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-colors",
-                idx < current
-                  ? "bg-brand-600 text-white"
-                  : idx === current
-                    ? "bg-brand-600 text-white ring-4 ring-brand-100"
-                    : "bg-gray-100 text-gray-400",
-              )}
-            >
-              {idx < current ? "✓" : idx + 1}
-            </div>
-            <span
-              className={clsx(
-                "mt-1 text-[10px] text-center whitespace-nowrap leading-tight max-w-[72px]",
-                idx === current ? "text-brand-600 font-medium" : "text-gray-400",
-              )}
-            >
-              {label}
-            </span>
-          </div>
-          {idx < STEPS.length - 1 && (
-            <div
-              className={clsx(
-                "h-0.5 flex-1 mx-1 mt-[-14px]",
-                idx < current ? "bg-brand-400" : "bg-gray-200",
-              )}
-            />
-          )}
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── Dynamic Field Input ──────────────────────────────────────────────────────
-
-function DynamicFieldInput({
-  field,
-  value,
-  onChange,
-}: {
-  field: BlueprintFieldDefinition;
-  value: unknown;
-  onChange: (key: string, val: unknown) => void;
-}) {
-  const strVal = value !== undefined && value !== null ? String(value) : "";
-  const arrVal = Array.isArray(value) ? (value as string[]) : [];
-
-  switch (field.type) {
-    case FieldType.TEXTAREA:
-      return (
-        <textarea
-          value={strVal}
-          onChange={(e) => onChange(field.key, e.target.value)}
-          placeholder={field.placeholder}
-          rows={3}
-          className="app-input"
-        />
-      );
-    case FieldType.NUMBER:
-      return (
-        <input
-          type="number"
-          value={strVal}
-          min={field.validation?.min}
-          max={field.validation?.max}
-          onChange={(e) =>
-            onChange(field.key, e.target.value === "" ? "" : parseFloat(e.target.value))
-          }
-          placeholder={field.placeholder}
-          className="app-input"
-        />
-      );
-    case FieldType.BOOLEAN:
-      return (
-        <label className="flex items-center gap-2 text-sm cursor-pointer">
-          <input
-            type="checkbox"
-            checked={value === true || value === "true"}
-            onChange={(e) => onChange(field.key, e.target.checked)}
-            className="accent-brand-600"
-          />
-          {field.description && <span className="text-gray-500">{field.description}</span>}
-        </label>
-      );
-    case FieldType.DATE:
-      return <DateInput value={strVal} onChange={(v) => onChange(field.key, v)} />;
-    case FieldType.SELECT:
-      return (
-        <select
-          value={strVal}
-          onChange={(e) => onChange(field.key, e.target.value)}
-          className="app-select w-full"
-        >
-          <option value="">— select —</option>
-          {(field.options ?? []).map((opt) => (
-            <option key={opt.value} value={opt.value}>
-              {opt.label}
-            </option>
-          ))}
-        </select>
-      );
-    case FieldType.MULTI_SELECT:
-      return (
-        <div className="flex flex-wrap gap-2">
-          {(field.options ?? []).map((opt) => {
-            const checked = arrVal.includes(opt.value);
-            return (
-              <label key={opt.value} className="flex items-center gap-1.5 text-sm cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={checked}
-                  onChange={(e) => {
-                    const next = e.target.checked
-                      ? [...arrVal, opt.value]
-                      : arrVal.filter((v) => v !== opt.value);
-                    onChange(field.key, next);
-                  }}
-                  className="accent-brand-600"
-                />
-                {opt.label}
-              </label>
-            );
-          })}
-        </div>
-      );
-    default:
-      // TEXT, URL, EMAIL
-      return (
-        <input
-          type={
-            field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"
-          }
-          value={strVal}
-          onChange={(e) => onChange(field.key, e.target.value)}
-          placeholder={field.placeholder}
-          className="app-input"
-        />
-      );
-  }
-}
-
-// ─── Step 1: Blueprint & Identity ────────────────────────────────────────────
-
-interface Step1Props {
-  state: WizardState;
-  onChange: (patch: Partial<WizardState>) => void;
-}
-
-function Step1({ state, onChange }: Step1Props) {
-  const { data: blueprints } = trpc.blueprint.list.useQuery(
-    { target: BlueprintTarget.PROJECT, isActive: true },
-    { staleTime: 30_000 },
-  ) as {
-    data:
-      | Array<{
-          id: string;
-          name: string;
-          description?: string | null;
-          rolePresets?: unknown;
-          fieldDefs?: unknown;
-        }>
-      | undefined;
-  };
-
-  const selectedBp = blueprints?.find((b) => b.id === state.blueprintId);
-
-  function selectBlueprint(id: string | null) {
-    if (!id) {
-      onChange({
-        blueprintId: null,
-        blueprintName: null,
-        blueprintFieldDefs: [],
-        dynamicFields: {},
-      });
-      return;
-    }
-    const bp = blueprints?.find((b) => b.id === id);
-    // Validate rolePresets structure before using — filter out malformed entries
-    const parsedPresets = RolePresetsSchema.safeParse(
-      Array.isArray(bp?.rolePresets) ? bp.rolePresets : [],
-    );
-    const presets = (parsedPresets.success
-      ? parsedPresets.data
-      : []) as unknown as StaffingRequirement[];
-    // Parse fieldDefs from blueprint
-    const rawFieldDefs = Array.isArray(bp?.fieldDefs) ? (bp.fieldDefs as unknown[]) : [];
-    const fieldDefs = rawFieldDefs.filter(
-      (f): f is BlueprintFieldDefinition =>
-        typeof f === "object" && f !== null && "key" in f && "type" in f && "label" in f,
-    );
-    // Build default dynamic fields from defaults or required fields
-    const defaultDynamicFields: Record<string, unknown> = {};
-    for (const field of fieldDefs) {
-      if (field.defaultValue !== undefined) {
-        defaultDynamicFields[field.key] = field.defaultValue;
-      }
-    }
-    onChange({
-      blueprintId: id,
-      blueprintName: bp?.name ?? null,
-      blueprintFieldDefs: fieldDefs,
-      staffingReqs: presets,
-      dynamicFields: defaultDynamicFields,
-    });
-  }
-
-  return (
-    <div className="space-y-5">
-      {/* Blueprint picker */}
-      <div>
-        <label className="app-label">
-          Project Blueprint (optional)
-          <InfoTooltip content="Blueprints are templates that pre-fill role presets and default settings. Selecting one loads staffing requirements into Step 3." />
-        </label>
-        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-2">
-          <button
-            type="button"
-            onClick={() => selectBlueprint(null)}
-            className={clsx(
-              "text-left p-3 rounded-lg border text-sm transition-colors",
-              !state.blueprintId
-                ? "border-brand-500 bg-brand-50 text-brand-700"
-                : "border-gray-200 hover:border-gray-300 text-gray-600",
-            )}
-          >
-            <div className="font-medium">No Blueprint</div>
-            <div className="text-xs text-gray-400 mt-0.5">Start blank</div>
-          </button>
-          {(blueprints ?? []).map((bp) => (
-            <button
-              key={bp.id}
-              type="button"
-              onClick={() => selectBlueprint(bp.id)}
-              className={clsx(
-                "text-left p-3 rounded-lg border text-sm transition-colors",
-                state.blueprintId === bp.id
-                  ? "border-brand-500 bg-brand-50 text-brand-700"
-                  : "border-gray-200 hover:border-gray-300 text-gray-600",
-              )}
-            >
-              <div className="font-medium truncate">{bp.name}</div>
-              {bp.description && (
-                <div className="text-xs text-gray-400 mt-0.5 truncate">{bp.description}</div>
-              )}
-              {Array.isArray(bp.rolePresets) && bp.rolePresets.length > 0 && (
-                <div className="text-xs text-brand-500 mt-1">
-                  {bp.rolePresets.length} role preset{bp.rolePresets.length !== 1 ? "s" : ""}
-                </div>
-              )}
-            </button>
-          ))}
-        </div>
-        {selectedBp && (
-          <p className="text-xs text-brand-600">
-            Selected: <strong>{selectedBp.name}</strong>
-            {Array.isArray(selectedBp.rolePresets) && selectedBp.rolePresets.length > 0
-              ? ` — ${selectedBp.rolePresets.length} role presets will be loaded in Step 3`
-              : ""}
-          </p>
-        )}
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        {/* Short code */}
-        <div>
-          <label className="app-label">
-            Short Code *
-            <InfoTooltip content="Unique chargecode for this project, used for time tracking and cost attribution. Must be uppercase alphanumeric." />
-          </label>
-          <input
-            type="text"
-            value={state.shortCode}
-            onChange={(e) => onChange({ shortCode: e.target.value.toUpperCase() })}
-            placeholder="e.g. BMW26D"
-            className="app-input"
-          />
-          <p className="text-xs text-gray-400 mt-0.5">Uppercase alphanumeric, max 20 chars</p>
-        </div>
-
-        {/* Name */}
-        <div>
-          <label className="app-label">
-            Project Name *
-            <InfoTooltip content="Display name shown on the timeline and in reports." />
-          </label>
-          <input
-            type="text"
-            value={state.name}
-            onChange={(e) => onChange({ name: e.target.value })}
-            placeholder="e.g. BMW X3 Campaign"
-            className="app-input"
-          />
-        </div>
-
-        {/* Order type */}
-        <div>
-          <label className="app-label">
-            Order Type *
-            <InfoTooltip content="BD = Business Development (pre-sales), CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = non-project overhead." />
-          </label>
-          <select
-            value={state.orderType}
-            onChange={(e) => onChange({ orderType: e.target.value })}
-            className="app-select w-full"
-          >
-            {ORDER_TYPE_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-
-        {/* Allocation type */}
-        <div>
-          <label className="app-label">
-            Allocation Type *
-            <InfoTooltip content="INT = staffed with internal resources, EXT = staffed with external contractors or freelancers." />
-          </label>
-          <select
-            value={state.allocationType}
-            onChange={(e) => onChange({ allocationType: e.target.value })}
-            className="app-select w-full"
-          >
-            {ALLOCATION_TYPE_OPTIONS.map((opt) => (
-              <option key={opt.value} value={opt.value}>
-                {opt.label}
-              </option>
-            ))}
-          </select>
-        </div>
-      </div>
-
-      {/* Blueprint custom fields */}
-      {state.blueprintFieldDefs.length > 0 && (
-        <div className="border-t border-gray-100 pt-4 space-y-3">
-          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
-            Blueprint Fields — {state.blueprintName}
-          </p>
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-            {[...state.blueprintFieldDefs]
-              .sort((a, b) => a.order - b.order)
-              .map((field) => (
-                <div
-                  key={field.key}
-                  className={field.type === FieldType.TEXTAREA ? "col-span-2" : ""}
-                >
-                  <label className="app-label">
-                    {field.label}
-                    {field.required && " *"}
-                    {field.description && <InfoTooltip content={field.description} />}
-                  </label>
-                  <DynamicFieldInput
-                    field={field}
-                    value={state.dynamicFields[field.key]}
-                    onChange={(key, val) =>
-                      onChange({ dynamicFields: { ...state.dynamicFields, [key]: val } })
-                    }
-                  />
-                </div>
-              ))}
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-// ─── Responsible Person Picker ────────────────────────────────────────────────
-
-function ResourcePersonPicker({
-  value,
-  onChange,
-}: {
-  value: string;
-  onChange: (v: string) => void;
-}) {
-  const [query, setQuery] = useState(value);
-  const [open, setOpen] = useState(false);
-  const [debouncedSearch, setDebouncedSearch] = useState("");
-  // Tracks whether the current value was explicitly chosen from the dropdown
-  // vs typed as free text. Cleared on any manual keypress.
-  const [isConfirmed, setIsConfirmed] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  // Debounce search query to avoid excessive API calls
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedSearch(query), 200);
-    return () => clearTimeout(timer);
-  }, [query]);
-
-  // Server-side search — no client-side limit, searches full database
-  const { data } = trpc.resource.directory.useQuery(
-    { isActive: true, search: debouncedSearch || undefined, limit: 30 },
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    { staleTime: 15_000, placeholderData: (prev: any) => prev },
-  );
-  const filtered = useMemo(
-    () =>
-      (data?.resources ?? []) as unknown as Array<{ id: string; displayName: string; eid: string }>,
-    [data],
-  );
-
-  // Sync local query when external value changes (e.g. wizard reset)
-  useEffect(() => {
-    setQuery(value);
-    // If the external value is cleared (reset), also clear the confirmed state
-    if (!value) setIsConfirmed(false);
-  }, [value]);
-
-  const { panelRef, position } = useAnchoredOverlay<HTMLInputElement>({
-    open,
-    onClose: () => setOpen(false),
-    align: "start",
-    matchTriggerWidth: true,
-    triggerRef: inputRef,
-  });
-
-  return (
-    <div className="relative">
-      <input
-        ref={inputRef}
-        type="text"
-        value={query}
-        onChange={(e) => {
-          setQuery(e.target.value);
-          onChange(e.target.value);
-          setIsConfirmed(false); // User is typing — selection no longer confirmed
-          setOpen(true);
-        }}
-        onFocus={() => setOpen(true)}
-        placeholder="Search by name or EID…"
-        className={`app-input ${isConfirmed ? "ring-2 ring-green-400 ring-offset-0" : ""}`}
-      />
-      {isConfirmed && (
-        <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-green-500">
-          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2.5}
-              d="M5 13l4 4L19 7"
-            />
-          </svg>
-        </span>
-      )}
-      {open && filtered.length > 0 && typeof document !== "undefined"
-        ? createPortal(
-            <div
-              ref={panelRef}
-              className="fixed z-[9998] max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg"
-              style={{
-                top: position.top,
-                left: position.left,
-                width: position.minWidth,
-              }}
-              onMouseDown={(e) => e.preventDefault()}
-            >
-              <ul>
-                {filtered.map((r) => (
-                  <li key={r.id}>
-                    <button
-                      type="button"
-                      onMouseDown={() => {
-                        onChange(r.displayName);
-                        setQuery(r.displayName);
-                        setIsConfirmed(true);
-                        setOpen(false);
-                      }}
-                      className="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"
-                    >
-                      <span className="truncate">{r.displayName}</span>
-                      <span className="shrink-0 font-mono text-xs text-gray-400">{r.eid}</span>
-                    </button>
-                  </li>
-                ))}
-              </ul>
-            </div>,
-            document.body,
-          )
-        : null}
-    </div>
-  );
-}
-
-// ─── Step 2: Timeline & Budget ────────────────────────────────────────────────
-
-interface Step2Props {
-  state: WizardState;
-  onChange: (patch: Partial<WizardState>) => void;
-}
-
-function Step2({ state, onChange }: Step2Props) {
-  return (
-    <div className="space-y-4">
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div>
-          <label className="app-label">
-            Start Date *
-            <InfoTooltip content="First day of the project period. Assignments and budget tracking begin from this date." />
-          </label>
-          <DateInput value={state.startDate} onChange={(v) => onChange({ startDate: v })} />
-        </div>
-        <div>
-          <label className="app-label">
-            End Date *
-            <InfoTooltip content="Last day of the project period. Defines the timeline boundary for all assignments." />
-          </label>
-          <DateInput value={state.endDate} onChange={(v) => onChange({ endDate: v })} />
-        </div>
-      </div>
-
-      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
-        <div>
-          <label className="app-label">
-            Budget (EUR)
-            <InfoTooltip content="Total project budget in EUR. Stored internally as cents. Used to track spending against assignments." />
-          </label>
-          <input
-            type="number"
-            min={0}
-            step={100}
-            value={state.budgetEur}
-            onChange={(e) => onChange({ budgetEur: e.target.value })}
-            placeholder="e.g. 50000"
-            className="app-input"
-          />
-        </div>
-        <div>
-          <label className="app-label">
-            Responsible Person
-            <InfoTooltip content="Project lead or account manager. Search by name or employee ID." />
-          </label>
-          <ResourcePersonPicker
-            value={state.responsiblePerson}
-            onChange={(v) => onChange({ responsiblePerson: v })}
-          />
-        </div>
-      </div>
-
-      <div>
-        <label className="app-label">
-          Win Probability: <strong>{state.winProbability}%</strong>
-          <InfoTooltip content="Likelihood of winning this project (0-100%). Affects the weighted pipeline value: budget x probability." />
-        </label>
-        <input
-          type="range"
-          min={0}
-          max={100}
-          step={5}
-          value={state.winProbability}
-          onChange={(e) => onChange({ winProbability: parseInt(e.target.value, 10) })}
-          className="w-full accent-brand-600"
-        />
-        <div className="flex justify-between text-xs text-gray-400 mt-0.5">
-          <span>0% (Unlikely)</span>
-          <span>100% (Confirmed)</span>
-        </div>
-      </div>
-    </div>
-  );
-}
-
-// ─── Step 3: Staffing Demand ─────────────────────────────────────────────────
-
-interface Step3Props {
-  state: WizardState;
-  onChange: (patch: Partial<WizardState>) => void;
-}
-
-function Step3({ state, onChange }: Step3Props) {
-  const { data: rolesData } = trpc.role.list.useQuery({ isActive: true }, { staleTime: 30_000 });
-  const roles = rolesData ?? [];
-
-  const { data: chaptersData } = trpc.resource.chapters.useQuery(undefined, { staleTime: 60_000 });
-  const chapters = (chaptersData ?? []) as string[];
-
-  function updateReq(idx: number, patch: Partial<StaffingRequirement>) {
-    const next = state.staffingReqs.map((r, i) => (i === idx ? { ...r, ...patch } : r));
-    onChange({ staffingReqs: next });
-  }
-
-  function addReq() {
-    onChange({ staffingReqs: [...state.staffingReqs, makeReq()] });
-  }
-
-  function removeReq(idx: number) {
-    onChange({ staffingReqs: state.staffingReqs.filter((_, i) => i !== idx) });
-  }
-
-  return (
-    <div>
-      {state.blueprintId && state.staffingReqs.length > 0 && (
-        <div className="mb-3 px-3 py-2 bg-brand-50 border border-brand-200 rounded-lg text-xs text-brand-700">
-          Blueprint presets auto-loaded. Edit as needed.
-        </div>
-      )}
-
-      {/* Budget allocation summary */}
-      {state.budgetEur &&
-        parseFloat(state.budgetEur) > 0 &&
-        state.staffingReqs.length > 0 &&
-        (() => {
-          const projectBudgetCents = Math.round(parseFloat(state.budgetEur || "0") * 100);
-          const allocatedCents = state.staffingReqs.reduce(
-            (sum, r) => sum + (r.budgetCents ?? 0),
-            0,
-          );
-          const remainingCents = projectBudgetCents - allocatedCents;
-          const pct =
-            projectBudgetCents > 0 ? Math.round((allocatedCents / projectBudgetCents) * 100) : 0;
-          return (
-            <div
-              className={`mb-3 rounded-lg border p-3 text-xs ${remainingCents < 0 ? "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400" : remainingCents === 0 ? "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400" : "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300"}`}
-            >
-              <div className="flex items-center justify-between mb-1.5">
-                <span className="font-semibold">Budget Allocation</span>
-                <span>{pct}% allocated</span>
-              </div>
-              <div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden mb-1.5">
-                <div
-                  className={`h-full rounded-full transition-all ${remainingCents < 0 ? "bg-red-500" : remainingCents === 0 ? "bg-green-500" : "bg-amber-500"}`}
-                  style={{ width: `${Math.min(100, pct)}%` }}
-                />
-              </div>
-              <div className="flex justify-between">
-                <span>Project: {formatCents(projectBudgetCents)} EUR</span>
-                <span>Allocated: {formatCents(allocatedCents)} EUR</span>
-                <span className="font-semibold">Remaining: {formatCents(remainingCents)} EUR</span>
-              </div>
-            </div>
-          );
-        })()}
-
-      <div className="space-y-3 max-h-[45vh] overflow-y-auto pr-1">
-        {state.staffingReqs.length === 0 && (
-          <p className="text-sm text-gray-400 text-center py-8">
-            No requirements yet. Click &ldquo;+ Add Role&rdquo; to define staffing needs.
-          </p>
-        )}
-        {state.staffingReqs.map((req, idx) => (
-          <div key={req.id} className="border border-gray-200 rounded-lg p-3 bg-white">
-            <div className="flex flex-wrap items-start gap-2">
-              <div className="flex-1 min-w-32">
-                <label className="text-xs text-gray-400">
-                  Role *
-                  <InfoTooltip content="Select a predefined role or enter a custom role name. Defines the skill profile for this staffing demand." />
-                </label>
-                {roles.length > 0 ? (
-                  <select
-                    value={req.roleId ?? ""}
-                    onChange={(e) => {
-                      const selectedId = e.target.value;
-                      const matched = roles.find((ro) => ro.id === selectedId);
-                      if (selectedId && matched) {
-                        updateReq(idx, { roleId: matched.id, role: matched.name });
-                      } else {
-                        // Clear roleId — rebuild without the key
-                        const { roleId: _r, ...rest } = state.staffingReqs[idx]!;
-                        void _r;
-                        onChange({
-                          staffingReqs: state.staffingReqs.map((r, i) => (i === idx ? rest : r)),
-                        });
-                      }
-                    }}
-                    className="app-select w-full"
-                  >
-                    <option value="">Custom / Free text…</option>
-                    {roles.map((ro) => (
-                      <option key={ro.id} value={ro.id}>
-                        {ro.name}
-                      </option>
-                    ))}
-                  </select>
-                ) : null}
-                {!req.roleId && (
-                  <input
-                    type="text"
-                    value={req.role}
-                    onChange={(e) => updateReq(idx, { role: e.target.value })}
-                    placeholder="e.g. 3D Artist"
-                    className={clsx("app-input", roles.length > 0 && "mt-1")}
-                  />
-                )}
-              </div>
-              <div className="w-20">
-                <label className="text-xs text-gray-400">
-                  h/day
-                  <InfoTooltip content="Planned working hours per day for this role." />
-                </label>
-                <input
-                  type="number"
-                  value={req.hoursPerDay}
-                  min={0}
-                  max={24}
-                  step={0.5}
-                  onChange={(e) => updateReq(idx, { hoursPerDay: parseFloat(e.target.value) || 0 })}
-                  className="app-input"
-                />
-              </div>
-              <div className="w-16">
-                <label className="text-xs text-gray-400">
-                  Count
-                  <InfoTooltip content="Number of people needed for this role. Unfilled seats become placeholder demands until assigned." />
-                </label>
-                <input
-                  type="number"
-                  value={req.headcount}
-                  min={1}
-                  max={20}
-                  onChange={(e) => updateReq(idx, { headcount: parseInt(e.target.value, 10) || 1 })}
-                  className="app-input"
-                />
-              </div>
-              <div className="w-28">
-                <label className="text-xs text-gray-400">
-                  Budget (EUR)
-                  <InfoTooltip content="Optional budget cap for this role. Tracked against actual assignment costs." />
-                </label>
-                <input
-                  type="number"
-                  value={req.budgetCents ? req.budgetCents / 100 : ""}
-                  min={0}
-                  step={100}
-                  onChange={(e) => {
-                    const val = parseFloat(e.target.value);
-                    updateReq(idx, {
-                      budgetCents: Number.isFinite(val) && val > 0 ? Math.round(val * 100) : 0,
-                    } as Partial<StaffingRequirement>);
-                  }}
-                  placeholder="0"
-                  className="app-input"
-                />
-              </div>
-              <div className="pt-5">
-                <button
-                  type="button"
-                  onClick={() => removeReq(idx)}
-                  className="app-action-danger-btn"
-                >
-                  ×
-                </button>
-              </div>
-            </div>
-            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
-              <div>
-                <label className="text-xs text-gray-400">
-                  Required skills
-                  <InfoTooltip content="Skills a resource must have to be suggested for this role." />
-                </label>
-                <SkillTagInput
-                  value={req.requiredSkills}
-                  onChange={(skills) => updateReq(idx, { requiredSkills: skills })}
-                  placeholder="Add required skill…"
-                />
-              </div>
-              <div>
-                <label className="text-xs text-gray-400">
-                  Preferred skills (optional)
-                  <InfoTooltip content="Nice-to-have skills that boost a resource's match score but are not mandatory." />
-                </label>
-                <SkillTagInput
-                  value={req.preferredSkills ?? []}
-                  onChange={(skills) => updateReq(idx, { preferredSkills: skills })}
-                  placeholder="Add preferred skill…"
-                />
-              </div>
-              <div>
-                <label className="text-xs text-gray-400">
-                  Chapter filter (optional)
-                  <InfoTooltip content="Restrict suggestions to resources from a specific chapter/department." />
-                </label>
-                <input
-                  type="text"
-                  list="chapter-options"
-                  value={req.chapter ?? ""}
-                  onChange={(e) =>
-                    updateReq(idx, {
-                      chapter: e.target.value || undefined,
-                    } as Partial<StaffingRequirement>)
-                  }
-                  placeholder="e.g. Art Direction"
-                  className="app-input"
-                />
-                {chapters.length > 0 && (
-                  <datalist id="chapter-options">
-                    {chapters.map((ch) => (
-                      <option key={ch} value={ch} />
-                    ))}
-                  </datalist>
-                )}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-
-      <button
-        type="button"
-        onClick={addReq}
-        className="mt-3 flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium"
-      >
-        <span className="text-lg leading-none">+</span> Add Role
-      </button>
-    </div>
-  );
-}
-
-// ─── Step 4: Suggestions ─────────────────────────────────────────────────────
-
-interface ReqSuggestionsProps {
-  req: StaffingRequirement;
-  startDate: string;
-  endDate: string;
-  assignments: Assignment[];
-  onAssign: (resourceId: string, resourceName: string, role: string) => void;
-  onUnassign: (resourceId: string) => void;
-}
-
-function ReqSuggestions({
-  req,
-  startDate,
-  endDate,
-  assignments,
-  onAssign,
-  onUnassign,
-}: ReqSuggestionsProps) {
-  const { canViewScores } = usePermissions();
-  const { data, isLoading } = trpc.staffing.getSuggestions.useQuery(
-    {
-      requiredSkills: req.requiredSkills,
-      preferredSkills: req.preferredSkills,
-      startDate: new Date(startDate),
-      endDate: new Date(endDate),
-      hoursPerDay: req.hoursPerDay,
-      ...(req.chapter ? { chapter: req.chapter } : {}),
-    },
-    {
-      enabled: req.requiredSkills.length > 0 && !!startDate && !!endDate,
-      staleTime: 30_000,
-    },
-  );
-
-  const reqAssignments = assignments.filter((a) => a.requirementId === req.id);
-  const assignedCount = reqAssignments.length;
-
-  if (!req.requiredSkills.length) {
-    return (
-      <p className="text-xs text-amber-600">
-        No skills defined for this demand yet. Go back to Step 3 and add required skills — the AI
-        will then suggest matching resources here.
-      </p>
-    );
-  }
-
-  if (isLoading) {
-    return <p className="text-xs text-gray-400 animate-pulse">Loading suggestions…</p>;
-  }
-
-  const suggestions = (data ?? []) as unknown as SuggestionItem[];
-
-  function availBadge(item: SuggestionItem) {
-    if (item.availabilityConflicts.length === 0) {
-      return (
-        <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-100 text-green-700">
-          Available
-        </span>
-      );
-    }
-    if (item.currentUtilization >= 100) {
-      return (
-        <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700">
-          Unavailable
-        </span>
-      );
-    }
-    return (
-      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700">
-        Partial
-      </span>
-    );
-  }
-
-  return (
-    <div>
-      <p className="text-xs text-gray-500 mb-2">
-        Assigned: {assignedCount} / {req.headcount} needed
-      </p>
-      <div className="space-y-1.5 max-h-52 overflow-y-auto">
-        {suggestions.length === 0 && (
-          <p className="text-xs text-gray-400">No matching resources found.</p>
-        )}
-        {suggestions.slice(0, 10).map((item) => {
-          const isAssigned = reqAssignments.some((a) => a.resourceId === item.resourceId);
-          return (
-            <div
-              key={item.resourceId}
-              className={clsx(
-                "flex items-center gap-2 px-2.5 py-1.5 rounded-lg border text-xs",
-                isAssigned
-                  ? "border-brand-300 bg-brand-50"
-                  : "border-gray-200 bg-white hover:border-gray-300",
-              )}
-            >
-              <div className="flex-1 min-w-0">
-                <div className="font-medium text-gray-800 truncate">{item.resourceName}</div>
-                <div className="text-gray-400 font-mono">{item.eid}</div>
-              </div>
-              <div className="flex items-center gap-1.5 flex-shrink-0">
-                <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 text-gray-600">
-                  Score {item.score}
-                </span>
-                {canViewScores && item.valueScore != null && (
-                  <span
-                    className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
-                      item.valueScore >= 70
-                        ? "bg-green-100 text-green-700"
-                        : item.valueScore >= 40
-                          ? "bg-amber-100 text-amber-700"
-                          : "bg-red-100 text-red-700"
-                    }`}
-                    title="Value Score (price/quality)"
-                  >
-                    ★ {item.valueScore}
-                  </span>
-                )}
-                <span className="text-gray-400">{Math.round(item.currentUtilization)}%</span>
-                {availBadge(item)}
-              </div>
-              {isAssigned ? (
-                <button
-                  type="button"
-                  onClick={() => onUnassign(item.resourceId)}
-                  className="flex-shrink-0 px-2 py-0.5 text-xs border border-brand-300 text-brand-700 rounded hover:bg-brand-100"
-                >
-                  Remove
-                </button>
-              ) : (
-                <button
-                  type="button"
-                  onClick={() => onAssign(item.resourceId, item.resourceName, req.role)}
-                  disabled={assignedCount >= req.headcount}
-                  className="flex-shrink-0 px-2 py-0.5 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-40"
-                >
-                  Assign
-                </button>
-              )}
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}
-
-interface Step4Props {
-  state: WizardState;
-  onChange: (patch: Partial<WizardState>) => void;
-}
-
-function Step4({ state, onChange }: Step4Props) {
-  function assign(requirementId: string, resourceId: string, resourceName: string, role: string) {
-    onChange({
-      assignments: [...state.assignments, { requirementId, resourceId, resourceName, role }],
-    });
-  }
-
-  function unassign(requirementId: string, resourceId: string) {
-    onChange({
-      assignments: state.assignments.filter(
-        (a) => !(a.requirementId === requirementId && a.resourceId === resourceId),
-      ),
-    });
-  }
-
-  if (state.staffingReqs.length === 0) {
-    return (
-      <p className="text-sm text-gray-400 text-center py-8">
-        No staffing requirements defined. Go back to Step 3 to add some.
-      </p>
-    );
-  }
-
-  return (
-    <div className="space-y-5 max-h-[55vh] overflow-y-auto pr-1">
-      <p className="text-xs text-gray-500 flex items-center gap-1">
-        AI-powered resource suggestions based on skills, availability, and utilization.
-        <InfoTooltip content="Resources are ranked by skill match score, current utilization, and availability in the project period. Assign resources here or leave unfilled to create placeholder demands." />
-      </p>
-      {state.staffingReqs.map((req) => (
-        <div key={req.id} className="border border-gray-200 rounded-lg p-3">
-          <div className="flex items-center gap-2 mb-2">
-            <span className="font-medium text-sm text-gray-800">{req.role || "Unnamed Role"}</span>
-            <span className="text-xs text-gray-400">
-              {req.hoursPerDay}h/day · {req.headcount} needed
-            </span>
-          </div>
-          <ReqSuggestions
-            req={req}
-            startDate={state.startDate}
-            endDate={state.endDate}
-            assignments={state.assignments}
-            onAssign={(resourceId, resourceName, role) =>
-              assign(req.id, resourceId, resourceName, role)
-            }
-            onUnassign={(resourceId) => unassign(req.id, resourceId)}
-          />
-        </div>
-      ))}
-    </div>
-  );
-}
-
-// ─── Step 5: Review & Create ─────────────────────────────────────────────────
-
-interface Step5Props {
-  state: WizardState;
-  onChange: (patch: Partial<WizardState>) => void;
-  onSubmit: () => void;
-  isSubmitting: boolean;
-  submitError: string | null;
-  submitWarnings: string[];
-}
-
-function Step5({
-  state,
-  onChange,
-  onSubmit,
-  isSubmitting,
-  submitError,
-  submitWarnings,
-}: Step5Props) {
-  const totalAssignedCostHint = useMemo(() => {
-    // Very rough hint: sum hoursPerDay * headcount across all requirements
-    return state.staffingReqs.reduce((sum, r) => sum + r.hoursPerDay * r.headcount, 0);
-  }, [state.staffingReqs]);
-
-  return (
-    <div className="space-y-4">
-      {/* Project summary */}
-      <div className="flex items-center gap-1 mb-1">
-        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider">
-          Project Summary
-        </p>
-        <InfoTooltip content="Review all project details before creation. The project, staffing demands, and any pre-assigned resources will be created together." />
-      </div>
-      <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-2">
-        <div className="grid grid-cols-2 gap-x-6 gap-y-1">
-          <div>
-            <span className="text-gray-500">Code:</span>{" "}
-            <span className="font-mono font-medium">{state.shortCode || "—"}</span>
-          </div>
-          <div>
-            <span className="text-gray-500">Name:</span>{" "}
-            <span className="font-medium">{state.name || "—"}</span>
-          </div>
-          <div>
-            <span className="text-gray-500">Order Type:</span> {state.orderType}
-          </div>
-          <div>
-            <span className="text-gray-500">Allocation Type:</span> {state.allocationType}
-          </div>
-          <div>
-            <span className="text-gray-500">Status on create:</span>{" "}
-            {state.saveAsDraft ? "Draft" : "Active"}
-          </div>
-          <div>
-            <span className="text-gray-500">Budget:</span>{" "}
-            {state.budgetEur ? `€${parseFloat(state.budgetEur).toLocaleString()}` : "—"}
-          </div>
-          <div>
-            <span className="text-gray-500">Dates:</span> {state.startDate} → {state.endDate}
-          </div>
-          <div>
-            <span className="text-gray-500">Win %:</span> {state.winProbability}%
-          </div>
-          {state.responsiblePerson && (
-            <div className="col-span-2">
-              <span className="text-gray-500">Responsible:</span> {state.responsiblePerson}
-            </div>
-          )}
-          {state.blueprintName && (
-            <div className="col-span-2">
-              <span className="text-gray-500">Blueprint:</span> {state.blueprintName}
-            </div>
-          )}
-        </div>
-        {/* Blueprint custom fields summary */}
-        {state.blueprintFieldDefs.length > 0 && Object.keys(state.dynamicFields).length > 0 && (
-          <div className="border-t border-gray-200 pt-2 mt-2 space-y-1">
-            <p className="text-xs text-gray-400 font-medium">Custom Fields</p>
-            {state.blueprintFieldDefs.map((field) => {
-              const val = state.dynamicFields[field.key];
-              if (val === undefined || val === null || val === "") return null;
-              const display = Array.isArray(val) ? val.join(", ") : String(val);
-              return (
-                <div key={field.key} className="flex gap-2 text-xs">
-                  <span className="text-gray-500">{field.label}:</span>
-                  <span className="font-medium truncate">{display}</span>
-                </div>
-              );
-            })}
-          </div>
-        )}
-      </div>
-
-      {/* Staffing summary */}
-      {state.staffingReqs.length > 0 && (
-        <div>
-          <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-2">
-            Staffing Requirements
-            {totalAssignedCostHint > 0 && (
-              <span className="ml-2 normal-case font-normal text-gray-400">
-                · {totalAssignedCostHint.toFixed(1)} total h/day across all roles
-              </span>
-            )}
-          </p>
-          <div className="space-y-1.5">
-            {state.staffingReqs.map((req) => {
-              const assigned = state.assignments.filter((a) => a.requirementId === req.id);
-              const assignedNames = assigned.map((a) => a.resourceName);
-              const unassigned = req.headcount - assigned.length;
-              return (
-                <div key={req.id} className="px-3 py-2 rounded-lg bg-gray-50 text-sm">
-                  <div className="flex items-center gap-2">
-                    <span className="flex-1 font-medium">{req.role || "Unnamed"}</span>
-                    <span className="text-gray-400 text-xs">{req.hoursPerDay}h/day</span>
-                    {req.budgetCents ? (
-                      <span className="text-xs text-gray-400">
-                        {formatCents(req.budgetCents)} EUR
-                      </span>
-                    ) : null}
-                    <span
-                      className={clsx(
-                        "text-xs font-medium",
-                        assigned.length >= req.headcount ? "text-green-600" : "text-amber-600",
-                      )}
-                    >
-                      {assigned.length}/{req.headcount} assigned
-                    </span>
-                  </div>
-                  {(req.requiredSkills.length > 0 || (req.preferredSkills ?? []).length > 0) && (
-                    <div className="mt-1 flex flex-wrap gap-1">
-                      {req.requiredSkills.map((s) => (
-                        <span
-                          key={s}
-                          className="px-1.5 py-0.5 rounded text-[10px] bg-brand-100 text-brand-700"
-                        >
-                          {s}
-                        </span>
-                      ))}
-                      {(req.preferredSkills ?? []).map((s) => (
-                        <span
-                          key={s}
-                          className="px-1.5 py-0.5 rounded text-[10px] bg-gray-100 text-gray-500"
-                        >
-                          {s}
-                        </span>
-                      ))}
-                    </div>
-                  )}
-                  {assignedNames.length > 0 && (
-                    <div className="mt-1 text-xs text-gray-500">
-                      Assigned: {assignedNames.join(", ")}
-                      {unassigned > 0 && ` · ${unassigned} open seat${unassigned > 1 ? "s" : ""}`}
-                    </div>
-                  )}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      )}
-
-      {/* Post-creation warnings */}
-      {submitWarnings.length > 0 && (
-        <div className="px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg text-sm text-amber-800 dark:text-amber-300 space-y-1">
-          <p className="font-medium">Project created with warnings:</p>
-          {submitWarnings.map((w, i) => (
-            <p key={i} className="text-xs">
-              {w}
-            </p>
-          ))}
-          <p className="text-xs mt-1 text-amber-600 dark:text-amber-400">
-            You can fix these staffing items from the project detail page.
-          </p>
-        </div>
-      )}
-
-      {/* Draft toggle */}
-      <div className="border border-gray-200 rounded-lg p-4">
-        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-3 flex items-center gap-1">
-          Save as
-          <InfoTooltip content="Draft projects are hidden from the timeline until activated. Active projects appear on the timeline immediately." />
-        </p>
-        <div className="flex gap-4">
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="saveMode"
-              checked={state.saveAsDraft}
-              onChange={() => onChange({ saveAsDraft: true })}
-              className="accent-brand-600"
-            />
-            <div>
-              <div className="text-sm font-medium">Draft</div>
-              <div className="text-xs text-gray-400">Hidden on timeline until enabled</div>
-            </div>
-          </label>
-          <label className="flex items-center gap-2 cursor-pointer">
-            <input
-              type="radio"
-              name="saveMode"
-              checked={!state.saveAsDraft}
-              onChange={() => onChange({ saveAsDraft: false })}
-              className="accent-brand-600"
-            />
-            <div>
-              <div className="text-sm font-medium">Active</div>
-              <div className="text-xs text-gray-400">Visible on timeline immediately</div>
-            </div>
-          </label>
-        </div>
-      </div>
-
-      {submitError && (
-        <div className="px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
-          {submitError}
-        </div>
-      )}
-
-      <div className="flex justify-end">
-        <button type="button" onClick={onSubmit} disabled={isSubmitting} className={BTN_PRIMARY}>
-          {isSubmitting
-            ? "Creating…"
-            : state.saveAsDraft
-              ? "Create Draft Project"
-              : "Create Active Project"}
-        </button>
-      </div>
-    </div>
-  );
-}
-
-// ─── Wizard shell ─────────────────────────────────────────────────────────────
+import { StepBar } from "./project-wizard/StepBar.js";
+import { Step1Identity } from "./project-wizard/Step1Identity.js";
+import { Step2Timeline } from "./project-wizard/Step2Timeline.js";
+import { Step3Staffing } from "./project-wizard/Step3Staffing.js";
+import { Step4Suggestions } from "./project-wizard/Step4Suggestions.js";
+import { Step5Review } from "./project-wizard/Step5Review.js";
 
 interface ProjectWizardProps {
   open: boolean;
@@ -1336,12 +63,12 @@ export function ProjectWizard({ open, onClose, onSuccess }: ProjectWizardProps)
         <div className="px-6 py-5">
           <StepBar current={step} />
 
-          {step === 0 && <Step1 state={state} onChange={patch} />}
-          {step === 1 && <Step2 state={state} onChange={patch} />}
-          {step === 2 && <Step3 state={state} onChange={patch} />}
-          {step === 3 && <Step4 state={state} onChange={patch} />}
+          {step === 0 && <Step1Identity state={state} onChange={patch} />}
+          {step === 1 && <Step2Timeline state={state} onChange={patch} />}
+          {step === 2 && <Step3Staffing state={state} onChange={patch} />}
+          {step === 3 && <Step4Suggestions state={state} onChange={patch} />}
           {step === 4 && (
-            <Step5
+            <Step5Review
               state={state}
               onChange={patch}
               onSubmit={handleSubmit}
diff --git a/apps/web/src/components/projects/project-wizard/DynamicFieldInput.tsx b/apps/web/src/components/projects/project-wizard/DynamicFieldInput.tsx
new file mode 100644
index 0000000..d469901
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/DynamicFieldInput.tsx
@@ -0,0 +1,109 @@
+import type { BlueprintFieldDefinition } from "@capakraken/shared";
+import { FieldType } from "@capakraken/shared";
+import { DateInput } from "~/components/ui/DateInput.js";
+
+export function DynamicFieldInput({
+  field,
+  value,
+  onChange,
+}: {
+  field: BlueprintFieldDefinition;
+  value: unknown;
+  onChange: (key: string, val: unknown) => void;
+}) {
+  const strVal = value !== undefined && value !== null ? String(value) : "";
+  const arrVal = Array.isArray(value) ? (value as string[]) : [];
+
+  switch (field.type) {
+    case FieldType.TEXTAREA:
+      return (
+        <textarea
+          value={strVal}
+          onChange={(e) => onChange(field.key, e.target.value)}
+          placeholder={field.placeholder}
+          rows={3}
+          className="app-input"
+        />
+      );
+    case FieldType.NUMBER:
+      return (
+        <input
+          type="number"
+          value={strVal}
+          min={field.validation?.min}
+          max={field.validation?.max}
+          onChange={(e) =>
+            onChange(field.key, e.target.value === "" ? "" : parseFloat(e.target.value))
+          }
+          placeholder={field.placeholder}
+          className="app-input"
+        />
+      );
+    case FieldType.BOOLEAN:
+      return (
+        <label className="flex items-center gap-2 text-sm cursor-pointer">
+          <input
+            type="checkbox"
+            checked={value === true || value === "true"}
+            onChange={(e) => onChange(field.key, e.target.checked)}
+            className="accent-brand-600"
+          />
+          {field.description && <span className="text-gray-500">{field.description}</span>}
+        </label>
+      );
+    case FieldType.DATE:
+      return <DateInput value={strVal} onChange={(v) => onChange(field.key, v)} />;
+    case FieldType.SELECT:
+      return (
+        <select
+          value={strVal}
+          onChange={(e) => onChange(field.key, e.target.value)}
+          className="app-select w-full"
+        >
+          <option value="">— select —</option>
+          {(field.options ?? []).map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </select>
+      );
+    case FieldType.MULTI_SELECT:
+      return (
+        <div className="flex flex-wrap gap-2">
+          {(field.options ?? []).map((opt) => {
+            const checked = arrVal.includes(opt.value);
+            return (
+              <label key={opt.value} className="flex items-center gap-1.5 text-sm cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  onChange={(e) => {
+                    const next = e.target.checked
+                      ? [...arrVal, opt.value]
+                      : arrVal.filter((v) => v !== opt.value);
+                    onChange(field.key, next);
+                  }}
+                  className="accent-brand-600"
+                />
+                {opt.label}
+              </label>
+            );
+          })}
+        </div>
+      );
+    default:
+      // TEXT, URL, EMAIL
+      return (
+        <input
+          type={
+            field.type === FieldType.EMAIL ? "email" : field.type === FieldType.URL ? "url" : "text"
+          }
+          value={strVal}
+          onChange={(e) => onChange(field.key, e.target.value)}
+          placeholder={field.placeholder}
+          className="app-input"
+        />
+      );
+  }
+}
diff --git a/apps/web/src/components/projects/project-wizard/ResourcePersonPicker.tsx b/apps/web/src/components/projects/project-wizard/ResourcePersonPicker.tsx
new file mode 100644
index 0000000..4eaa720
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/ResourcePersonPicker.tsx
@@ -0,0 +1,113 @@
+import { useState, useEffect, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
+import { trpc } from "~/lib/trpc/client.js";
+import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
+
+export function ResourcePersonPicker({
+  value,
+  onChange,
+}: {
+  value: string;
+  onChange: (v: string) => void;
+}) {
+  const [query, setQuery] = useState(value);
+  const [open, setOpen] = useState(false);
+  const [debouncedSearch, setDebouncedSearch] = useState("");
+  const [isConfirmed, setIsConfirmed] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedSearch(query), 200);
+    return () => clearTimeout(timer);
+  }, [query]);
+
+  const { data } = trpc.resource.directory.useQuery(
+    { isActive: true, search: debouncedSearch || undefined, limit: 30 },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    { staleTime: 15_000, placeholderData: (prev: any) => prev },
+  );
+  const filtered = useMemo(
+    () =>
+      (data?.resources ?? []) as unknown as Array<{ id: string; displayName: string; eid: string }>,
+    [data],
+  );
+
+  useEffect(() => {
+    setQuery(value);
+    if (!value) setIsConfirmed(false);
+  }, [value]);
+
+  const { panelRef, position } = useAnchoredOverlay<HTMLInputElement>({
+    open,
+    onClose: () => setOpen(false),
+    align: "start",
+    matchTriggerWidth: true,
+    triggerRef: inputRef,
+  });
+
+  return (
+    <div className="relative">
+      <input
+        ref={inputRef}
+        type="text"
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value);
+          onChange(e.target.value);
+          setIsConfirmed(false);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        placeholder="Search by name or EID…"
+        className={`app-input ${isConfirmed ? "ring-2 ring-green-400 ring-offset-0" : ""}`}
+      />
+      {isConfirmed && (
+        <span className="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-green-500">
+          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2.5}
+              d="M5 13l4 4L19 7"
+            />
+          </svg>
+        </span>
+      )}
+      {open && filtered.length > 0 && typeof document !== "undefined"
+        ? createPortal(
+            <div
+              ref={panelRef}
+              className="fixed z-[9998] max-h-48 overflow-y-auto rounded-lg border border-gray-200 bg-white shadow-lg"
+              style={{
+                top: position.top,
+                left: position.left,
+                width: position.minWidth,
+              }}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              <ul>
+                {filtered.map((r) => (
+                  <li key={r.id}>
+                    <button
+                      type="button"
+                      onMouseDown={() => {
+                        onChange(r.displayName);
+                        setQuery(r.displayName);
+                        setIsConfirmed(true);
+                        setOpen(false);
+                      }}
+                      className="flex w-full items-baseline gap-2 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"
+                    >
+                      <span className="truncate">{r.displayName}</span>
+                      <span className="shrink-0 font-mono text-xs text-gray-400">{r.eid}</span>
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </div>,
+            document.body,
+          )
+        : null}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/Step1Identity.tsx b/apps/web/src/components/projects/project-wizard/Step1Identity.tsx
new file mode 100644
index 0000000..f10d035
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/Step1Identity.tsx
@@ -0,0 +1,225 @@
+import { clsx } from "clsx";
+import type { StaffingRequirement, BlueprintFieldDefinition } from "@capakraken/shared";
+import { BlueprintTarget, FieldType, RolePresetsSchema } from "@capakraken/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { DynamicFieldInput } from "./DynamicFieldInput.js";
+import { ORDER_TYPE_OPTIONS, ALLOCATION_TYPE_OPTIONS, type WizardState } from "./types.js";
+
+interface Step1Props {
+  state: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step1Identity({ state, onChange }: Step1Props) {
+  const { data: blueprints } = trpc.blueprint.list.useQuery(
+    { target: BlueprintTarget.PROJECT, isActive: true },
+    { staleTime: 30_000 },
+  ) as {
+    data:
+      | Array<{
+          id: string;
+          name: string;
+          description?: string | null;
+          rolePresets?: unknown;
+          fieldDefs?: unknown;
+        }>
+      | undefined;
+  };
+
+  const selectedBp = blueprints?.find((b) => b.id === state.blueprintId);
+
+  function selectBlueprint(id: string | null) {
+    if (!id) {
+      onChange({
+        blueprintId: null,
+        blueprintName: null,
+        blueprintFieldDefs: [],
+        dynamicFields: {},
+      });
+      return;
+    }
+    const bp = blueprints?.find((b) => b.id === id);
+    const parsedPresets = RolePresetsSchema.safeParse(
+      Array.isArray(bp?.rolePresets) ? bp.rolePresets : [],
+    );
+    const presets = (parsedPresets.success
+      ? parsedPresets.data
+      : []) as unknown as StaffingRequirement[];
+    const rawFieldDefs = Array.isArray(bp?.fieldDefs) ? (bp.fieldDefs as unknown[]) : [];
+    const fieldDefs = rawFieldDefs.filter(
+      (f): f is BlueprintFieldDefinition =>
+        typeof f === "object" && f !== null && "key" in f && "type" in f && "label" in f,
+    );
+    const defaultDynamicFields: Record<string, unknown> = {};
+    for (const field of fieldDefs) {
+      if (field.defaultValue !== undefined) {
+        defaultDynamicFields[field.key] = field.defaultValue;
+      }
+    }
+    onChange({
+      blueprintId: id,
+      blueprintName: bp?.name ?? null,
+      blueprintFieldDefs: fieldDefs,
+      staffingReqs: presets,
+      dynamicFields: defaultDynamicFields,
+    });
+  }
+
+  return (
+    <div className="space-y-5">
+      {/* Blueprint picker */}
+      <div>
+        <label className="app-label">
+          Project Blueprint (optional)
+          <InfoTooltip content="Blueprints are templates that pre-fill role presets and default settings. Selecting one loads staffing requirements into Step 3." />
+        </label>
+        <div className="grid grid-cols-2 sm:grid-cols-3 gap-2 mb-2">
+          <button
+            type="button"
+            onClick={() => selectBlueprint(null)}
+            className={clsx(
+              "text-left p-3 rounded-lg border text-sm transition-colors",
+              !state.blueprintId
+                ? "border-brand-500 bg-brand-50 text-brand-700"
+                : "border-gray-200 hover:border-gray-300 text-gray-600",
+            )}
+          >
+            <div className="font-medium">No Blueprint</div>
+            <div className="text-xs text-gray-400 mt-0.5">Start blank</div>
+          </button>
+          {(blueprints ?? []).map((bp) => (
+            <button
+              key={bp.id}
+              type="button"
+              onClick={() => selectBlueprint(bp.id)}
+              className={clsx(
+                "text-left p-3 rounded-lg border text-sm transition-colors",
+                state.blueprintId === bp.id
+                  ? "border-brand-500 bg-brand-50 text-brand-700"
+                  : "border-gray-200 hover:border-gray-300 text-gray-600",
+              )}
+            >
+              <div className="font-medium truncate">{bp.name}</div>
+              {bp.description && (
+                <div className="text-xs text-gray-400 mt-0.5 truncate">{bp.description}</div>
+              )}
+              {Array.isArray(bp.rolePresets) && bp.rolePresets.length > 0 && (
+                <div className="text-xs text-brand-500 mt-1">
+                  {bp.rolePresets.length} role preset{bp.rolePresets.length !== 1 ? "s" : ""}
+                </div>
+              )}
+            </button>
+          ))}
+        </div>
+        {selectedBp && (
+          <p className="text-xs text-brand-600">
+            Selected: <strong>{selectedBp.name}</strong>
+            {Array.isArray(selectedBp.rolePresets) && selectedBp.rolePresets.length > 0
+              ? ` — ${selectedBp.rolePresets.length} role presets will be loaded in Step 3`
+              : ""}
+          </p>
+        )}
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="app-label">
+            Short Code *
+            <InfoTooltip content="Unique chargecode for this project, used for time tracking and cost attribution. Must be uppercase alphanumeric." />
+          </label>
+          <input
+            type="text"
+            value={state.shortCode}
+            onChange={(e) => onChange({ shortCode: e.target.value.toUpperCase() })}
+            placeholder="e.g. BMW26D"
+            className="app-input"
+          />
+          <p className="text-xs text-gray-400 mt-0.5">Uppercase alphanumeric, max 20 chars</p>
+        </div>
+
+        <div>
+          <label className="app-label">
+            Project Name *
+            <InfoTooltip content="Display name shown on the timeline and in reports." />
+          </label>
+          <input
+            type="text"
+            value={state.name}
+            onChange={(e) => onChange({ name: e.target.value })}
+            placeholder="e.g. BMW X3 Campaign"
+            className="app-input"
+          />
+        </div>
+
+        <div>
+          <label className="app-label">
+            Order Type *
+            <InfoTooltip content="BD = Business Development (pre-sales), CHARGEABLE = billable client work, INTERNAL = internal project, OVERHEAD = non-project overhead." />
+          </label>
+          <select
+            value={state.orderType}
+            onChange={(e) => onChange({ orderType: e.target.value })}
+            className="app-select w-full"
+          >
+            {ORDER_TYPE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+
+        <div>
+          <label className="app-label">
+            Allocation Type *
+            <InfoTooltip content="INT = staffed with internal resources, EXT = staffed with external contractors or freelancers." />
+          </label>
+          <select
+            value={state.allocationType}
+            onChange={(e) => onChange({ allocationType: e.target.value })}
+            className="app-select w-full"
+          >
+            {ALLOCATION_TYPE_OPTIONS.map((opt) => (
+              <option key={opt.value} value={opt.value}>
+                {opt.label}
+              </option>
+            ))}
+          </select>
+        </div>
+      </div>
+
+      {/* Blueprint custom fields */}
+      {state.blueprintFieldDefs.length > 0 && (
+        <div className="border-t border-gray-100 pt-4 space-y-3">
+          <p className="text-xs font-medium text-gray-500 uppercase tracking-wider">
+            Blueprint Fields — {state.blueprintName}
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+            {[...state.blueprintFieldDefs]
+              .sort((a, b) => a.order - b.order)
+              .map((field) => (
+                <div
+                  key={field.key}
+                  className={field.type === FieldType.TEXTAREA ? "col-span-2" : ""}
+                >
+                  <label className="app-label">
+                    {field.label}
+                    {field.required && " *"}
+                    {field.description && <InfoTooltip content={field.description} />}
+                  </label>
+                  <DynamicFieldInput
+                    field={field}
+                    value={state.dynamicFields[field.key]}
+                    onChange={(key, val) =>
+                      onChange({ dynamicFields: { ...state.dynamicFields, [key]: val } })
+                    }
+                  />
+                </div>
+              ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/Step2Timeline.tsx b/apps/web/src/components/projects/project-wizard/Step2Timeline.tsx
new file mode 100644
index 0000000..44242da
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/Step2Timeline.tsx
@@ -0,0 +1,80 @@
+import { DateInput } from "~/components/ui/DateInput.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { ResourcePersonPicker } from "./ResourcePersonPicker.js";
+import type { WizardState } from "./types.js";
+
+interface Step2Props {
+  state: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step2Timeline({ state, onChange }: Step2Props) {
+  return (
+    <div className="space-y-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="app-label">
+            Start Date *
+            <InfoTooltip content="First day of the project period. Assignments and budget tracking begin from this date." />
+          </label>
+          <DateInput value={state.startDate} onChange={(v) => onChange({ startDate: v })} />
+        </div>
+        <div>
+          <label className="app-label">
+            End Date *
+            <InfoTooltip content="Last day of the project period. Defines the timeline boundary for all assignments." />
+          </label>
+          <DateInput value={state.endDate} onChange={(v) => onChange({ endDate: v })} />
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+        <div>
+          <label className="app-label">
+            Budget (EUR)
+            <InfoTooltip content="Total project budget in EUR. Stored internally as cents. Used to track spending against assignments." />
+          </label>
+          <input
+            type="number"
+            min={0}
+            step={100}
+            value={state.budgetEur}
+            onChange={(e) => onChange({ budgetEur: e.target.value })}
+            placeholder="e.g. 50000"
+            className="app-input"
+          />
+        </div>
+        <div>
+          <label className="app-label">
+            Responsible Person
+            <InfoTooltip content="Project lead or account manager. Search by name or employee ID." />
+          </label>
+          <ResourcePersonPicker
+            value={state.responsiblePerson}
+            onChange={(v) => onChange({ responsiblePerson: v })}
+          />
+        </div>
+      </div>
+
+      <div>
+        <label className="app-label">
+          Win Probability: <strong>{state.winProbability}%</strong>
+          <InfoTooltip content="Likelihood of winning this project (0-100%). Affects the weighted pipeline value: budget x probability." />
+        </label>
+        <input
+          type="range"
+          min={0}
+          max={100}
+          step={5}
+          value={state.winProbability}
+          onChange={(e) => onChange({ winProbability: parseInt(e.target.value, 10) })}
+          className="w-full accent-brand-600"
+        />
+        <div className="flex justify-between text-xs text-gray-400 mt-0.5">
+          <span>0% (Unlikely)</span>
+          <span>100% (Confirmed)</span>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/Step3Staffing.tsx b/apps/web/src/components/projects/project-wizard/Step3Staffing.tsx
new file mode 100644
index 0000000..99a1b70
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/Step3Staffing.tsx
@@ -0,0 +1,249 @@
+import { clsx } from "clsx";
+import type { StaffingRequirement } from "@capakraken/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { SkillTagInput } from "~/components/ui/SkillTagInput.js";
+import { formatCents } from "~/lib/format.js";
+import { makeReq, type WizardState } from "./types.js";
+
+interface Step3Props {
+  state: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step3Staffing({ state, onChange }: Step3Props) {
+  const { data: rolesData } = trpc.role.list.useQuery({ isActive: true }, { staleTime: 30_000 });
+  const roles = rolesData ?? [];
+
+  const { data: chaptersData } = trpc.resource.chapters.useQuery(undefined, { staleTime: 60_000 });
+  const chapters = (chaptersData ?? []) as string[];
+
+  function updateReq(idx: number, patch: Partial<StaffingRequirement>) {
+    const next = state.staffingReqs.map((r, i) => (i === idx ? { ...r, ...patch } : r));
+    onChange({ staffingReqs: next });
+  }
+
+  function addReq() {
+    onChange({ staffingReqs: [...state.staffingReqs, makeReq()] });
+  }
+
+  function removeReq(idx: number) {
+    onChange({ staffingReqs: state.staffingReqs.filter((_, i) => i !== idx) });
+  }
+
+  return (
+    <div>
+      {state.blueprintId && state.staffingReqs.length > 0 && (
+        <div className="mb-3 px-3 py-2 bg-brand-50 border border-brand-200 rounded-lg text-xs text-brand-700">
+          Blueprint presets auto-loaded. Edit as needed.
+        </div>
+      )}
+
+      {/* Budget allocation summary */}
+      {state.budgetEur &&
+        parseFloat(state.budgetEur) > 0 &&
+        state.staffingReqs.length > 0 &&
+        (() => {
+          const projectBudgetCents = Math.round(parseFloat(state.budgetEur || "0") * 100);
+          const allocatedCents = state.staffingReqs.reduce(
+            (sum, r) => sum + (r.budgetCents ?? 0),
+            0,
+          );
+          const remainingCents = projectBudgetCents - allocatedCents;
+          const pct =
+            projectBudgetCents > 0 ? Math.round((allocatedCents / projectBudgetCents) * 100) : 0;
+          return (
+            <div
+              className={`mb-3 rounded-lg border p-3 text-xs ${remainingCents < 0 ? "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800 text-red-700 dark:text-red-400" : remainingCents === 0 ? "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800 text-green-700 dark:text-green-400" : "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800 text-amber-700 dark:text-amber-300"}`}
+            >
+              <div className="flex items-center justify-between mb-1.5">
+                <span className="font-semibold">Budget Allocation</span>
+                <span>{pct}% allocated</span>
+              </div>
+              <div className="w-full h-1.5 bg-gray-200 rounded-full overflow-hidden mb-1.5">
+                <div
+                  className={`h-full rounded-full transition-all ${remainingCents < 0 ? "bg-red-500" : remainingCents === 0 ? "bg-green-500" : "bg-amber-500"}`}
+                  style={{ width: `${Math.min(100, pct)}%` }}
+                />
+              </div>
+              <div className="flex justify-between">
+                <span>Project: {formatCents(projectBudgetCents)} EUR</span>
+                <span>Allocated: {formatCents(allocatedCents)} EUR</span>
+                <span className="font-semibold">Remaining: {formatCents(remainingCents)} EUR</span>
+              </div>
+            </div>
+          );
+        })()}
+
+      <div className="space-y-3 max-h-[45vh] overflow-y-auto pr-1">
+        {state.staffingReqs.length === 0 && (
+          <p className="text-sm text-gray-400 text-center py-8">
+            No requirements yet. Click &ldquo;+ Add Role&rdquo; to define staffing needs.
+          </p>
+        )}
+        {state.staffingReqs.map((req, idx) => (
+          <div key={req.id} className="border border-gray-200 rounded-lg p-3 bg-white">
+            <div className="flex flex-wrap items-start gap-2">
+              <div className="flex-1 min-w-32">
+                <label className="text-xs text-gray-400">
+                  Role *
+                  <InfoTooltip content="Select a predefined role or enter a custom role name. Defines the skill profile for this staffing demand." />
+                </label>
+                {roles.length > 0 ? (
+                  <select
+                    value={req.roleId ?? ""}
+                    onChange={(e) => {
+                      const selectedId = e.target.value;
+                      const matched = roles.find((ro) => ro.id === selectedId);
+                      if (selectedId && matched) {
+                        updateReq(idx, { roleId: matched.id, role: matched.name });
+                      } else {
+                        const { roleId: _r, ...rest } = state.staffingReqs[idx]!;
+                        void _r;
+                        onChange({
+                          staffingReqs: state.staffingReqs.map((r, i) => (i === idx ? rest : r)),
+                        });
+                      }
+                    }}
+                    className="app-select w-full"
+                  >
+                    <option value="">Custom / Free text…</option>
+                    {roles.map((ro) => (
+                      <option key={ro.id} value={ro.id}>
+                        {ro.name}
+                      </option>
+                    ))}
+                  </select>
+                ) : null}
+                {!req.roleId && (
+                  <input
+                    type="text"
+                    value={req.role}
+                    onChange={(e) => updateReq(idx, { role: e.target.value })}
+                    placeholder="e.g. 3D Artist"
+                    className={clsx("app-input", roles.length > 0 && "mt-1")}
+                  />
+                )}
+              </div>
+              <div className="w-20">
+                <label className="text-xs text-gray-400">
+                  h/day
+                  <InfoTooltip content="Planned working hours per day for this role." />
+                </label>
+                <input
+                  type="number"
+                  value={req.hoursPerDay}
+                  min={0}
+                  max={24}
+                  step={0.5}
+                  onChange={(e) => updateReq(idx, { hoursPerDay: parseFloat(e.target.value) || 0 })}
+                  className="app-input"
+                />
+              </div>
+              <div className="w-16">
+                <label className="text-xs text-gray-400">
+                  Count
+                  <InfoTooltip content="Number of people needed for this role. Unfilled seats become placeholder demands until assigned." />
+                </label>
+                <input
+                  type="number"
+                  value={req.headcount}
+                  min={1}
+                  max={20}
+                  onChange={(e) => updateReq(idx, { headcount: parseInt(e.target.value, 10) || 1 })}
+                  className="app-input"
+                />
+              </div>
+              <div className="w-28">
+                <label className="text-xs text-gray-400">
+                  Budget (EUR)
+                  <InfoTooltip content="Optional budget cap for this role. Tracked against actual assignment costs." />
+                </label>
+                <input
+                  type="number"
+                  value={req.budgetCents ? req.budgetCents / 100 : ""}
+                  min={0}
+                  step={100}
+                  onChange={(e) => {
+                    const val = parseFloat(e.target.value);
+                    updateReq(idx, {
+                      budgetCents: Number.isFinite(val) && val > 0 ? Math.round(val * 100) : 0,
+                    } as Partial<StaffingRequirement>);
+                  }}
+                  placeholder="0"
+                  className="app-input"
+                />
+              </div>
+              <div className="pt-5">
+                <button
+                  type="button"
+                  onClick={() => removeReq(idx)}
+                  className="app-action-danger-btn"
+                >
+                  ×
+                </button>
+              </div>
+            </div>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 mt-2">
+              <div>
+                <label className="text-xs text-gray-400">
+                  Required skills
+                  <InfoTooltip content="Skills a resource must have to be suggested for this role." />
+                </label>
+                <SkillTagInput
+                  value={req.requiredSkills}
+                  onChange={(skills) => updateReq(idx, { requiredSkills: skills })}
+                  placeholder="Add required skill…"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400">
+                  Preferred skills (optional)
+                  <InfoTooltip content="Nice-to-have skills that boost a resource's match score but are not mandatory." />
+                </label>
+                <SkillTagInput
+                  value={req.preferredSkills ?? []}
+                  onChange={(skills) => updateReq(idx, { preferredSkills: skills })}
+                  placeholder="Add preferred skill…"
+                />
+              </div>
+              <div>
+                <label className="text-xs text-gray-400">
+                  Chapter filter (optional)
+                  <InfoTooltip content="Restrict suggestions to resources from a specific chapter/department." />
+                </label>
+                <input
+                  type="text"
+                  list="chapter-options"
+                  value={req.chapter ?? ""}
+                  onChange={(e) =>
+                    updateReq(idx, {
+                      chapter: e.target.value || undefined,
+                    } as Partial<StaffingRequirement>)
+                  }
+                  placeholder="e.g. Art Direction"
+                  className="app-input"
+                />
+                {chapters.length > 0 && (
+                  <datalist id="chapter-options">
+                    {chapters.map((ch) => (
+                      <option key={ch} value={ch} />
+                    ))}
+                  </datalist>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <button
+        type="button"
+        onClick={addReq}
+        className="mt-3 flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium"
+      >
+        <span className="text-lg leading-none">+</span> Add Role
+      </button>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/Step4Suggestions.tsx b/apps/web/src/components/projects/project-wizard/Step4Suggestions.tsx
new file mode 100644
index 0000000..ce49621
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/Step4Suggestions.tsx
@@ -0,0 +1,209 @@
+import { clsx } from "clsx";
+import type { StaffingRequirement } from "@capakraken/shared";
+import { trpc } from "~/lib/trpc/client.js";
+import { usePermissions } from "~/hooks/usePermissions.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import type { Assignment, SuggestionItem, WizardState } from "./types.js";
+
+interface ReqSuggestionsProps {
+  req: StaffingRequirement;
+  startDate: string;
+  endDate: string;
+  assignments: Assignment[];
+  onAssign: (resourceId: string, resourceName: string, role: string) => void;
+  onUnassign: (resourceId: string) => void;
+}
+
+function ReqSuggestions({
+  req,
+  startDate,
+  endDate,
+  assignments,
+  onAssign,
+  onUnassign,
+}: ReqSuggestionsProps) {
+  const { canViewScores } = usePermissions();
+  const { data, isLoading } = trpc.staffing.getSuggestions.useQuery(
+    {
+      requiredSkills: req.requiredSkills,
+      preferredSkills: req.preferredSkills,
+      startDate: new Date(startDate),
+      endDate: new Date(endDate),
+      hoursPerDay: req.hoursPerDay,
+      ...(req.chapter ? { chapter: req.chapter } : {}),
+    },
+    {
+      enabled: req.requiredSkills.length > 0 && !!startDate && !!endDate,
+      staleTime: 30_000,
+    },
+  );
+
+  const reqAssignments = assignments.filter((a) => a.requirementId === req.id);
+  const assignedCount = reqAssignments.length;
+
+  if (!req.requiredSkills.length) {
+    return (
+      <p className="text-xs text-amber-600">
+        No skills defined for this demand yet. Go back to Step 3 and add required skills — the AI
+        will then suggest matching resources here.
+      </p>
+    );
+  }
+
+  if (isLoading) {
+    return <p className="text-xs text-gray-400 animate-pulse">Loading suggestions…</p>;
+  }
+
+  const suggestions = (data ?? []) as unknown as SuggestionItem[];
+
+  function availBadge(item: SuggestionItem) {
+    if (item.availabilityConflicts.length === 0) {
+      return (
+        <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-green-100 text-green-700">
+          Available
+        </span>
+      );
+    }
+    if (item.currentUtilization >= 100) {
+      return (
+        <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-red-100 text-red-700">
+          Unavailable
+        </span>
+      );
+    }
+    return (
+      <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-amber-100 text-amber-700">
+        Partial
+      </span>
+    );
+  }
+
+  return (
+    <div>
+      <p className="text-xs text-gray-500 mb-2">
+        Assigned: {assignedCount} / {req.headcount} needed
+      </p>
+      <div className="space-y-1.5 max-h-52 overflow-y-auto">
+        {suggestions.length === 0 && (
+          <p className="text-xs text-gray-400">No matching resources found.</p>
+        )}
+        {suggestions.slice(0, 10).map((item) => {
+          const isAssigned = reqAssignments.some((a) => a.resourceId === item.resourceId);
+          return (
+            <div
+              key={item.resourceId}
+              className={clsx(
+                "flex items-center gap-2 px-2.5 py-1.5 rounded-lg border text-xs",
+                isAssigned
+                  ? "border-brand-300 bg-brand-50"
+                  : "border-gray-200 bg-white hover:border-gray-300",
+              )}
+            >
+              <div className="flex-1 min-w-0">
+                <div className="font-medium text-gray-800 truncate">{item.resourceName}</div>
+                <div className="text-gray-400 font-mono">{item.eid}</div>
+              </div>
+              <div className="flex items-center gap-1.5 flex-shrink-0">
+                <span className="px-1.5 py-0.5 rounded text-[10px] font-medium bg-gray-100 text-gray-600">
+                  Score {item.score}
+                </span>
+                {canViewScores && item.valueScore != null && (
+                  <span
+                    className={`px-1.5 py-0.5 rounded text-[10px] font-medium ${
+                      item.valueScore >= 70
+                        ? "bg-green-100 text-green-700"
+                        : item.valueScore >= 40
+                          ? "bg-amber-100 text-amber-700"
+                          : "bg-red-100 text-red-700"
+                    }`}
+                    title="Value Score (price/quality)"
+                  >
+                    ★ {item.valueScore}
+                  </span>
+                )}
+                <span className="text-gray-400">{Math.round(item.currentUtilization)}%</span>
+                {availBadge(item)}
+              </div>
+              {isAssigned ? (
+                <button
+                  type="button"
+                  onClick={() => onUnassign(item.resourceId)}
+                  className="flex-shrink-0 px-2 py-0.5 text-xs border border-brand-300 text-brand-700 rounded hover:bg-brand-100"
+                >
+                  Remove
+                </button>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => onAssign(item.resourceId, item.resourceName, req.role)}
+                  disabled={assignedCount >= req.headcount}
+                  className="flex-shrink-0 px-2 py-0.5 text-xs bg-brand-600 text-white rounded hover:bg-brand-700 disabled:opacity-40"
+                >
+                  Assign
+                </button>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+interface Step4Props {
+  state: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+}
+
+export function Step4Suggestions({ state, onChange }: Step4Props) {
+  function assign(requirementId: string, resourceId: string, resourceName: string, role: string) {
+    onChange({
+      assignments: [...state.assignments, { requirementId, resourceId, resourceName, role }],
+    });
+  }
+
+  function unassign(requirementId: string, resourceId: string) {
+    onChange({
+      assignments: state.assignments.filter(
+        (a) => !(a.requirementId === requirementId && a.resourceId === resourceId),
+      ),
+    });
+  }
+
+  if (state.staffingReqs.length === 0) {
+    return (
+      <p className="text-sm text-gray-400 text-center py-8">
+        No staffing requirements defined. Go back to Step 3 to add some.
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-5 max-h-[55vh] overflow-y-auto pr-1">
+      <p className="text-xs text-gray-500 flex items-center gap-1">
+        AI-powered resource suggestions based on skills, availability, and utilization.
+        <InfoTooltip content="Resources are ranked by skill match score, current utilization, and availability in the project period. Assign resources here or leave unfilled to create placeholder demands." />
+      </p>
+      {state.staffingReqs.map((req) => (
+        <div key={req.id} className="border border-gray-200 rounded-lg p-3">
+          <div className="flex items-center gap-2 mb-2">
+            <span className="font-medium text-sm text-gray-800">{req.role || "Unnamed Role"}</span>
+            <span className="text-xs text-gray-400">
+              {req.hoursPerDay}h/day · {req.headcount} needed
+            </span>
+          </div>
+          <ReqSuggestions
+            req={req}
+            startDate={state.startDate}
+            endDate={state.endDate}
+            assignments={state.assignments}
+            onAssign={(resourceId, resourceName, role) =>
+              assign(req.id, resourceId, resourceName, role)
+            }
+            onUnassign={(resourceId) => unassign(req.id, resourceId)}
+          />
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/Step5Review.tsx b/apps/web/src/components/projects/project-wizard/Step5Review.tsx
new file mode 100644
index 0000000..fb7f5d7
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/Step5Review.tsx
@@ -0,0 +1,233 @@
+import { useMemo } from "react";
+import { clsx } from "clsx";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
+import { formatCents } from "~/lib/format.js";
+import { BTN_PRIMARY, type WizardState } from "./types.js";
+
+interface Step5Props {
+  state: WizardState;
+  onChange: (patch: Partial<WizardState>) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+  submitError: string | null;
+  submitWarnings: string[];
+}
+
+export function Step5Review({
+  state,
+  onChange,
+  onSubmit,
+  isSubmitting,
+  submitError,
+  submitWarnings,
+}: Step5Props) {
+  const totalAssignedCostHint = useMemo(() => {
+    return state.staffingReqs.reduce((sum, r) => sum + r.hoursPerDay * r.headcount, 0);
+  }, [state.staffingReqs]);
+
+  return (
+    <div className="space-y-4">
+      {/* Project summary */}
+      <div className="flex items-center gap-1 mb-1">
+        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider">
+          Project Summary
+        </p>
+        <InfoTooltip content="Review all project details before creation. The project, staffing demands, and any pre-assigned resources will be created together." />
+      </div>
+      <div className="bg-gray-50 rounded-lg p-4 text-sm space-y-2">
+        <div className="grid grid-cols-2 gap-x-6 gap-y-1">
+          <div>
+            <span className="text-gray-500">Code:</span>{" "}
+            <span className="font-mono font-medium">{state.shortCode || "—"}</span>
+          </div>
+          <div>
+            <span className="text-gray-500">Name:</span>{" "}
+            <span className="font-medium">{state.name || "—"}</span>
+          </div>
+          <div>
+            <span className="text-gray-500">Order Type:</span> {state.orderType}
+          </div>
+          <div>
+            <span className="text-gray-500">Allocation Type:</span> {state.allocationType}
+          </div>
+          <div>
+            <span className="text-gray-500">Status on create:</span>{" "}
+            {state.saveAsDraft ? "Draft" : "Active"}
+          </div>
+          <div>
+            <span className="text-gray-500">Budget:</span>{" "}
+            {state.budgetEur ? `€${parseFloat(state.budgetEur).toLocaleString()}` : "—"}
+          </div>
+          <div>
+            <span className="text-gray-500">Dates:</span> {state.startDate} → {state.endDate}
+          </div>
+          <div>
+            <span className="text-gray-500">Win %:</span> {state.winProbability}%
+          </div>
+          {state.responsiblePerson && (
+            <div className="col-span-2">
+              <span className="text-gray-500">Responsible:</span> {state.responsiblePerson}
+            </div>
+          )}
+          {state.blueprintName && (
+            <div className="col-span-2">
+              <span className="text-gray-500">Blueprint:</span> {state.blueprintName}
+            </div>
+          )}
+        </div>
+        {/* Blueprint custom fields summary */}
+        {state.blueprintFieldDefs.length > 0 && Object.keys(state.dynamicFields).length > 0 && (
+          <div className="border-t border-gray-200 pt-2 mt-2 space-y-1">
+            <p className="text-xs text-gray-400 font-medium">Custom Fields</p>
+            {state.blueprintFieldDefs.map((field) => {
+              const val = state.dynamicFields[field.key];
+              if (val === undefined || val === null || val === "") return null;
+              const display = Array.isArray(val) ? val.join(", ") : String(val);
+              return (
+                <div key={field.key} className="flex gap-2 text-xs">
+                  <span className="text-gray-500">{field.label}:</span>
+                  <span className="font-medium truncate">{display}</span>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Staffing summary */}
+      {state.staffingReqs.length > 0 && (
+        <div>
+          <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-2">
+            Staffing Requirements
+            {totalAssignedCostHint > 0 && (
+              <span className="ml-2 normal-case font-normal text-gray-400">
+                · {totalAssignedCostHint.toFixed(1)} total h/day across all roles
+              </span>
+            )}
+          </p>
+          <div className="space-y-1.5">
+            {state.staffingReqs.map((req) => {
+              const assigned = state.assignments.filter((a) => a.requirementId === req.id);
+              const assignedNames = assigned.map((a) => a.resourceName);
+              const unassigned = req.headcount - assigned.length;
+              return (
+                <div key={req.id} className="px-3 py-2 rounded-lg bg-gray-50 text-sm">
+                  <div className="flex items-center gap-2">
+                    <span className="flex-1 font-medium">{req.role || "Unnamed"}</span>
+                    <span className="text-gray-400 text-xs">{req.hoursPerDay}h/day</span>
+                    {req.budgetCents ? (
+                      <span className="text-xs text-gray-400">
+                        {formatCents(req.budgetCents)} EUR
+                      </span>
+                    ) : null}
+                    <span
+                      className={clsx(
+                        "text-xs font-medium",
+                        assigned.length >= req.headcount ? "text-green-600" : "text-amber-600",
+                      )}
+                    >
+                      {assigned.length}/{req.headcount} assigned
+                    </span>
+                  </div>
+                  {(req.requiredSkills.length > 0 || (req.preferredSkills ?? []).length > 0) && (
+                    <div className="mt-1 flex flex-wrap gap-1">
+                      {req.requiredSkills.map((s) => (
+                        <span
+                          key={s}
+                          className="px-1.5 py-0.5 rounded text-[10px] bg-brand-100 text-brand-700"
+                        >
+                          {s}
+                        </span>
+                      ))}
+                      {(req.preferredSkills ?? []).map((s) => (
+                        <span
+                          key={s}
+                          className="px-1.5 py-0.5 rounded text-[10px] bg-gray-100 text-gray-500"
+                        >
+                          {s}
+                        </span>
+                      ))}
+                    </div>
+                  )}
+                  {assignedNames.length > 0 && (
+                    <div className="mt-1 text-xs text-gray-500">
+                      Assigned: {assignedNames.join(", ")}
+                      {unassigned > 0 && ` · ${unassigned} open seat${unassigned > 1 ? "s" : ""}`}
+                    </div>
+                  )}
+                </div>
+              );
+            })}
+          </div>
+        </div>
+      )}
+
+      {/* Post-creation warnings */}
+      {submitWarnings.length > 0 && (
+        <div className="px-3 py-2 bg-amber-50 dark:bg-amber-950/30 border border-amber-200 dark:border-amber-800 rounded-lg text-sm text-amber-800 dark:text-amber-300 space-y-1">
+          <p className="font-medium">Project created with warnings:</p>
+          {submitWarnings.map((w, i) => (
+            <p key={i} className="text-xs">
+              {w}
+            </p>
+          ))}
+          <p className="text-xs mt-1 text-amber-600 dark:text-amber-400">
+            You can fix these staffing items from the project detail page.
+          </p>
+        </div>
+      )}
+
+      {/* Draft toggle */}
+      <div className="border border-gray-200 rounded-lg p-4">
+        <p className="text-xs font-medium text-gray-600 uppercase tracking-wider mb-3 flex items-center gap-1">
+          Save as
+          <InfoTooltip content="Draft projects are hidden from the timeline until activated. Active projects appear on the timeline immediately." />
+        </p>
+        <div className="flex gap-4">
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              name="saveMode"
+              checked={state.saveAsDraft}
+              onChange={() => onChange({ saveAsDraft: true })}
+              className="accent-brand-600"
+            />
+            <div>
+              <div className="text-sm font-medium">Draft</div>
+              <div className="text-xs text-gray-400">Hidden on timeline until enabled</div>
+            </div>
+          </label>
+          <label className="flex items-center gap-2 cursor-pointer">
+            <input
+              type="radio"
+              name="saveMode"
+              checked={!state.saveAsDraft}
+              onChange={() => onChange({ saveAsDraft: false })}
+              className="accent-brand-600"
+            />
+            <div>
+              <div className="text-sm font-medium">Active</div>
+              <div className="text-xs text-gray-400">Visible on timeline immediately</div>
+            </div>
+          </label>
+        </div>
+      </div>
+
+      {submitError && (
+        <div className="px-3 py-2 bg-red-50 border border-red-200 rounded-lg text-sm text-red-700">
+          {submitError}
+        </div>
+      )}
+
+      <div className="flex justify-end">
+        <button type="button" onClick={onSubmit} disabled={isSubmitting} className={BTN_PRIMARY}>
+          {isSubmitting
+            ? "Creating…"
+            : state.saveAsDraft
+              ? "Create Draft Project"
+              : "Create Active Project"}
+        </button>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/src/components/projects/project-wizard/StepBar.tsx b/apps/web/src/components/projects/project-wizard/StepBar.tsx
new file mode 100644
index 0000000..41d7b46
--- /dev/null
+++ b/apps/web/src/components/projects/project-wizard/StepBar.tsx
@@ -0,0 +1,43 @@
+import { clsx } from "clsx";
+import { STEPS } from "./types.js";
+
+export function StepBar({ current }: { current: number }) {
+  return (
+    <div className="flex items-center gap-0 mb-6">
+      {STEPS.map((label, idx) => (
+        <div key={idx} className="flex items-center flex-1 min-w-0">
+          <div className="flex flex-col items-center flex-shrink-0">
+            <div
+              className={clsx(
+                "w-7 h-7 rounded-full flex items-center justify-center text-xs font-semibold transition-colors",
+                idx < current
+                  ? "bg-brand-600 text-white"
+                  : idx === current
+                    ? "bg-brand-600 text-white ring-4 ring-brand-100"
+                    : "bg-gray-100 text-gray-400",
+              )}
+            >
+              {idx < current ? "✓" : idx + 1}
+            </div>
+            <span
+              className={clsx(
+                "mt-1 text-[10px] text-center whitespace-nowrap leading-tight max-w-[72px]",
+                idx === current ? "text-brand-600 font-medium" : "text-gray-400",
+              )}
+            >
+              {label}
+            </span>
+          </div>
+          {idx < STEPS.length - 1 && (
+            <div
+              className={clsx(
+                "h-0.5 flex-1 mx-1 mt-[-14px]",
+                idx < current ? "bg-brand-400" : "bg-gray-200",
+              )}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  );
+}