484 lines
17 KiB
TypeScript
484 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useRef } from "react";
|
|
import { useFocusTrap } from "~/hooks/useFocusTrap.js";
|
|
import { AllocationStatus } from "@planarchy/shared";
|
|
import type { AllocationWithDetails, RecurrencePattern } from "@planarchy/shared";
|
|
import { trpc } from "~/lib/trpc/client.js";
|
|
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
|
import { DateInput } from "~/components/ui/DateInput.js";
|
|
import { RecurrenceEditor } from "./RecurrenceEditor.js";
|
|
|
|
const ALLOCATION_STATUSES = Object.values(AllocationStatus);
|
|
type EntryKind = "demand" | "assignment";
|
|
|
|
interface AllocationModalProps {
|
|
allocation?: AllocationWithDetails | null;
|
|
onClose: () => void;
|
|
onSuccess: () => void;
|
|
}
|
|
|
|
function toDateInputValue(date: Date | string | null | undefined): string {
|
|
if (!date) return "";
|
|
const d = typeof date === "string" ? new Date(date) : date;
|
|
return d.toISOString().split("T")[0] ?? "";
|
|
}
|
|
|
|
export function AllocationModal({ allocation, onClose, onSuccess }: AllocationModalProps) {
|
|
const isEditing = Boolean(allocation);
|
|
const initialEntryKind: EntryKind = allocation && !allocation.resourceId ? "demand" : "assignment";
|
|
const [entryKind, setEntryKind] = useState<EntryKind>(initialEntryKind);
|
|
const isDemandEntry = entryKind === "demand";
|
|
|
|
const [resourceId, setResourceId] = useState(allocation?.resourceId ?? "");
|
|
const [projectId, setProjectId] = useState(allocation?.projectId ?? "");
|
|
const [roleId, setRoleId] = useState(allocation?.roleId ?? "");
|
|
const [roleFreeText, setRoleFreeText] = useState(allocation?.role ?? "");
|
|
const [headcount, setHeadcount] = useState(allocation?.headcount ?? 1);
|
|
const [startDate, setStartDate] = useState(toDateInputValue(allocation?.startDate));
|
|
const [endDate, setEndDate] = useState(toDateInputValue(allocation?.endDate));
|
|
const [hoursPerDay, setHoursPerDay] = useState<number>(allocation?.hoursPerDay ?? 8);
|
|
const [status, setStatus] = useState<AllocationStatus>(
|
|
allocation?.status ?? AllocationStatus.PROPOSED,
|
|
);
|
|
const existingMeta = allocation?.metadata as Record<string, unknown> | undefined;
|
|
const [isRecurring, setIsRecurring] = useState<boolean>(!!existingMeta?.recurrence);
|
|
const [recurrence, setRecurrence] = useState<RecurrencePattern | undefined>(
|
|
existingMeta?.recurrence as RecurrencePattern | undefined,
|
|
);
|
|
const [serverError, setServerError] = useState<string | null>(null);
|
|
|
|
const panelRef = useRef<HTMLDivElement>(null);
|
|
useFocusTrap(panelRef, true);
|
|
|
|
const { data: resources } = trpc.resource.list.useQuery(
|
|
{ isActive: true, limit: 500 },
|
|
{ staleTime: 60_000 },
|
|
);
|
|
const { data: projects } = trpc.project.list.useQuery(
|
|
{ limit: 500 },
|
|
{ staleTime: 60_000 },
|
|
);
|
|
const { data: rolesData } = trpc.role.list.useQuery(
|
|
{ isActive: true },
|
|
{ staleTime: 60_000 },
|
|
);
|
|
|
|
const utils = trpc.useUtils();
|
|
const invalidatePlanningViews = () => {
|
|
void utils.allocation.list.invalidate();
|
|
void (utils as { allocation: { listView: { invalidate: () => Promise<unknown> } } }).allocation.listView.invalidate();
|
|
void utils.allocation.listDemands.invalidate();
|
|
void utils.allocation.listAssignments.invalidate();
|
|
void utils.timeline.getEntries.invalidate();
|
|
void utils.timeline.getEntriesView.invalidate();
|
|
void utils.timeline.getProjectContext.invalidate();
|
|
void utils.timeline.getBudgetStatus.invalidate();
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const createDemandMutation = (trpc.allocation.createDemandRequirement.useMutation as any)({
|
|
onSuccess: () => {
|
|
invalidatePlanningViews();
|
|
onSuccess();
|
|
},
|
|
onError: (err: { message: string }) => {
|
|
setServerError(err.message);
|
|
},
|
|
}) as {
|
|
isPending: boolean;
|
|
isError: boolean;
|
|
error?: { message: string };
|
|
mutate: (input: unknown) => void;
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const createAssignmentMutation = (trpc.allocation.createAssignment.useMutation as any)({
|
|
onSuccess: () => {
|
|
invalidatePlanningViews();
|
|
onSuccess();
|
|
},
|
|
onError: (err: { message: string }) => {
|
|
setServerError(err.message);
|
|
},
|
|
}) as {
|
|
isPending: boolean;
|
|
isError: boolean;
|
|
error?: { message: string };
|
|
mutate: (input: unknown) => void;
|
|
};
|
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
const updateMutation = (trpc.allocation.update.useMutation as any)({
|
|
onSuccess: () => {
|
|
invalidatePlanningViews();
|
|
onSuccess();
|
|
},
|
|
onError: (err: { message: string }) => {
|
|
setServerError(err.message);
|
|
},
|
|
}) as {
|
|
isPending: boolean;
|
|
isError: boolean;
|
|
error?: { message: string };
|
|
mutate: (input: unknown) => void;
|
|
};
|
|
|
|
const isPending =
|
|
createDemandMutation.isPending ||
|
|
createAssignmentMutation.isPending ||
|
|
updateMutation.isPending;
|
|
|
|
useEffect(() => {
|
|
setServerError(null);
|
|
}, [resourceId, projectId, roleId, roleFreeText, startDate, endDate, hoursPerDay, status, entryKind]);
|
|
|
|
function handleSubmit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
setServerError(null);
|
|
|
|
if (!projectId) {
|
|
setServerError("Please select a project.");
|
|
return;
|
|
}
|
|
if (!isDemandEntry && !resourceId) {
|
|
setServerError("Please select a resource.");
|
|
return;
|
|
}
|
|
if (!startDate || !endDate) {
|
|
setServerError("Please fill in start and end dates.");
|
|
return;
|
|
}
|
|
|
|
const start = new Date(startDate);
|
|
const end = new Date(endDate);
|
|
|
|
if (end < start) {
|
|
setServerError("End date must be on or after start date.");
|
|
return;
|
|
}
|
|
|
|
const baseMeta = (allocation?.metadata as Record<string, unknown> | undefined) ?? {};
|
|
const metadata: Record<string, unknown> = {
|
|
...baseMeta,
|
|
...(isRecurring && recurrence ? { recurrence } : { recurrence: undefined }),
|
|
};
|
|
if (!isRecurring) delete metadata.recurrence;
|
|
|
|
// Determine role string from roleId if set
|
|
const rolesList = rolesData ?? [];
|
|
const selectedRole = rolesList.find((r) => r.id === roleId);
|
|
const roleString = selectedRole ? selectedRole.name : (roleFreeText || undefined);
|
|
|
|
const percentage = Math.min(100, Math.round((hoursPerDay / 8) * 100));
|
|
|
|
if (isEditing && allocation) {
|
|
updateMutation.mutate({
|
|
id: getPlanningEntryMutationId(allocation),
|
|
data: {
|
|
resourceId: isDemandEntry ? undefined : (resourceId || undefined),
|
|
projectId,
|
|
role: roleString,
|
|
roleId: roleId || undefined,
|
|
headcount: isDemandEntry ? headcount : 1,
|
|
startDate: start,
|
|
endDate: end,
|
|
hoursPerDay,
|
|
percentage,
|
|
status: status as AllocationStatus,
|
|
metadata,
|
|
},
|
|
});
|
|
} else if (isDemandEntry) {
|
|
createDemandMutation.mutate({
|
|
projectId,
|
|
role: roleString,
|
|
roleId: roleId || undefined,
|
|
headcount,
|
|
startDate: start,
|
|
endDate: end,
|
|
hoursPerDay,
|
|
percentage,
|
|
status: status as AllocationStatus,
|
|
metadata,
|
|
});
|
|
} else {
|
|
createAssignmentMutation.mutate({
|
|
resourceId,
|
|
projectId,
|
|
role: roleString,
|
|
roleId: roleId || undefined,
|
|
startDate: start,
|
|
endDate: end,
|
|
hoursPerDay,
|
|
percentage,
|
|
status: status as AllocationStatus,
|
|
metadata,
|
|
});
|
|
}
|
|
}
|
|
|
|
const inputClass =
|
|
"w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-brand-500 text-sm dark:bg-gray-900 dark:text-gray-100";
|
|
const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
|
|
|
|
const resourceList = (resources?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
|
|
const projectList = (projects?.projects ?? []) as Array<{ id: string; name: string; shortCode: string }>;
|
|
const rolesList = (rolesData ?? []) as Array<{ id: string; name: string; color: string | null }>;
|
|
const entryLabel = isDemandEntry ? "Open Demand" : "Assignment";
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
|
|
onClick={(e) => {
|
|
if (e.target === e.currentTarget) onClose();
|
|
}}
|
|
>
|
|
<div
|
|
ref={panelRef}
|
|
className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-xl mx-4"
|
|
onKeyDown={(e) => { if (e.key === "Escape") onClose(); }}
|
|
>
|
|
{/* Header */}
|
|
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{isEditing ? `Edit ${entryLabel}` : `New ${entryLabel}`}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="text-gray-400 hover:text-gray-600 transition-colors text-xl leading-none"
|
|
aria-label="Close"
|
|
>
|
|
×
|
|
</button>
|
|
</div>
|
|
|
|
{/* Form */}
|
|
<form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
|
|
{/* Demand toggle */}
|
|
<div className="flex items-center gap-3 p-3 bg-amber-50 border border-amber-200 rounded-lg">
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer select-none flex-1">
|
|
<input
|
|
type="checkbox"
|
|
checked={isDemandEntry}
|
|
disabled={isEditing}
|
|
onChange={(e) => {
|
|
setEntryKind(e.target.checked ? "demand" : "assignment");
|
|
if (e.target.checked) setResourceId("");
|
|
}}
|
|
className="rounded border-gray-300 dark:border-gray-600 disabled:cursor-not-allowed disabled:opacity-60"
|
|
/>
|
|
<div>
|
|
<span className="font-medium text-gray-800 dark:text-gray-100">Open demand</span>
|
|
<span className="block text-xs text-gray-500 dark:text-gray-400">
|
|
{isEditing
|
|
? "Demand vs assignment type is fixed after creation during the compatibility migration."
|
|
: "No resource assigned yet and tracked as staffing demand"}
|
|
</span>
|
|
</div>
|
|
</label>
|
|
{isDemandEntry && (
|
|
<div className="flex items-center gap-2">
|
|
<label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">Headcount:</label>
|
|
<input
|
|
type="number"
|
|
value={headcount}
|
|
onChange={(e) => setHeadcount(Math.max(1, Number(e.target.value)))}
|
|
min={1}
|
|
max={50}
|
|
className="w-16 px-2 py-1 border border-gray-300 dark:border-gray-600 rounded text-sm text-center dark:bg-gray-900 dark:text-gray-100"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Resource is only required for assignments */}
|
|
{!isDemandEntry && (
|
|
<div>
|
|
<label htmlFor="modal-resource" className={labelClass}>
|
|
Resource <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="modal-resource"
|
|
value={resourceId}
|
|
onChange={(e) => setResourceId(e.target.value)}
|
|
className={inputClass}
|
|
required={!isDemandEntry}
|
|
>
|
|
<option value="">Select a resource…</option>
|
|
{resourceList.map((r) => (
|
|
<option key={r.id} value={r.id}>
|
|
{r.displayName} ({r.eid})
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
)}
|
|
|
|
{/* Project */}
|
|
<div>
|
|
<label htmlFor="modal-project" className={labelClass}>
|
|
Project <span className="text-red-500">*</span>
|
|
</label>
|
|
<select
|
|
id="modal-project"
|
|
value={projectId}
|
|
onChange={(e) => setProjectId(e.target.value)}
|
|
className={inputClass}
|
|
required
|
|
>
|
|
<option value="">Select a project…</option>
|
|
{projectList.map((p) => (
|
|
<option key={p.id} value={p.id}>
|
|
{p.shortCode} — {p.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* Role */}
|
|
<div>
|
|
<label htmlFor="modal-role" className={labelClass}>Role</label>
|
|
<select
|
|
id="modal-role"
|
|
value={roleId}
|
|
onChange={(e) => setRoleId(e.target.value)}
|
|
className={inputClass}
|
|
>
|
|
<option value="">No role / custom…</option>
|
|
{rolesList.map((r) => (
|
|
<option key={r.id} value={r.id}>
|
|
{r.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
{!roleId && (
|
|
<input
|
|
type="text"
|
|
value={roleFreeText}
|
|
onChange={(e) => setRoleFreeText(e.target.value)}
|
|
placeholder="Or type a custom role…"
|
|
className={`${inputClass} mt-1`}
|
|
maxLength={200}
|
|
/>
|
|
)}
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="modal-start" className={labelClass}>
|
|
Start Date <span className="text-red-500">*</span>
|
|
</label>
|
|
<DateInput
|
|
id="modal-start"
|
|
value={startDate}
|
|
onChange={setStartDate}
|
|
className={inputClass}
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="modal-end" className={labelClass}>
|
|
End Date <span className="text-red-500">*</span>
|
|
</label>
|
|
<DateInput
|
|
id="modal-end"
|
|
value={endDate}
|
|
onChange={setEndDate}
|
|
min={startDate}
|
|
className={inputClass}
|
|
required
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Hours/Day + Status */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<label htmlFor="modal-hours" className={labelClass}>
|
|
Hours / Day
|
|
</label>
|
|
<input
|
|
id="modal-hours"
|
|
type="number"
|
|
value={hoursPerDay}
|
|
onChange={(e) => setHoursPerDay(Number(e.target.value))}
|
|
min={0.5}
|
|
max={8}
|
|
step={0.5}
|
|
className={inputClass}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label htmlFor="modal-status" className={labelClass}>
|
|
Status
|
|
</label>
|
|
<select
|
|
id="modal-status"
|
|
value={status}
|
|
onChange={(e) => setStatus(e.target.value as AllocationStatus)}
|
|
className={inputClass}
|
|
>
|
|
{ALLOCATION_STATUSES.map((s) => (
|
|
<option key={s} value={s}>
|
|
{s}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Recurring toggle */}
|
|
<div>
|
|
<label className="flex items-center gap-2 text-sm cursor-pointer select-none">
|
|
<input
|
|
type="checkbox"
|
|
checked={isRecurring}
|
|
onChange={(e) => {
|
|
setIsRecurring(e.target.checked);
|
|
if (!e.target.checked) setRecurrence(undefined);
|
|
}}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
<span className="font-medium text-gray-700 dark:text-gray-300">Recurring schedule</span>
|
|
</label>
|
|
{isRecurring && (
|
|
<div className="mt-2">
|
|
<RecurrenceEditor value={recurrence} onChange={setRecurrence} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Server error */}
|
|
{serverError && (
|
|
<div className="rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 px-4 py-3 text-sm text-red-700 dark:text-red-400">
|
|
{serverError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer */}
|
|
<div className="flex items-center justify-end gap-3 pt-2">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isPending}
|
|
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100 disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isPending}
|
|
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
|
|
>
|
|
{isPending ? "Saving…" : "Save"}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|