Hartmut
f3fa902773
- useInvalidateTimeline and useInvalidatePlanningViews now return Promise.all instead of fire-and-forget void calls - Timeline mutations now use useInvalidatePlanningViews to also invalidate allocation list views, preventing stale data - AllocationsClient sequential awaits replaced with single invalidatePlanningViews() call (parallel invalidation) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
1365 lines
52 KiB
TypeScript
1365 lines
52 KiB
TypeScript
"use client";
|
|
|
|
import { useState, useEffect, useMemo, useCallback, useRef } from "react";
|
|
import { useUrlFilters } from "~/hooks/useUrlFilters.js";
|
|
import { useLocalStorage } from "~/hooks/useLocalStorage.js";
|
|
import { formatDate } from "~/lib/format.js";
|
|
import { trpc } from "~/lib/trpc/client.js";
|
|
import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
|
|
import { AllocationModal } from "./AllocationModal.js";
|
|
import type {
|
|
AllocationLike,
|
|
AllocationReadModel,
|
|
AllocationWithDetails,
|
|
ColumnDef,
|
|
AllocationStatus,
|
|
} from "@capakraken/shared";
|
|
import { ALLOCATION_COLUMNS } from "@capakraken/shared";
|
|
import { useSelection } from "~/hooks/useSelection.js";
|
|
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
|
|
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
|
import { FilterBar } from "~/components/ui/FilterBar.js";
|
|
import { FilterChips } from "~/components/ui/FilterChips.js";
|
|
import { ResourceCombobox } from "~/components/ui/ResourceCombobox.js";
|
|
import { ProjectCombobox } from "~/components/ui/ProjectCombobox.js";
|
|
import { ColumnTogglePanel } from "~/components/ui/ColumnTogglePanel.js";
|
|
import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
|
|
import { useTableSort } from "~/hooks/useTableSort.js";
|
|
import { usePermissions } from "~/hooks/usePermissions.js";
|
|
import { useColumnConfig } from "~/hooks/useColumnConfig.js";
|
|
import { useViewPrefs } from "~/hooks/useViewPrefs.js";
|
|
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
|
|
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
|
import { SuccessToast } from "~/components/ui/SuccessToast.js";
|
|
import { EmptyState } from "~/components/ui/EmptyState.js";
|
|
import { BatchDateShiftModal } from "./BatchDateShiftModal.js";
|
|
import { downloadWorkbookSheets } from "~/lib/workbook-export.js";
|
|
import {
|
|
collapseAllAllocationGroups,
|
|
createInitialCollapsedAllocationGroups,
|
|
expandAllAllocationGroups,
|
|
toggleCollapsedAllocationGroup,
|
|
type CollapsedAllocationGroups,
|
|
} from "./allocationGroupState.js";
|
|
import {
|
|
getAllocationEmptyState,
|
|
shouldAutoRelaxAllocationFilters,
|
|
} from "./allocationVisibilityState.js";
|
|
|
|
/** Left-border color by allocation status for instant visual scanning */
|
|
const STATUS_LEFT_BORDER: Record<string, string> = {
|
|
ACTIVE: "border-l-green-500",
|
|
PROPOSED: "border-l-amber-500",
|
|
CONFIRMED: "border-l-blue-500",
|
|
COMPLETED: "border-l-gray-400",
|
|
CANCELLED: "border-l-red-500",
|
|
};
|
|
|
|
/** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
|
|
function GroupRows({ children }: { children: React.ReactNode }) {
|
|
return <>{children}</>;
|
|
}
|
|
|
|
const ALL_ALLOC_STATUSES = [
|
|
{ value: "PROPOSED", label: "Proposed" },
|
|
{ value: "CONFIRMED", label: "Confirmed" },
|
|
{ value: "ACTIVE", label: "Active" },
|
|
{ value: "COMPLETED", label: "Completed" },
|
|
{ value: "CANCELLED", label: "Cancelled" },
|
|
] as const;
|
|
|
|
type AllocationAssignmentsView = AllocationReadModel<AllocationLike>;
|
|
type DemandRow = AllocationWithDetails & {
|
|
sourceAllocationId?: string;
|
|
requestedHeadcount?: number;
|
|
unfilledHeadcount?: number;
|
|
};
|
|
|
|
type AllocationQueryError = {
|
|
data?: {
|
|
code?: string;
|
|
};
|
|
message?: string;
|
|
} | null;
|
|
|
|
function getAllocationQueryFailure(error: AllocationQueryError) {
|
|
const code = error?.data?.code;
|
|
|
|
if (code === "FORBIDDEN") {
|
|
return {
|
|
testId: "allocations-access-error",
|
|
title: "You do not have permission to view allocations.",
|
|
detail: "Your account is missing planning read access for this page.",
|
|
actionLabel: null,
|
|
actionHref: null,
|
|
};
|
|
}
|
|
|
|
if (code === "UNAUTHORIZED") {
|
|
return {
|
|
testId: "allocations-session-error",
|
|
title: "Your session expired.",
|
|
detail: "Sign in again to load allocations.",
|
|
actionLabel: "Sign in again",
|
|
actionHref: "/auth/signin",
|
|
};
|
|
}
|
|
|
|
return {
|
|
testId: "allocations-query-error",
|
|
title: "Allocations could not be loaded.",
|
|
detail: error?.message ?? "Refresh the page or try again in a moment.",
|
|
actionLabel: null,
|
|
actionHref: null,
|
|
};
|
|
}
|
|
|
|
export function AllocationsClient() {
|
|
const [modalOpen, setModalOpen] = useState(false);
|
|
const [editingAllocation, setEditingAllocation] = useState<AllocationWithDetails | null>(null);
|
|
|
|
const [allocFilters, setAllocFilters] = useUrlFilters({
|
|
projectId: "",
|
|
resourceId: "",
|
|
status: "",
|
|
hidePast: "true",
|
|
hideCompleted: "true",
|
|
hideDraft: "false",
|
|
});
|
|
|
|
const filterProjectId = allocFilters.projectId;
|
|
const filterResourceId = allocFilters.resourceId;
|
|
const filterStatus = allocFilters.status;
|
|
const hidePastProjects = allocFilters.hidePast === "true";
|
|
const hideCompletedProjects = allocFilters.hideCompleted === "true";
|
|
const hideDraftProjects = allocFilters.hideDraft === "true";
|
|
|
|
const setFilterProjectId = useCallback(
|
|
(v: string) => setAllocFilters({ projectId: v }),
|
|
[setAllocFilters],
|
|
);
|
|
const setFilterResourceId = useCallback(
|
|
(v: string) => setAllocFilters({ resourceId: v }),
|
|
[setAllocFilters],
|
|
);
|
|
const setFilterStatus = useCallback(
|
|
(v: string) => setAllocFilters({ status: v }),
|
|
[setAllocFilters],
|
|
);
|
|
const setHidePastProjects = useCallback(
|
|
(v: boolean) => setAllocFilters({ hidePast: v ? "true" : "false" }),
|
|
[setAllocFilters],
|
|
);
|
|
const setHideCompletedProjects = useCallback(
|
|
(v: boolean) => setAllocFilters({ hideCompleted: v ? "true" : "false" }),
|
|
[setAllocFilters],
|
|
);
|
|
const setHideDraftProjects = useCallback(
|
|
(v: boolean) => setAllocFilters({ hideDraft: v ? "true" : "false" }),
|
|
[setAllocFilters],
|
|
);
|
|
const [confirmDelete, setConfirmDelete] = useState<{
|
|
single?: AllocationWithDetails;
|
|
ids?: string[];
|
|
} | null>(null);
|
|
const [batchStatusPicker, setBatchStatusPicker] = useState(false);
|
|
const [confirmBatchStatus, setConfirmBatchStatus] = useState<{
|
|
ids: string[];
|
|
status: string;
|
|
} | null>(null);
|
|
const [showStatusToast, setShowStatusToast] = useState(false);
|
|
const [showDateShiftModal, setShowDateShiftModal] = useState(false);
|
|
|
|
const selection = useSelection();
|
|
const utils = trpc.useUtils();
|
|
const invalidatePlanningViews = useInvalidatePlanningViews();
|
|
const { canViewCosts } = usePermissions();
|
|
|
|
// ─── Column visibility ────────────────────────────────────────────────────
|
|
const baseColumns = useMemo<ColumnDef[]>(
|
|
() => (canViewCosts ? ALLOCATION_COLUMNS : ALLOCATION_COLUMNS.filter((c) => c.key !== "cost")),
|
|
[canViewCosts],
|
|
);
|
|
const { allColumns, visibleColumns, visibleKeys, setVisible } = useColumnConfig(
|
|
"allocations",
|
|
baseColumns,
|
|
);
|
|
const defaultKeys = useMemo(
|
|
() => baseColumns.filter((c) => c.defaultVisible).map((c) => c.key),
|
|
[baseColumns],
|
|
);
|
|
|
|
const allocationQuery = trpc.allocation.listView.useQuery(
|
|
{
|
|
projectId: filterProjectId || undefined,
|
|
resourceId: filterResourceId || undefined,
|
|
status: (filterStatus as AllocationStatus) || undefined,
|
|
},
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
{ placeholderData: (prev: any) => prev, staleTime: 15_000 },
|
|
) as {
|
|
data: AllocationAssignmentsView | undefined;
|
|
isLoading: boolean;
|
|
isError: boolean;
|
|
error: AllocationQueryError;
|
|
};
|
|
const { data: allocationView, isLoading, isError, error } = allocationQuery;
|
|
const allocationQueryFailure = isError ? getAllocationQueryFailure(error) : null;
|
|
|
|
const deleteDemandMutation = trpc.allocation.deleteDemandRequirement.useMutation({
|
|
onSuccess: () => invalidatePlanningViews(),
|
|
});
|
|
|
|
const deleteAssignmentMutation = trpc.allocation.deleteAssignment.useMutation({
|
|
onSuccess: () => invalidatePlanningViews(),
|
|
});
|
|
|
|
const batchDeleteMutation = trpc.allocation.batchDelete.useMutation({
|
|
onSuccess: async () => {
|
|
await invalidatePlanningViews();
|
|
selection.clear();
|
|
},
|
|
});
|
|
|
|
const batchStatusMutation = trpc.allocation.batchUpdateStatus.useMutation({
|
|
onSuccess: async () => {
|
|
await invalidatePlanningViews();
|
|
selection.clear();
|
|
setShowStatusToast(true);
|
|
},
|
|
});
|
|
|
|
const batchDateShiftMutation = trpc.timeline.batchShiftAllocations.useMutation({
|
|
onSuccess: async () => {
|
|
await invalidatePlanningViews();
|
|
selection.clear();
|
|
setShowDateShiftModal(false);
|
|
},
|
|
});
|
|
|
|
useEffect(() => {
|
|
selection.clear();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
filterProjectId,
|
|
filterResourceId,
|
|
filterStatus,
|
|
hidePastProjects,
|
|
hideCompletedProjects,
|
|
hideDraftProjects,
|
|
]);
|
|
|
|
function handleExportExcel() {
|
|
const rows: (string | number | null)[][] = [
|
|
["Resource", "Project", "Role", "Start Date", "End Date", "Hours/Day", "Status"],
|
|
...sorted.map((a) => [
|
|
(a.resource as { displayName?: string } | null | undefined)?.displayName ?? "Unassigned",
|
|
(a.project as { shortCode?: string; name?: string } | null | undefined)
|
|
? `${(a.project as { shortCode: string }).shortCode} — ${(a.project as { name: string }).name}`
|
|
: "",
|
|
a.role ?? "",
|
|
typeof a.startDate === "string"
|
|
? a.startDate
|
|
: (a.startDate as Date).toISOString().slice(0, 10),
|
|
typeof a.endDate === "string" ? a.endDate : (a.endDate as Date).toISOString().slice(0, 10),
|
|
a.hoursPerDay,
|
|
a.status,
|
|
]),
|
|
];
|
|
void downloadWorkbookSheets("allocations.xlsx", [{ name: "Allocations", rows }]);
|
|
}
|
|
|
|
function openCreate() {
|
|
setEditingAllocation(null);
|
|
setModalOpen(true);
|
|
}
|
|
|
|
function openEdit(alloc: AllocationWithDetails) {
|
|
setEditingAllocation(alloc);
|
|
setModalOpen(true);
|
|
}
|
|
|
|
function closeModal() {
|
|
setModalOpen(false);
|
|
setEditingAllocation(null);
|
|
}
|
|
|
|
const assignmentList = (allocationView?.assignments ?? []) as unknown as AllocationWithDetails[];
|
|
const demandList = (allocationView?.demands ?? []) as unknown as DemandRow[];
|
|
|
|
const today = new Date();
|
|
today.setHours(0, 0, 0, 0);
|
|
|
|
const filteredAllocations = assignmentList.filter((alloc) => {
|
|
if (hidePastProjects && alloc.project?.endDate && new Date(alloc.project.endDate) < today)
|
|
return false;
|
|
if (
|
|
hideCompletedProjects &&
|
|
alloc.project?.status &&
|
|
["COMPLETED", "CANCELLED"].includes(alloc.project.status)
|
|
)
|
|
return false;
|
|
if (hideDraftProjects && alloc.project?.status === "DRAFT") return false;
|
|
return true;
|
|
});
|
|
|
|
const filteredDemands = demandList.filter((alloc) => {
|
|
if (filterResourceId) return false;
|
|
if (hidePastProjects && alloc.project?.endDate && new Date(alloc.project.endDate) < today)
|
|
return false;
|
|
if (
|
|
hideCompletedProjects &&
|
|
alloc.project?.status &&
|
|
["COMPLETED", "CANCELLED"].includes(alloc.project.status)
|
|
)
|
|
return false;
|
|
if (hideDraftProjects && alloc.project?.status === "DRAFT") return false;
|
|
return true;
|
|
});
|
|
|
|
const allocViewPrefs = useViewPrefs("allocations");
|
|
const { sorted, sortField, sortDir, toggle } = useTableSort(filteredAllocations, {
|
|
initialField: allocViewPrefs.savedSort?.field ?? null,
|
|
initialDir: allocViewPrefs.savedSort?.dir ?? null,
|
|
onSortChange: (field, dir) => {
|
|
allocViewPrefs.setSavedSort(field && dir ? { field, dir } : null);
|
|
},
|
|
});
|
|
const allocationIds = sorted.map((a) => a.id);
|
|
const allocationMutationIdsByDisplayId = useMemo(
|
|
() =>
|
|
new Map(sorted.map((allocation) => [allocation.id, getPlanningEntryMutationId(allocation)])),
|
|
[sorted],
|
|
);
|
|
const selectedMutationIds = useMemo(
|
|
() =>
|
|
selection.selectedArray.flatMap((displayId) => {
|
|
const mutationId = allocationMutationIdsByDisplayId.get(displayId);
|
|
return mutationId ? [mutationId] : [];
|
|
}),
|
|
[allocationMutationIdsByDisplayId, selection.selectedArray],
|
|
);
|
|
|
|
// ─── View mode: grouped (default) vs flat ──────────────────────────────────
|
|
const [viewMode, setViewMode] = useLocalStorage<"grouped" | "flat">(
|
|
"capakraken:allocations:viewMode",
|
|
"grouped",
|
|
);
|
|
const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(() =>
|
|
createInitialCollapsedAllocationGroups(),
|
|
);
|
|
// Track expanded project sub-groups: key = "resourceId::projectId"
|
|
const [expandedSubGroups, setExpandedSubGroups] = useState<Set<string>>(new Set());
|
|
const hasEvaluatedInitialVisibility = useRef(false);
|
|
|
|
const toggleViewMode = useCallback(() => {
|
|
setViewMode((prev) => (prev === "grouped" ? "flat" : "grouped"));
|
|
}, [setViewMode]);
|
|
|
|
type ProjectSubGroup = {
|
|
projectId: string;
|
|
projectName: string;
|
|
projectCode: string;
|
|
allocations: AllocationWithDetails[];
|
|
typicalHoursPerDay: number;
|
|
earliestStart: Date;
|
|
latestEnd: Date;
|
|
};
|
|
|
|
type AllocGroup = {
|
|
resourceId: string;
|
|
resourceName: string;
|
|
eid: string;
|
|
chapter: string | null;
|
|
allocations: AllocationWithDetails[];
|
|
projectSubGroups: ProjectSubGroup[];
|
|
};
|
|
|
|
const groups = useMemo<AllocGroup[]>(() => {
|
|
const map = new Map<string, AllocGroup>();
|
|
for (const alloc of sorted) {
|
|
const rid = alloc.resource?.id ?? "__unassigned__";
|
|
let group = map.get(rid);
|
|
if (!group) {
|
|
group = {
|
|
resourceId: rid,
|
|
resourceName: alloc.resource?.displayName ?? "Unassigned",
|
|
eid: alloc.resource?.eid ?? "",
|
|
chapter: (alloc.resource as { chapter?: string | null } | undefined)?.chapter ?? null,
|
|
allocations: [],
|
|
projectSubGroups: [],
|
|
};
|
|
map.set(rid, group);
|
|
}
|
|
group.allocations.push(alloc);
|
|
}
|
|
|
|
// Build project sub-groups within each person group
|
|
for (const group of map.values()) {
|
|
const projMap = new Map<string, AllocationWithDetails[]>();
|
|
for (const alloc of group.allocations) {
|
|
const pid = alloc.project?.id ?? "__no_project__";
|
|
let list = projMap.get(pid);
|
|
if (!list) {
|
|
list = [];
|
|
projMap.set(pid, list);
|
|
}
|
|
list.push(alloc);
|
|
}
|
|
group.projectSubGroups = [...projMap.entries()].map(([pid, allocs]) => {
|
|
const first = allocs[0]!;
|
|
let earliest = new Date(first.startDate);
|
|
let latest = new Date(first.endDate);
|
|
// Find the most common hoursPerDay value across allocations
|
|
const hpdCounts = new Map<number, number>();
|
|
for (const a of allocs) {
|
|
const s = new Date(a.startDate);
|
|
const e = new Date(a.endDate);
|
|
if (s < earliest) earliest = s;
|
|
if (e > latest) latest = e;
|
|
hpdCounts.set(a.hoursPerDay, (hpdCounts.get(a.hoursPerDay) ?? 0) + 1);
|
|
}
|
|
// Pick the most frequent hoursPerDay; fall back to first
|
|
let typicalH = first.hoursPerDay;
|
|
let maxCount = 0;
|
|
for (const [h, count] of hpdCounts) {
|
|
if (count > maxCount) {
|
|
typicalH = h;
|
|
maxCount = count;
|
|
}
|
|
}
|
|
return {
|
|
projectId: pid,
|
|
projectName: first.project?.name ?? "Unknown",
|
|
projectCode: first.project?.shortCode ?? "",
|
|
allocations: allocs,
|
|
typicalHoursPerDay: typicalH,
|
|
earliestStart: earliest,
|
|
latestEnd: latest,
|
|
};
|
|
});
|
|
group.projectSubGroups.sort((a, b) => a.projectName.localeCompare(b.projectName));
|
|
}
|
|
|
|
const arr = [...map.values()];
|
|
arr.sort((a, b) => {
|
|
if (a.resourceId === "__unassigned__") return 1;
|
|
if (b.resourceId === "__unassigned__") return -1;
|
|
return a.resourceName.localeCompare(b.resourceName);
|
|
});
|
|
return arr;
|
|
}, [sorted]);
|
|
|
|
const groupIds = useMemo(() => groups.map((g) => g.resourceId), [groups]);
|
|
|
|
const toggleGroup = useCallback(
|
|
(resourceId: string) => {
|
|
setCollapsedGroups((prev) => toggleCollapsedAllocationGroup(prev, groupIds, resourceId));
|
|
},
|
|
[groupIds],
|
|
);
|
|
|
|
const collapseAll = useCallback(() => {
|
|
setCollapsedGroups(collapseAllAllocationGroups());
|
|
}, []);
|
|
|
|
const expandAll = useCallback(() => {
|
|
setCollapsedGroups(expandAllAllocationGroups());
|
|
}, []);
|
|
|
|
const toggleSubGroup = useCallback((resourceId: string, projectId: string) => {
|
|
const key = `${resourceId}::${projectId}`;
|
|
setExpandedSubGroups((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(key)) next.delete(key);
|
|
else next.add(key);
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
function handleSort(field: string) {
|
|
if (field === "resource") {
|
|
toggle("resource", (a) => a.resource?.displayName ?? null);
|
|
} else if (field === "project") {
|
|
toggle("project", (a) => a.project?.name ?? null);
|
|
} else {
|
|
toggle(field);
|
|
}
|
|
}
|
|
|
|
function clearAll() {
|
|
setAllocFilters({
|
|
projectId: "",
|
|
resourceId: "",
|
|
status: "",
|
|
hidePast: "false",
|
|
hideCompleted: "false",
|
|
hideDraft: "false",
|
|
});
|
|
}
|
|
|
|
const chips = [
|
|
...(filterProjectId
|
|
? [{ label: `Project filter active`, onRemove: () => setFilterProjectId("") }]
|
|
: []),
|
|
...(filterResourceId
|
|
? [{ label: `Resource filter active`, onRemove: () => setFilterResourceId("") }]
|
|
: []),
|
|
...(filterStatus
|
|
? [{ label: `Status: ${filterStatus}`, onRemove: () => setFilterStatus("") }]
|
|
: []),
|
|
...(hidePastProjects
|
|
? [{ label: "Hiding past projects", onRemove: () => setHidePastProjects(false) }]
|
|
: []),
|
|
...(hideCompletedProjects
|
|
? [{ label: "Hiding completed/cancelled", onRemove: () => setHideCompletedProjects(false) }]
|
|
: []),
|
|
...(hideDraftProjects
|
|
? [{ label: "Hiding draft projects", onRemove: () => setHideDraftProjects(false) }]
|
|
: []),
|
|
];
|
|
|
|
const emptyState = getAllocationEmptyState({
|
|
totalAssignments: assignmentList.length,
|
|
totalDemands: demandList.length,
|
|
visibleAssignments: filteredAllocations.length,
|
|
visibleDemands: filteredDemands.length,
|
|
hidePastProjects,
|
|
hideCompletedProjects,
|
|
hideDraftProjects,
|
|
});
|
|
|
|
useEffect(() => {
|
|
if (isLoading || hasEvaluatedInitialVisibility.current) {
|
|
return;
|
|
}
|
|
|
|
hasEvaluatedInitialVisibility.current = true;
|
|
|
|
if (
|
|
shouldAutoRelaxAllocationFilters({
|
|
totalAssignments: assignmentList.length,
|
|
totalDemands: demandList.length,
|
|
visibleAssignments: filteredAllocations.length,
|
|
visibleDemands: filteredDemands.length,
|
|
hidePastProjects,
|
|
hideCompletedProjects,
|
|
hideDraftProjects,
|
|
})
|
|
) {
|
|
setAllocFilters({ hidePast: "false", hideCompleted: "false", hideDraft: "false" });
|
|
}
|
|
}, [
|
|
assignmentList.length,
|
|
demandList.length,
|
|
filteredAllocations.length,
|
|
filteredDemands.length,
|
|
hideCompletedProjects,
|
|
hideDraftProjects,
|
|
hidePastProjects,
|
|
isLoading,
|
|
]);
|
|
|
|
function formatPeriod(alloc: AllocationWithDetails) {
|
|
return formatDate(alloc.startDate) + " \u2192 " + formatDate(alloc.endDate);
|
|
}
|
|
|
|
function handleSingleDelete(allocation: AllocationWithDetails) {
|
|
const id = getPlanningEntryMutationId(allocation);
|
|
|
|
if (!allocation.resourceId) {
|
|
deleteDemandMutation.mutate({ id });
|
|
return;
|
|
}
|
|
|
|
deleteAssignmentMutation.mutate({ id });
|
|
}
|
|
|
|
const singleDeletePending = deleteDemandMutation.isPending || deleteAssignmentMutation.isPending;
|
|
|
|
// colSpan for empty/loading states: checkbox + visible columns + actions
|
|
const totalColSpan = 1 + visibleColumns.length + 1;
|
|
|
|
function renderAllocRow(alloc: AllocationWithDetails, isGrouped = false, rowIndex = 0) {
|
|
const isSelected = selection.selectedIds.has(alloc.id);
|
|
const leftBorder = STATUS_LEFT_BORDER[alloc.status] ?? "border-l-gray-300";
|
|
return (
|
|
<tr
|
|
key={alloc.id}
|
|
data-testid="allocation-row"
|
|
className={`border-l-[3px] transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 animate-row-enter ${leftBorder} ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}
|
|
style={{ animationDelay: `${Math.min(rowIndex * 15, 300)}ms` }}
|
|
>
|
|
<td className="px-4 py-3">
|
|
<input
|
|
type="checkbox"
|
|
checked={isSelected}
|
|
onChange={() => selection.toggle(alloc.id)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
</td>
|
|
{visibleColumns.map((col) => {
|
|
switch (col.key) {
|
|
case "resource":
|
|
return (
|
|
<td
|
|
key={col.key}
|
|
className="px-4 py-3 text-sm font-medium text-gray-900 dark:text-gray-100"
|
|
>
|
|
{isGrouped ? (
|
|
<span className="text-gray-400 dark:text-gray-500">↳</span>
|
|
) : (
|
|
(alloc.resource?.displayName ?? "—")
|
|
)}
|
|
</td>
|
|
);
|
|
case "project":
|
|
return (
|
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
|
{alloc.project ? (
|
|
<>
|
|
<span className="font-mono text-xs">{alloc.project.shortCode}</span>{" "}
|
|
{alloc.project.name}
|
|
</>
|
|
) : (
|
|
"—"
|
|
)}
|
|
</td>
|
|
);
|
|
case "role":
|
|
return (
|
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-300">
|
|
{alloc.role}
|
|
</td>
|
|
);
|
|
case "dates":
|
|
return (
|
|
<td
|
|
key={col.key}
|
|
className="whitespace-nowrap px-4 py-3 text-xs text-gray-500 dark:text-gray-400"
|
|
>
|
|
{formatPeriod(alloc)}
|
|
</td>
|
|
);
|
|
case "hoursPerDay":
|
|
return (
|
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
{alloc.hoursPerDay}h
|
|
</td>
|
|
);
|
|
case "cost":
|
|
return (
|
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-900 dark:text-gray-100">
|
|
{(alloc.dailyCostCents / 100).toFixed(0)} €
|
|
</td>
|
|
);
|
|
case "status":
|
|
return (
|
|
<td key={col.key} className="px-4 py-3">
|
|
<span
|
|
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[alloc.status] ?? "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400"}`}
|
|
>
|
|
{alloc.status}
|
|
</span>
|
|
</td>
|
|
);
|
|
default:
|
|
return (
|
|
<td key={col.key} className="px-4 py-3 text-sm text-gray-500 dark:text-gray-400">
|
|
—
|
|
</td>
|
|
);
|
|
}
|
|
})}
|
|
<td className="px-4 py-3">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<button type="button" onClick={() => openEdit(alloc)} className="app-action-edit">
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmDelete({ single: alloc })}
|
|
disabled={singleDeletePending}
|
|
className="app-action-delete disabled:opacity-50"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="app-page space-y-5 pb-24">
|
|
<SuccessToast
|
|
show={showStatusToast}
|
|
message="Allocation status updated"
|
|
onDone={() => setShowStatusToast(false)}
|
|
/>
|
|
<div className="app-page-header gap-4">
|
|
<div>
|
|
<h1 className="app-page-title">Allocations</h1>
|
|
<p className="app-page-subtitle mt-1">
|
|
{isLoading
|
|
? "Loading…"
|
|
: allocationQueryFailure
|
|
? allocationQueryFailure.title
|
|
: `${filteredAllocations.length} assignment${filteredAllocations.length !== 1 ? "s" : ""}${filteredDemands.length > 0 ? ` · ${filteredDemands.length} open demand${filteredDemands.length !== 1 ? "s" : ""}` : ""}`}
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<a
|
|
href="/api/reports/allocations"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
|
|
>
|
|
↓ PDF
|
|
</a>
|
|
<a
|
|
href="/api/reports/allocations?format=xlsx"
|
|
download
|
|
className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
|
|
>
|
|
↓ XLS
|
|
</a>
|
|
<button
|
|
type="button"
|
|
onClick={openCreate}
|
|
className="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50"
|
|
>
|
|
New Planning Entry
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<FilterBar>
|
|
<ProjectCombobox
|
|
value={filterProjectId || null}
|
|
onChange={(id) => setFilterProjectId(id ?? "")}
|
|
placeholder="Filter by project…"
|
|
className="min-w-[280px]"
|
|
/>
|
|
|
|
<ResourceCombobox
|
|
value={filterResourceId || null}
|
|
onChange={(id) => setFilterResourceId(id ?? "")}
|
|
placeholder="Filter by resource…"
|
|
className="min-w-[180px]"
|
|
/>
|
|
|
|
<select
|
|
value={filterStatus}
|
|
onChange={(e) => setFilterStatus(e.target.value)}
|
|
className="app-select"
|
|
>
|
|
<option value="">All Statuses</option>
|
|
{ALL_ALLOC_STATUSES.map((s) => (
|
|
<option key={s.value} value={s.value}>
|
|
{s.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
|
|
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
|
<input
|
|
type="checkbox"
|
|
checked={hidePastProjects}
|
|
onChange={(e) => setHidePastProjects(e.target.checked)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
Hide past
|
|
</label>
|
|
|
|
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
|
<input
|
|
type="checkbox"
|
|
checked={hideCompletedProjects}
|
|
onChange={(e) => setHideCompletedProjects(e.target.checked)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
Hide completed
|
|
</label>
|
|
|
|
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
|
|
<input
|
|
type="checkbox"
|
|
checked={hideDraftProjects}
|
|
onChange={(e) => setHideDraftProjects(e.target.checked)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
Hide drafts
|
|
</label>
|
|
<ColumnTogglePanel
|
|
allColumns={allColumns}
|
|
visibleKeys={visibleKeys}
|
|
onSetVisible={setVisible}
|
|
defaultKeys={defaultKeys}
|
|
/>
|
|
|
|
{/* View mode toggle */}
|
|
<div className="flex items-center rounded-lg border border-gray-300 dark:border-gray-600 overflow-hidden">
|
|
<button
|
|
type="button"
|
|
onClick={toggleViewMode}
|
|
title="Grouped by person"
|
|
className={`px-2.5 py-2 text-sm transition-colors ${viewMode === "grouped" ? "bg-brand-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"}`}
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={toggleViewMode}
|
|
title="Flat list"
|
|
className={`px-2.5 py-2 text-sm transition-colors ${viewMode === "flat" ? "bg-brand-600 text-white" : "bg-white text-gray-600 hover:bg-gray-50 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800"}`}
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 6h16M4 10h16M4 14h16M4 18h16"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{sorted.length > 0 && (
|
|
<button
|
|
type="button"
|
|
onClick={handleExportExcel}
|
|
title="Export visible rows to Excel"
|
|
className="inline-flex items-center gap-1.5 rounded-lg border border-gray-300 dark:border-gray-600 px-2.5 py-2 text-sm font-medium text-gray-600 dark:text-gray-300 transition hover:border-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
>
|
|
<svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"
|
|
/>
|
|
</svg>
|
|
Export
|
|
</button>
|
|
)}
|
|
|
|
{viewMode === "grouped" && groups.length > 1 && (
|
|
<div className="flex items-center gap-1">
|
|
<button
|
|
type="button"
|
|
onClick={expandAll}
|
|
className="text-xs text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200 whitespace-nowrap"
|
|
>
|
|
Expand all
|
|
</button>
|
|
<span className="text-gray-300 dark:text-gray-600">|</span>
|
|
<button
|
|
type="button"
|
|
onClick={collapseAll}
|
|
className="text-xs text-brand-600 hover:text-brand-800 dark:text-brand-400 dark:hover:text-brand-200 whitespace-nowrap"
|
|
>
|
|
Collapse all
|
|
</button>
|
|
</div>
|
|
)}
|
|
</FilterBar>
|
|
|
|
{/* Filter chips */}
|
|
{chips.length > 0 && (
|
|
<div className="mb-3">
|
|
<FilterChips chips={chips} onClearAll={clearAll} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="app-data-table">
|
|
<table data-testid="allocations-table" className="w-full">
|
|
<thead className="border-b border-gray-200 dark:border-gray-700">
|
|
<tr>
|
|
<th className="px-4 py-3 w-10">
|
|
<input
|
|
type="checkbox"
|
|
checked={selection.isAllSelected(allocationIds)}
|
|
ref={(el) => {
|
|
if (el) el.indeterminate = selection.isIndeterminate(allocationIds);
|
|
}}
|
|
onChange={() => selection.toggleAll(allocationIds)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
</th>
|
|
{visibleColumns.map((col) => {
|
|
const tooltips: Record<string, { tip: string; width?: string }> = {
|
|
resource: {
|
|
tip: "The person assigned to this time block. Grouped view clusters entries by resource.",
|
|
},
|
|
project: {
|
|
tip: "The project this allocation belongs to, identified by short code and name.",
|
|
},
|
|
role: {
|
|
tip: "The role this allocation was created for. May differ from the resource's primary role.",
|
|
},
|
|
dates: { tip: "Start and end date of this allocation period (inclusive)." },
|
|
hoursPerDay: {
|
|
tip: "Planned working hours per calendar day for this allocation.",
|
|
},
|
|
cost: {
|
|
tip: "Daily cost = resource LCR x hours per day. Total cost = daily cost x working days.",
|
|
width: "w-72",
|
|
},
|
|
status: {
|
|
tip: "PROPOSED = requested · CONFIRMED = approved · ACTIVE = ongoing · COMPLETED = finished · CANCELLED = removed.",
|
|
width: "w-72",
|
|
},
|
|
};
|
|
const t = tooltips[col.key];
|
|
const fieldMap: Record<string, string> = {
|
|
dates: "startDate",
|
|
hoursPerDay: "hoursPerDay",
|
|
cost: "dailyCostCents",
|
|
};
|
|
return (
|
|
<SortableColumnHeader
|
|
key={col.key}
|
|
label={col.label}
|
|
field={fieldMap[col.key] ?? col.key}
|
|
sortField={sortField}
|
|
sortDir={sortDir}
|
|
onSort={handleSort}
|
|
{...(t?.tip ? { tooltip: t.tip } : {})}
|
|
{...(t?.width ? { tooltipWidth: t.width } : {})}
|
|
/>
|
|
);
|
|
})}
|
|
<th className="px-4 py-3" />
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
|
|
{isLoading && (
|
|
<tr>
|
|
<td
|
|
colSpan={totalColSpan}
|
|
className="py-12 text-center text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
Loading allocations…
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!isLoading && allocationQueryFailure && (
|
|
<tr>
|
|
<td
|
|
colSpan={totalColSpan}
|
|
className="py-12 text-center text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
<div
|
|
data-testid={allocationQueryFailure.testId}
|
|
className="flex flex-col items-center gap-2"
|
|
>
|
|
<p className="font-medium text-gray-700 dark:text-gray-200">
|
|
{allocationQueryFailure.title}
|
|
</p>
|
|
<p>{allocationQueryFailure.detail}</p>
|
|
{allocationQueryFailure.actionLabel && allocationQueryFailure.actionHref && (
|
|
<a
|
|
href={allocationQueryFailure.actionHref}
|
|
className="rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:text-gray-200 dark:hover:bg-gray-800"
|
|
>
|
|
{allocationQueryFailure.actionLabel}
|
|
</a>
|
|
)}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!isLoading && !allocationQueryFailure && sorted.length === 0 && (
|
|
<tr>
|
|
<td colSpan={totalColSpan}>
|
|
{emptyState.showResetAction ? (
|
|
<EmptyState
|
|
testId="allocations-empty-state"
|
|
title={emptyState.title}
|
|
detail={emptyState.detail}
|
|
action={{ label: "Show all assignments", onClick: clearAll }}
|
|
/>
|
|
) : (
|
|
<EmptyState
|
|
testId="allocations-empty-state"
|
|
title={emptyState.title}
|
|
detail={emptyState.detail}
|
|
/>
|
|
)}
|
|
</td>
|
|
</tr>
|
|
)}
|
|
|
|
{!isLoading &&
|
|
!allocationQueryFailure &&
|
|
viewMode === "flat" &&
|
|
sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
|
|
|
|
{!isLoading &&
|
|
!allocationQueryFailure &&
|
|
viewMode === "grouped" &&
|
|
groups.map((group) => {
|
|
const isCollapsed =
|
|
collapsedGroups === "all" || collapsedGroups.has(group.resourceId);
|
|
const groupAllocIds = group.allocations.map((a) => a.id);
|
|
const allGroupSelected = selection.isAllSelected(groupAllocIds);
|
|
const groupIndeterminate =
|
|
!allGroupSelected && groupAllocIds.some((id) => selection.selectedIds.has(id));
|
|
return (
|
|
<GroupRows key={group.resourceId}>
|
|
{/* Group header */}
|
|
<tr
|
|
data-testid="allocation-group-header"
|
|
className="bg-gray-50 dark:bg-gray-800/50 cursor-pointer select-none hover:bg-gray-100 dark:hover:bg-gray-800/80 transition-colors"
|
|
onClick={() => toggleGroup(group.resourceId)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
toggleGroup(group.resourceId);
|
|
}
|
|
}}
|
|
tabIndex={0}
|
|
role="button"
|
|
aria-expanded={!isCollapsed}
|
|
>
|
|
<td className="px-4 py-2.5" onClick={(e) => e.stopPropagation()}>
|
|
<input
|
|
type="checkbox"
|
|
checked={allGroupSelected}
|
|
ref={(el) => {
|
|
if (el) el.indeterminate = groupIndeterminate;
|
|
}}
|
|
onChange={() => selection.toggleAll(groupAllocIds)}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
</td>
|
|
<td colSpan={visibleColumns.length + 1} className="px-4 py-2.5">
|
|
<div className="flex items-center gap-2">
|
|
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
|
{isCollapsed ? "▸" : "▾"}
|
|
</span>
|
|
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
{group.resourceName}
|
|
</span>
|
|
{group.eid && (
|
|
<span className="text-xs font-mono text-gray-400 dark:text-gray-500">
|
|
{group.eid}
|
|
</span>
|
|
)}
|
|
{group.chapter && (
|
|
<span className="text-xs text-gray-400 dark:text-gray-500">
|
|
· {group.chapter}
|
|
</span>
|
|
)}
|
|
<span className="inline-flex items-center rounded-full bg-gray-200 px-2 py-0.5 text-xs font-medium text-gray-600 dark:bg-gray-700 dark:text-gray-300">
|
|
{group.allocations.length}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{/* Project sub-groups within person */}
|
|
{!isCollapsed &&
|
|
group.projectSubGroups.map((subGroup) => {
|
|
const subKey = `${group.resourceId}::${subGroup.projectId}`;
|
|
const isSubExpanded = expandedSubGroups.has(subKey);
|
|
|
|
// Single allocation for this project — render directly, no sub-group header
|
|
if (subGroup.allocations.length === 1) {
|
|
return (
|
|
<GroupRows key={subKey}>
|
|
{renderAllocRow(subGroup.allocations[0]!, true, 0)}
|
|
</GroupRows>
|
|
);
|
|
}
|
|
|
|
// Multiple allocations — show collapsible project sub-group
|
|
return (
|
|
<GroupRows key={subKey}>
|
|
<tr
|
|
data-testid="allocation-subgroup-header"
|
|
className="bg-gray-25 dark:bg-gray-850/30 cursor-pointer select-none hover:bg-gray-100/60 dark:hover:bg-gray-800/40 transition-colors"
|
|
onClick={() => toggleSubGroup(group.resourceId, subGroup.projectId)}
|
|
tabIndex={0}
|
|
role="button"
|
|
aria-expanded={isSubExpanded}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "Enter" || e.key === " ") {
|
|
e.preventDefault();
|
|
toggleSubGroup(group.resourceId, subGroup.projectId);
|
|
}
|
|
}}
|
|
>
|
|
<td className="px-4 py-2" onClick={(e) => e.stopPropagation()}>
|
|
<input
|
|
type="checkbox"
|
|
checked={selection.isAllSelected(
|
|
subGroup.allocations.map((a) => a.id),
|
|
)}
|
|
ref={(el) => {
|
|
if (el) {
|
|
const ids = subGroup.allocations.map((a) => a.id);
|
|
el.indeterminate =
|
|
!selection.isAllSelected(ids) &&
|
|
ids.some((id) => selection.selectedIds.has(id));
|
|
}
|
|
}}
|
|
onChange={() =>
|
|
selection.toggleAll(subGroup.allocations.map((a) => a.id))
|
|
}
|
|
className="rounded border-gray-300 dark:border-gray-600"
|
|
/>
|
|
</td>
|
|
<td colSpan={visibleColumns.length + 1} className="px-4 py-2">
|
|
<div className="flex items-center gap-2 pl-4">
|
|
<span className="text-gray-400 dark:text-gray-500 text-xs">
|
|
{isSubExpanded ? "▾" : "▸"}
|
|
</span>
|
|
<span className="font-mono text-xs text-gray-400 dark:text-gray-500">
|
|
{subGroup.projectCode}
|
|
</span>
|
|
<span className="text-sm text-gray-700 dark:text-gray-300">
|
|
{subGroup.projectName}
|
|
</span>
|
|
<span className="text-xs text-gray-400 dark:text-gray-500">
|
|
{formatDate(subGroup.earliestStart)} →{" "}
|
|
{formatDate(subGroup.latestEnd)}
|
|
</span>
|
|
<span className="text-xs text-gray-500 dark:text-gray-400">
|
|
{subGroup.typicalHoursPerDay}h/day
|
|
</span>
|
|
<span className="inline-flex items-center rounded-full bg-gray-200 px-1.5 py-0.5 text-[10px] font-medium text-gray-500 dark:bg-gray-700 dark:text-gray-400">
|
|
{subGroup.allocations.length}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
{isSubExpanded &&
|
|
subGroup.allocations.map((alloc, idx) =>
|
|
renderAllocRow(alloc, true, idx),
|
|
)}
|
|
</GroupRows>
|
|
);
|
|
})}
|
|
</GroupRows>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{!isLoading && filteredDemands.length > 0 && (
|
|
<div className="app-surface mt-6 overflow-hidden border-amber-200 dark:border-amber-900/70">
|
|
<div className="flex items-center justify-between border-b border-amber-200 bg-amber-50/70 px-4 py-3 dark:border-amber-900/70 dark:bg-amber-950/20">
|
|
<div>
|
|
<h2 className="text-sm font-semibold text-amber-900 dark:text-amber-200">
|
|
Open Demands
|
|
</h2>
|
|
<p className="text-xs text-amber-700 dark:text-amber-300/80">
|
|
Placeholder demand rows not yet assigned to a resource.
|
|
</p>
|
|
</div>
|
|
<span className="text-xs font-medium text-amber-700 dark:text-amber-300">
|
|
{filteredDemands.length} item{filteredDemands.length !== 1 ? "s" : ""}
|
|
</span>
|
|
</div>
|
|
<div className="divide-y divide-amber-100 dark:divide-amber-900/40">
|
|
{filteredDemands.map((demand) => (
|
|
<div
|
|
key={demand.id}
|
|
className="flex items-center justify-between gap-4 px-4 py-3 hover:bg-amber-50/40 dark:hover:bg-amber-950/10"
|
|
>
|
|
<div className="min-w-0">
|
|
<div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">
|
|
{demand.project ? (
|
|
<>
|
|
<span className="font-mono text-xs">{demand.project.shortCode}</span>{" "}
|
|
{demand.project.name}
|
|
</>
|
|
) : (
|
|
"Unknown project"
|
|
)}
|
|
</div>
|
|
<div className="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
{demand.role ?? "Placeholder role"} · {formatPeriod(demand)} ·{" "}
|
|
{demand.hoursPerDay}h/day
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-shrink-0 items-center gap-4">
|
|
<div className="text-right">
|
|
<div className="text-xs uppercase tracking-wide text-amber-700 dark:text-amber-300">
|
|
Unfilled
|
|
</div>
|
|
<div className="text-sm font-semibold text-amber-900 dark:text-amber-200">
|
|
{demand.unfilledHeadcount ?? demand.headcount} /{" "}
|
|
{demand.requestedHeadcount ?? demand.headcount}
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => openEdit(demand as AllocationWithDetails)}
|
|
className="app-action-edit"
|
|
>
|
|
Edit
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setConfirmDelete({ single: demand as AllocationWithDetails })}
|
|
disabled={singleDeletePending}
|
|
className="app-action-delete disabled:opacity-50"
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Batch Status Picker */}
|
|
{batchStatusPicker && (
|
|
<div
|
|
className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center p-4"
|
|
onClick={() => setBatchStatusPicker(false)}
|
|
>
|
|
<div
|
|
className="min-w-[220px] rounded-2xl bg-white p-5 shadow-2xl dark:bg-gray-900"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<h3 className="mb-3 text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
Set status for {selection.count} allocations
|
|
</h3>
|
|
<div className="flex flex-col gap-1">
|
|
{ALL_ALLOC_STATUSES.map((s) => (
|
|
<button
|
|
key={s.value}
|
|
type="button"
|
|
onClick={() => {
|
|
setConfirmBatchStatus({ ids: selectedMutationIds, status: s.value });
|
|
setBatchStatusPicker(false);
|
|
}}
|
|
className="w-full rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50 dark:hover:bg-gray-800"
|
|
>
|
|
<span
|
|
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[s.value]}`}
|
|
>
|
|
{s.label}
|
|
</span>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Confirm single delete */}
|
|
{confirmDelete?.single && (
|
|
<ConfirmDialog
|
|
title="Delete Allocation"
|
|
message={`Delete allocation for ${confirmDelete.single.resource?.displayName ?? "resource"} on ${confirmDelete.single.project?.name ?? "project"}?`}
|
|
confirmLabel="Delete"
|
|
variant="danger"
|
|
onConfirm={() => {
|
|
handleSingleDelete(confirmDelete.single!);
|
|
setConfirmDelete(null);
|
|
}}
|
|
onCancel={() => setConfirmDelete(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Confirm batch delete */}
|
|
{confirmDelete?.ids && (
|
|
<ConfirmDialog
|
|
title="Delete Allocations"
|
|
message={`Delete ${confirmDelete.ids.length} selected allocation${confirmDelete.ids.length !== 1 ? "s" : ""}? This cannot be undone.`}
|
|
confirmLabel="Delete All"
|
|
variant="danger"
|
|
onConfirm={() => {
|
|
batchDeleteMutation.mutate({ ids: confirmDelete.ids! });
|
|
setConfirmDelete(null);
|
|
}}
|
|
onCancel={() => setConfirmDelete(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Confirm batch status */}
|
|
{confirmBatchStatus && (
|
|
<ConfirmDialog
|
|
title="Update Allocation Status"
|
|
message={`Set ${confirmBatchStatus.ids.length} allocation${confirmBatchStatus.ids.length !== 1 ? "s" : ""} to "${confirmBatchStatus.status}"?`}
|
|
confirmLabel="Update"
|
|
onConfirm={() => {
|
|
batchStatusMutation.mutate({
|
|
ids: confirmBatchStatus.ids,
|
|
status: confirmBatchStatus.status as never,
|
|
});
|
|
setConfirmBatchStatus(null);
|
|
}}
|
|
onCancel={() => setConfirmBatchStatus(null)}
|
|
/>
|
|
)}
|
|
|
|
{/* Batch Action Bar */}
|
|
<BatchActionBar
|
|
count={selection.count}
|
|
onClear={selection.clear}
|
|
actions={[
|
|
{
|
|
label: "Set Status…",
|
|
onClick: () => setBatchStatusPicker(true),
|
|
disabled: batchStatusMutation.isPending,
|
|
},
|
|
{
|
|
label: "Shift Dates…",
|
|
onClick: () => setShowDateShiftModal(true),
|
|
disabled: batchDateShiftMutation.isPending,
|
|
},
|
|
{
|
|
label: `Delete (${selection.count})`,
|
|
variant: "danger",
|
|
onClick: () => setConfirmDelete({ ids: selectedMutationIds }),
|
|
disabled: batchDeleteMutation.isPending,
|
|
},
|
|
]}
|
|
/>
|
|
|
|
{/* Batch date shift modal */}
|
|
{showDateShiftModal && (
|
|
<BatchDateShiftModal
|
|
count={selection.count}
|
|
isPending={batchDateShiftMutation.isPending}
|
|
onConfirm={(daysDelta) =>
|
|
batchDateShiftMutation.mutate({
|
|
allocationIds: selectedMutationIds,
|
|
daysDelta,
|
|
mode: "move",
|
|
})
|
|
}
|
|
onClose={() => setShowDateShiftModal(false)}
|
|
/>
|
|
)}
|
|
|
|
{/* Modal */}
|
|
{modalOpen && (
|
|
<AllocationModal
|
|
allocation={editingAllocation}
|
|
onClose={closeModal}
|
|
onSuccess={closeModal}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|