Hartmut
1df208dbcc
Allocation bars that have active optimistic overrides (post-drag, awaiting server confirmation) now pulse subtly via animate-pulse. The pending set is derived from the existing optimisticAllocations map keys, requiring no additional state. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1554 lines
59 KiB
TypeScript
1554 lines
59 KiB
TypeScript
"use client";
|
||
|
||
import { createPortal } from "react-dom";
|
||
import { useState, useCallback, useEffect, useMemo, useRef } from "react";
|
||
import { clsx } from "clsx";
|
||
import type { StaffingRequirement, BlueprintFieldDefinition } from "@capakraken/shared";
|
||
import { BlueprintTarget, FieldType, OrderType, AllocationType, ProjectStatus, AllocationStatus, 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, toDateInputValue } from "~/lib/format.js";
|
||
import { ConfettiBurst } from "~/components/ui/ConfettiBurst.js";
|
||
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
||
import { useAnchoredOverlay } from "~/hooks/useAnchoredOverlay.js";
|
||
|
||
// ─── Constants ────────────────────────────────────────────────────────────────
|
||
|
||
const ORDER_TYPE_OPTIONS = [
|
||
{ value: "BD", label: "BD" },
|
||
{ value: "CHARGEABLE", label: "Chargeable" },
|
||
{ value: "INTERNAL", label: "Internal" },
|
||
{ value: "OVERHEAD", label: "Overhead" },
|
||
] as const;
|
||
|
||
const ALLOCATION_TYPE_OPTIONS = [
|
||
{ value: "INT", label: "INT" },
|
||
{ value: "EXT", label: "EXT" },
|
||
] as const;
|
||
|
||
const INPUT_CLS =
|
||
"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm w-full";
|
||
|
||
const SELECT_CLS =
|
||
"px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm w-full bg-white";
|
||
|
||
const LABEL_CLS = "block text-xs font-medium text-gray-600 mb-1";
|
||
|
||
const BTN_PRIMARY =
|
||
"px-5 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50 transition-colors";
|
||
|
||
const BTN_SECONDARY =
|
||
"px-5 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50 text-sm font-medium transition-colors";
|
||
|
||
const BTN_DANGER =
|
||
"px-2 py-1 text-red-500 hover:text-red-700 hover:bg-red-50 rounded text-sm transition-colors";
|
||
|
||
// ─── Types ────────────────────────────────────────────────────────────────────
|
||
|
||
interface Assignment {
|
||
requirementId: string;
|
||
resourceId: string;
|
||
resourceName: string;
|
||
role: string;
|
||
}
|
||
|
||
interface WizardState {
|
||
blueprintId: string | null;
|
||
shortCode: string;
|
||
name: string;
|
||
orderType: string;
|
||
allocationType: string;
|
||
startDate: string;
|
||
endDate: string;
|
||
budgetEur: string;
|
||
winProbability: number;
|
||
responsiblePerson: string;
|
||
staffingReqs: StaffingRequirement[];
|
||
assignments: Assignment[];
|
||
saveAsDraft: boolean;
|
||
dynamicFields: Record<string, unknown>;
|
||
blueprintName: string | null;
|
||
blueprintFieldDefs: BlueprintFieldDefinition[];
|
||
}
|
||
|
||
function makeDefaultState(): WizardState {
|
||
const today = toDateInputValue(new Date());
|
||
return {
|
||
blueprintId: null,
|
||
shortCode: "",
|
||
name: "",
|
||
orderType: "CHARGEABLE",
|
||
allocationType: "INT",
|
||
startDate: today,
|
||
endDate: today,
|
||
budgetEur: "",
|
||
winProbability: 100,
|
||
responsiblePerson: "",
|
||
staffingReqs: [],
|
||
assignments: [],
|
||
saveAsDraft: true,
|
||
dynamicFields: {},
|
||
blueprintName: null,
|
||
blueprintFieldDefs: [],
|
||
};
|
||
}
|
||
|
||
function makeReq(): StaffingRequirement {
|
||
return {
|
||
id: uuid(),
|
||
role: "",
|
||
requiredSkills: [],
|
||
preferredSkills: [],
|
||
hoursPerDay: 8,
|
||
headcount: 1,
|
||
};
|
||
}
|
||
|
||
// ─── Step indicators ─────────────────────────────────────────────────────────
|
||
|
||
const STEPS = [
|
||
"Blueprint & Identity",
|
||
"Timeline & Budget",
|
||
"Staffing Demand",
|
||
"Suggestions",
|
||
"Review & Create",
|
||
];
|
||
|
||
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={INPUT_CLS}
|
||
/>
|
||
);
|
||
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={INPUT_CLS}
|
||
/>
|
||
);
|
||
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={SELECT_CLS}
|
||
>
|
||
<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={INPUT_CLS}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
// ─── 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 },
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
) 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={LABEL_CLS}>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={LABEL_CLS}>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={INPUT_CLS}
|
||
/>
|
||
<p className="text-xs text-gray-400 mt-0.5">Uppercase alphanumeric, max 20 chars</p>
|
||
</div>
|
||
|
||
{/* Name */}
|
||
<div>
|
||
<label className={LABEL_CLS}>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={INPUT_CLS}
|
||
/>
|
||
</div>
|
||
|
||
{/* Order type */}
|
||
<div>
|
||
<label className={LABEL_CLS}>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={SELECT_CLS}
|
||
>
|
||
{ORDER_TYPE_OPTIONS.map((opt) => (
|
||
<option key={opt.value} value={opt.value}>
|
||
{opt.label}
|
||
</option>
|
||
))}
|
||
</select>
|
||
</div>
|
||
|
||
{/* Allocation type */}
|
||
<div>
|
||
<label className={LABEL_CLS}>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={SELECT_CLS}
|
||
>
|
||
{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={LABEL_CLS}>
|
||
{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={`${INPUT_CLS} ${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={LABEL_CLS}>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={LABEL_CLS}>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={LABEL_CLS}>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={INPUT_CLS}
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label className={LABEL_CLS}>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={LABEL_CLS}>
|
||
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 “+ Add Role” 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={SELECT_CLS}
|
||
>
|
||
<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(INPUT_CLS, 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={INPUT_CLS}
|
||
/>
|
||
</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={INPUT_CLS}
|
||
/>
|
||
</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={INPUT_CLS}
|
||
/>
|
||
</div>
|
||
<div className="pt-5">
|
||
<button
|
||
type="button"
|
||
onClick={() => removeReq(idx)}
|
||
className={BTN_DANGER}
|
||
>
|
||
×
|
||
</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={INPUT_CLS}
|
||
/>
|
||
{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 ─────────────────────────────────────────────────────
|
||
|
||
// Matches StaffingSuggestion from @capakraken/shared (returned by staffing.getSuggestions)
|
||
type SuggestionItem = {
|
||
resourceId: string;
|
||
resourceName: string;
|
||
eid: string;
|
||
score: number;
|
||
currentUtilization: number;
|
||
availabilityConflicts: string[];
|
||
estimatedDailyCostCents: number;
|
||
valueScore?: number;
|
||
};
|
||
|
||
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 ─────────────────────────────────────────────────────────────
|
||
|
||
interface ProjectWizardProps {
|
||
open: boolean;
|
||
onClose: () => void;
|
||
onSuccess?: (shortCode: string, name: string) => void;
|
||
}
|
||
|
||
export function ProjectWizard({ open, onClose, onSuccess }: ProjectWizardProps) {
|
||
const utils = trpc.useUtils();
|
||
const [step, setStep] = useState(0);
|
||
const [state, setState] = useState<WizardState>(makeDefaultState);
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [submitError, setSubmitError] = useState<string | null>(null);
|
||
const [submitWarnings, setSubmitWarnings] = useState<string[]>([]);
|
||
const [showConfetti, setShowConfetti] = useState(false);
|
||
const [showSuccessToast, setShowSuccessToast] = useState(false);
|
||
|
||
const createProject = trpc.project.create.useMutation();
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const createAssignment = (trpc.allocation.createAssignment.useMutation as any)() as {
|
||
mutateAsync: (input: unknown) => Promise<unknown>;
|
||
};
|
||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||
const createDemandRequirement = (trpc.allocation.createDemandRequirement.useMutation as any)() as {
|
||
mutateAsync: (input: unknown) => Promise<unknown>;
|
||
};
|
||
|
||
const patch = useCallback((p: Partial<WizardState>) => {
|
||
setState((prev) => ({ ...prev, ...p }));
|
||
}, []);
|
||
|
||
function reset() {
|
||
setStep(0);
|
||
setState(makeDefaultState());
|
||
setIsSubmitting(false);
|
||
setSubmitError(null);
|
||
setSubmitWarnings([]);
|
||
}
|
||
|
||
function handleClose() {
|
||
reset();
|
||
onClose();
|
||
}
|
||
|
||
function canGoNext(): boolean {
|
||
if (step === 0) {
|
||
// Required blueprint fields must be filled
|
||
const missingRequired = state.blueprintFieldDefs.some((f) => {
|
||
if (!f.required) return false;
|
||
const val = state.dynamicFields[f.key];
|
||
return val === undefined || val === null || val === "" || (Array.isArray(val) && val.length === 0);
|
||
});
|
||
return (
|
||
state.shortCode.trim().length > 0 &&
|
||
/^[A-Z0-9_-]+$/.test(state.shortCode) &&
|
||
state.name.trim().length > 0 &&
|
||
!missingRequired
|
||
);
|
||
}
|
||
if (step === 1) {
|
||
return (
|
||
!!state.startDate &&
|
||
!!state.endDate &&
|
||
state.endDate >= state.startDate &&
|
||
(state.budgetEur === "" || parseFloat(state.budgetEur) >= 0)
|
||
);
|
||
}
|
||
if (step === 2) {
|
||
// Allow advancing with zero requirements (no mandatory staffing), but
|
||
// any requirement that exists must be valid: must have a role and positive hours/headcount.
|
||
return state.staffingReqs.every(
|
||
(r) =>
|
||
(r.roleId != null || r.role.trim().length > 0) &&
|
||
r.hoursPerDay > 0 &&
|
||
r.headcount >= 1,
|
||
);
|
||
}
|
||
return true;
|
||
}
|
||
|
||
async function handleSubmit() {
|
||
setIsSubmitting(true);
|
||
setSubmitError(null);
|
||
setSubmitWarnings([]);
|
||
|
||
try {
|
||
const project = await createProject.mutateAsync({
|
||
shortCode: state.shortCode.trim(),
|
||
name: state.name.trim(),
|
||
orderType: state.orderType as unknown as OrderType,
|
||
allocationType: state.allocationType as unknown as AllocationType,
|
||
winProbability: state.winProbability,
|
||
budgetCents: state.budgetEur ? Math.round(parseFloat(state.budgetEur) * 100) : 0,
|
||
startDate: new Date(state.startDate),
|
||
endDate: new Date(state.endDate),
|
||
staffingReqs: state.staffingReqs,
|
||
status: state.saveAsDraft ? ProjectStatus.DRAFT : ProjectStatus.ACTIVE,
|
||
responsiblePerson: state.responsiblePerson.trim(),
|
||
blueprintId: state.blueprintId ?? undefined,
|
||
dynamicFields: state.dynamicFields,
|
||
});
|
||
|
||
const warnings: string[] = [];
|
||
|
||
// Create draft assignments for assigned resources
|
||
for (const assignment of state.assignments) {
|
||
try {
|
||
const req = state.staffingReqs.find((r) => r.id === assignment.requirementId);
|
||
const hoursPerDay = req?.hoursPerDay ?? 8;
|
||
const percentage = Math.min(100, Math.round((hoursPerDay / 8) * 100));
|
||
await createAssignment.mutateAsync({
|
||
projectId: project.id,
|
||
resourceId: assignment.resourceId,
|
||
startDate: new Date(state.startDate),
|
||
endDate: new Date(state.endDate),
|
||
hoursPerDay,
|
||
percentage,
|
||
role: assignment.role,
|
||
roleId: req?.roleId,
|
||
status: AllocationStatus.PROPOSED,
|
||
metadata: {},
|
||
});
|
||
} catch (err) {
|
||
const msg = err instanceof Error ? err.message : String(err);
|
||
warnings.push(`Assignment for "${assignment.resourceName}" failed: ${msg}`);
|
||
}
|
||
}
|
||
|
||
// Create open demand for unassigned slots
|
||
for (const req of state.staffingReqs) {
|
||
const assignedCount = state.assignments.filter((a) => a.requirementId === req.id).length;
|
||
const unassigned = req.headcount - assignedCount;
|
||
if (unassigned <= 0) continue;
|
||
try {
|
||
await createDemandRequirement.mutateAsync({
|
||
projectId: project.id,
|
||
startDate: new Date(state.startDate),
|
||
endDate: new Date(state.endDate),
|
||
hoursPerDay: req.hoursPerDay,
|
||
percentage: Math.min(100, Math.round((req.hoursPerDay / 8) * 100)),
|
||
role: req.role || undefined,
|
||
roleId: req.roleId,
|
||
headcount: unassigned,
|
||
status: AllocationStatus.PROPOSED,
|
||
metadata: {},
|
||
});
|
||
} catch (err) {
|
||
const msg = err instanceof Error ? err.message : String(err);
|
||
warnings.push(`Demand for "${req.role || "Unnamed Role"}" (${unassigned} seat${unassigned > 1 ? "s" : ""}) failed: ${msg}`);
|
||
}
|
||
}
|
||
|
||
if (warnings.length > 0) setSubmitWarnings(warnings);
|
||
|
||
await utils.project.listWithCosts.invalidate();
|
||
await utils.timeline.getEntries.invalidate();
|
||
await utils.timeline.getEntriesView.invalidate();
|
||
setShowConfetti(true);
|
||
setShowSuccessToast(true);
|
||
setTimeout(() => {
|
||
setShowConfetti(false);
|
||
onSuccess?.(project.shortCode, project.name);
|
||
handleClose();
|
||
}, 1200);
|
||
} catch (err) {
|
||
let errorMessage = "Failed to create project";
|
||
if (err instanceof Error) {
|
||
try {
|
||
const parsed: unknown = JSON.parse(err.message);
|
||
if (Array.isArray(parsed) && parsed.length > 0) {
|
||
errorMessage = (parsed as { message?: string }[])
|
||
.map((e) => e.message)
|
||
.filter(Boolean)
|
||
.join("; ");
|
||
} else {
|
||
errorMessage = err.message;
|
||
}
|
||
} catch {
|
||
errorMessage = err.message;
|
||
}
|
||
}
|
||
setSubmitError(errorMessage);
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
}
|
||
|
||
if (!open) return null;
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8 px-4"
|
||
>
|
||
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative">
|
||
{/* Celebration effects */}
|
||
<ConfettiBurst trigger={showConfetti} />
|
||
<SuccessToast
|
||
show={showSuccessToast}
|
||
message="Project created successfully!"
|
||
onDone={() => setShowSuccessToast(false)}
|
||
/>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
|
||
<h2 className="text-lg font-semibold text-gray-900">New Project Wizard</h2>
|
||
<button
|
||
type="button"
|
||
onClick={handleClose}
|
||
className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
|
||
aria-label="Close"
|
||
>
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
{/* Body */}
|
||
<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 === 4 && (
|
||
<Step5
|
||
state={state}
|
||
onChange={patch}
|
||
onSubmit={handleSubmit}
|
||
isSubmitting={isSubmitting}
|
||
submitError={submitError}
|
||
submitWarnings={submitWarnings}
|
||
/>
|
||
)}
|
||
</div>
|
||
|
||
{/* Footer nav */}
|
||
{step < 4 && (
|
||
<div className="flex items-center justify-between px-6 py-4 border-t border-gray-200">
|
||
<button
|
||
type="button"
|
||
onClick={step === 0 ? handleClose : () => setStep((s) => s - 1)}
|
||
className={BTN_SECONDARY}
|
||
>
|
||
{step === 0 ? "Cancel" : "← Back"}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setStep((s) => s + 1)}
|
||
disabled={!canGoNext()}
|
||
className={BTN_PRIMARY}
|
||
>
|
||
{step === 3 ? "Review →" : "Next →"}
|
||
</button>
|
||
</div>
|
||
)}
|
||
{step === 4 && (
|
||
<div className="flex items-center px-6 py-4 border-t border-gray-200">
|
||
<button
|
||
type="button"
|
||
onClick={() => setStep((s) => s - 1)}
|
||
className={BTN_SECONDARY}
|
||
>
|
||
← Back
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|