refactor(web): decompose AllocationsClient and UsersClient into focused subcomponents
AllocationsClient (1364→962 lines): extracted AllocationRow, AllocationGroupedBody, OpenDemandsPanel, and AllocationBatchDialogs. UsersClient (1338→895 lines): extracted UserEditModal and UserCreateModal. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,175 @@
|
||||
import type { AllocationWithDetails, AllocationStatus } from "@capakraken/shared";
|
||||
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
||||
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
||||
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
|
||||
import { BatchDateShiftModal } from "./BatchDateShiftModal.js";
|
||||
|
||||
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 ConfirmDeleteState = {
|
||||
single?: AllocationWithDetails;
|
||||
ids?: string[];
|
||||
} | null;
|
||||
|
||||
type ConfirmBatchStatusState = {
|
||||
ids: string[];
|
||||
status: string;
|
||||
} | null;
|
||||
|
||||
type AllocationBatchDialogsProps = {
|
||||
selectionCount: number;
|
||||
selectedMutationIds: string[];
|
||||
onClearSelection: () => void;
|
||||
|
||||
// Batch status picker
|
||||
batchStatusPickerOpen: boolean;
|
||||
onOpenBatchStatusPicker: () => void;
|
||||
onCloseBatchStatusPicker: () => void;
|
||||
batchStatusPending: boolean;
|
||||
onBatchStatusConfirm: (ids: string[], status: AllocationStatus) => void;
|
||||
|
||||
// Delete
|
||||
confirmDelete: ConfirmDeleteState;
|
||||
onSetConfirmDelete: (state: ConfirmDeleteState) => void;
|
||||
onSingleDelete: (alloc: AllocationWithDetails) => void;
|
||||
onBatchDelete: (ids: string[]) => void;
|
||||
batchDeletePending: boolean;
|
||||
|
||||
// Date shift
|
||||
showDateShiftModal: boolean;
|
||||
onOpenDateShiftModal: () => void;
|
||||
onCloseDateShiftModal: () => void;
|
||||
onDateShiftConfirm: (daysDelta: number) => void;
|
||||
dateShiftPending: boolean;
|
||||
};
|
||||
|
||||
export function AllocationBatchDialogs({
|
||||
selectionCount,
|
||||
selectedMutationIds,
|
||||
onClearSelection,
|
||||
batchStatusPickerOpen,
|
||||
onOpenBatchStatusPicker,
|
||||
onCloseBatchStatusPicker,
|
||||
batchStatusPending,
|
||||
onBatchStatusConfirm,
|
||||
confirmDelete,
|
||||
onSetConfirmDelete,
|
||||
onSingleDelete,
|
||||
onBatchDelete,
|
||||
batchDeletePending,
|
||||
showDateShiftModal,
|
||||
onOpenDateShiftModal,
|
||||
onCloseDateShiftModal,
|
||||
onDateShiftConfirm,
|
||||
dateShiftPending,
|
||||
}: AllocationBatchDialogsProps) {
|
||||
return (
|
||||
<>
|
||||
{/* Batch Status Picker */}
|
||||
{batchStatusPickerOpen && (
|
||||
<div
|
||||
className="fixed inset-0 bg-black/30 z-50 flex items-center justify-center p-4"
|
||||
onClick={onCloseBatchStatusPicker}
|
||||
>
|
||||
<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 {selectionCount} allocations
|
||||
</h3>
|
||||
<div className="flex flex-col gap-1">
|
||||
{ALL_ALLOC_STATUSES.map((s) => (
|
||||
<button
|
||||
key={s.value}
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onBatchStatusConfirm(selectedMutationIds, s.value as AllocationStatus);
|
||||
onCloseBatchStatusPicker();
|
||||
}}
|
||||
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={() => {
|
||||
onSingleDelete(confirmDelete.single!);
|
||||
onSetConfirmDelete(null);
|
||||
}}
|
||||
onCancel={() => onSetConfirmDelete(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={() => {
|
||||
onBatchDelete(confirmDelete.ids!);
|
||||
onSetConfirmDelete(null);
|
||||
}}
|
||||
onCancel={() => onSetConfirmDelete(null)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Batch Action Bar */}
|
||||
<BatchActionBar
|
||||
count={selectionCount}
|
||||
onClear={onClearSelection}
|
||||
actions={[
|
||||
{
|
||||
label: "Set Status…",
|
||||
onClick: onOpenBatchStatusPicker,
|
||||
disabled: batchStatusPending,
|
||||
},
|
||||
{
|
||||
label: "Shift Dates…",
|
||||
onClick: onOpenDateShiftModal,
|
||||
disabled: dateShiftPending,
|
||||
},
|
||||
{
|
||||
label: `Delete (${selectionCount})`,
|
||||
variant: "danger",
|
||||
onClick: () => onSetConfirmDelete({ ids: selectedMutationIds }),
|
||||
disabled: batchDeletePending,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* Batch date shift modal */}
|
||||
{showDateShiftModal && (
|
||||
<BatchDateShiftModal
|
||||
count={selectionCount}
|
||||
isPending={dateShiftPending}
|
||||
onConfirm={onDateShiftConfirm}
|
||||
onClose={onCloseDateShiftModal}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,230 @@
|
||||
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
|
||||
import type { CollapsedAllocationGroups } from "./allocationGroupState.js";
|
||||
import { formatDate } from "~/lib/format.js";
|
||||
import { AllocationRow } from "./AllocationRow.js";
|
||||
|
||||
type ProjectSubGroup = {
|
||||
projectId: string;
|
||||
projectName: string;
|
||||
projectCode: string;
|
||||
allocations: AllocationWithDetails[];
|
||||
typicalHoursPerDay: number;
|
||||
earliestStart: Date;
|
||||
latestEnd: Date;
|
||||
};
|
||||
|
||||
export type AllocGroup = {
|
||||
resourceId: string;
|
||||
resourceName: string;
|
||||
eid: string;
|
||||
chapter: string | null;
|
||||
allocations: AllocationWithDetails[];
|
||||
projectSubGroups: ProjectSubGroup[];
|
||||
};
|
||||
|
||||
/** Fragment wrapper for grouped rows — avoids unnecessary DOM nodes */
|
||||
function GroupRows({ children }: { children: React.ReactNode }) {
|
||||
return <>{children}</>;
|
||||
}
|
||||
|
||||
type AllocationGroupedBodyProps = {
|
||||
groups: AllocGroup[];
|
||||
collapsedGroups: CollapsedAllocationGroups;
|
||||
expandedSubGroups: Set<string>;
|
||||
visibleColumns: ColumnDef[];
|
||||
selectedIds: Set<string>;
|
||||
isAllSelected: (ids: string[]) => boolean;
|
||||
isIndeterminate?: (ids: string[]) => boolean;
|
||||
onToggleSelection: (id: string) => void;
|
||||
onToggleAllSelection: (ids: string[]) => void;
|
||||
onToggleGroup: (resourceId: string) => void;
|
||||
onToggleSubGroup: (resourceId: string, projectId: string) => void;
|
||||
onEdit: (alloc: AllocationWithDetails) => void;
|
||||
onRequestDelete: (alloc: AllocationWithDetails) => void;
|
||||
deleteDisabled: boolean;
|
||||
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||
};
|
||||
|
||||
export function AllocationGroupedBody({
|
||||
groups,
|
||||
collapsedGroups,
|
||||
expandedSubGroups,
|
||||
visibleColumns,
|
||||
selectedIds,
|
||||
isAllSelected,
|
||||
onToggleSelection,
|
||||
onToggleAllSelection,
|
||||
onToggleGroup,
|
||||
onToggleSubGroup,
|
||||
onEdit,
|
||||
onRequestDelete,
|
||||
deleteDisabled,
|
||||
formatPeriod,
|
||||
}: AllocationGroupedBodyProps) {
|
||||
return (
|
||||
<>
|
||||
{groups.map((group) => {
|
||||
const isCollapsed = collapsedGroups === "all" || collapsedGroups.has(group.resourceId);
|
||||
const groupAllocIds = group.allocations.map((a) => a.id);
|
||||
const allGroupSelected = isAllSelected(groupAllocIds);
|
||||
const groupIndeterminate =
|
||||
!allGroupSelected && groupAllocIds.some((id) => 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={() => onToggleGroup(group.resourceId)}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onToggleGroup(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={() => onToggleAllSelection(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) {
|
||||
const alloc = subGroup.allocations[0]!;
|
||||
return (
|
||||
<GroupRows key={subKey}>
|
||||
<AllocationRow
|
||||
alloc={alloc}
|
||||
visibleColumns={visibleColumns}
|
||||
isGrouped
|
||||
rowIndex={0}
|
||||
isSelected={selectedIds.has(alloc.id)}
|
||||
onToggleSelection={() => onToggleSelection(alloc.id)}
|
||||
onEdit={() => onEdit(alloc)}
|
||||
onRequestDelete={() => onRequestDelete(alloc)}
|
||||
deleteDisabled={deleteDisabled}
|
||||
formatPeriod={formatPeriod}
|
||||
/>
|
||||
</GroupRows>
|
||||
);
|
||||
}
|
||||
|
||||
// Multiple allocations — show collapsible project sub-group
|
||||
const subAllocIds = subGroup.allocations.map((a) => a.id);
|
||||
const allSubSelected = isAllSelected(subAllocIds);
|
||||
const subIndeterminate =
|
||||
!allSubSelected && subAllocIds.some((id) => selectedIds.has(id));
|
||||
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={() => onToggleSubGroup(group.resourceId, subGroup.projectId)}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-expanded={isSubExpanded}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
onToggleSubGroup(group.resourceId, subGroup.projectId);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<td className="px-4 py-2" onClick={(e) => e.stopPropagation()}>
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allSubSelected}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = subIndeterminate;
|
||||
}}
|
||||
onChange={() => onToggleAllSelection(subAllocIds)}
|
||||
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) => (
|
||||
<AllocationRow
|
||||
key={alloc.id}
|
||||
alloc={alloc}
|
||||
visibleColumns={visibleColumns}
|
||||
isGrouped
|
||||
rowIndex={idx}
|
||||
isSelected={selectedIds.has(alloc.id)}
|
||||
onToggleSelection={() => onToggleSelection(alloc.id)}
|
||||
onEdit={() => onEdit(alloc)}
|
||||
onRequestDelete={() => onRequestDelete(alloc)}
|
||||
deleteDisabled={deleteDisabled}
|
||||
formatPeriod={formatPeriod}
|
||||
/>
|
||||
))}
|
||||
</GroupRows>
|
||||
);
|
||||
})}
|
||||
</GroupRows>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
|
||||
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
|
||||
|
||||
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",
|
||||
};
|
||||
|
||||
type AllocationRowProps = {
|
||||
alloc: AllocationWithDetails;
|
||||
visibleColumns: ColumnDef[];
|
||||
isGrouped?: boolean;
|
||||
rowIndex?: number;
|
||||
isSelected: boolean;
|
||||
onToggleSelection: () => void;
|
||||
onEdit: () => void;
|
||||
onRequestDelete: () => void;
|
||||
deleteDisabled: boolean;
|
||||
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||
};
|
||||
|
||||
export function AllocationRow({
|
||||
alloc,
|
||||
visibleColumns,
|
||||
isGrouped = false,
|
||||
rowIndex = 0,
|
||||
isSelected,
|
||||
onToggleSelection,
|
||||
onEdit,
|
||||
onRequestDelete,
|
||||
deleteDisabled,
|
||||
formatPeriod,
|
||||
}: AllocationRowProps) {
|
||||
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={onToggleSelection}
|
||||
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={onEdit} className="app-action-edit">
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRequestDelete}
|
||||
disabled={deleteDisabled}
|
||||
className="app-action-delete disabled:opacity-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
}
|
||||
@@ -16,8 +16,6 @@ import type {
|
||||
} 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";
|
||||
@@ -29,10 +27,8 @@ 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,
|
||||
@@ -45,20 +41,11 @@ 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}</>;
|
||||
}
|
||||
import { AllocationRow } from "./AllocationRow.js";
|
||||
import { AllocationGroupedBody, type AllocGroup } from "./AllocationGroupedBody.js";
|
||||
import { OpenDemandsPanel } from "./OpenDemandsPanel.js";
|
||||
import { AllocationBatchDialogs } from "./AllocationBatchDialogs.js";
|
||||
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
|
||||
|
||||
const ALL_ALLOC_STATUSES = [
|
||||
{ value: "PROPOSED", label: "Proposed" },
|
||||
@@ -171,7 +158,6 @@ export function AllocationsClient() {
|
||||
const [showDateShiftModal, setShowDateShiftModal] = useState(false);
|
||||
|
||||
const selection = useSelection();
|
||||
const utils = trpc.useUtils();
|
||||
const invalidatePlanningViews = useInvalidatePlanningViews();
|
||||
const { canViewCosts } = usePermissions();
|
||||
|
||||
@@ -348,7 +334,6 @@ export function AllocationsClient() {
|
||||
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);
|
||||
|
||||
@@ -356,25 +341,6 @@ export function AllocationsClient() {
|
||||
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) {
|
||||
@@ -394,7 +360,6 @@ export function AllocationsClient() {
|
||||
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) {
|
||||
@@ -410,7 +375,6 @@ export function AllocationsClient() {
|
||||
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);
|
||||
@@ -419,7 +383,6 @@ export function AllocationsClient() {
|
||||
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) {
|
||||
@@ -580,116 +543,6 @@ export function AllocationsClient() {
|
||||
// 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
|
||||
@@ -1003,296 +856,81 @@ export function AllocationsClient() {
|
||||
{!isLoading &&
|
||||
!allocationQueryFailure &&
|
||||
viewMode === "flat" &&
|
||||
sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
|
||||
sorted.map((alloc, index) => (
|
||||
<AllocationRow
|
||||
key={alloc.id}
|
||||
alloc={alloc}
|
||||
visibleColumns={visibleColumns}
|
||||
rowIndex={index}
|
||||
isSelected={selection.selectedIds.has(alloc.id)}
|
||||
onToggleSelection={() => selection.toggle(alloc.id)}
|
||||
onEdit={() => openEdit(alloc)}
|
||||
onRequestDelete={() => setConfirmDelete({ single: alloc })}
|
||||
deleteDisabled={singleDeletePending}
|
||||
formatPeriod={formatPeriod}
|
||||
/>
|
||||
))}
|
||||
|
||||
{!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>
|
||||
);
|
||||
})}
|
||||
{!isLoading && !allocationQueryFailure && viewMode === "grouped" && (
|
||||
<AllocationGroupedBody
|
||||
groups={groups}
|
||||
collapsedGroups={collapsedGroups}
|
||||
expandedSubGroups={expandedSubGroups}
|
||||
visibleColumns={visibleColumns}
|
||||
selectedIds={selection.selectedIds}
|
||||
isAllSelected={selection.isAllSelected}
|
||||
onToggleSelection={selection.toggle}
|
||||
onToggleAllSelection={selection.toggleAll}
|
||||
onToggleGroup={toggleGroup}
|
||||
onToggleSubGroup={toggleSubGroup}
|
||||
onEdit={openEdit}
|
||||
onRequestDelete={(alloc) => setConfirmDelete({ single: alloc })}
|
||||
deleteDisabled={singleDeletePending}
|
||||
formatPeriod={formatPeriod}
|
||||
/>
|
||||
)}
|
||||
</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)}
|
||||
{!isLoading && (
|
||||
<OpenDemandsPanel
|
||||
demands={filteredDemands}
|
||||
onEdit={openEdit}
|
||||
onRequestDelete={(alloc) => setConfirmDelete({ single: alloc })}
|
||||
deleteDisabled={singleDeletePending}
|
||||
formatPeriod={formatPeriod}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 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)}
|
||||
/>
|
||||
)}
|
||||
<AllocationBatchDialogs
|
||||
selectionCount={selection.count}
|
||||
selectedMutationIds={selectedMutationIds}
|
||||
onClearSelection={selection.clear}
|
||||
batchStatusPickerOpen={batchStatusPicker}
|
||||
onOpenBatchStatusPicker={() => setBatchStatusPicker(true)}
|
||||
onCloseBatchStatusPicker={() => setBatchStatusPicker(false)}
|
||||
batchStatusPending={batchStatusMutation.isPending}
|
||||
onBatchStatusConfirm={(ids, status) => {
|
||||
setConfirmBatchStatus({ ids, status });
|
||||
}}
|
||||
confirmDelete={confirmDelete}
|
||||
onSetConfirmDelete={setConfirmDelete}
|
||||
onSingleDelete={handleSingleDelete}
|
||||
onBatchDelete={(ids) => batchDeleteMutation.mutate({ ids })}
|
||||
batchDeletePending={batchDeleteMutation.isPending}
|
||||
showDateShiftModal={showDateShiftModal}
|
||||
onOpenDateShiftModal={() => setShowDateShiftModal(true)}
|
||||
onCloseDateShiftModal={() => setShowDateShiftModal(false)}
|
||||
onDateShiftConfirm={(daysDelta) =>
|
||||
batchDateShiftMutation.mutate({
|
||||
allocationIds: selectedMutationIds,
|
||||
daysDelta,
|
||||
mode: "move",
|
||||
})
|
||||
}
|
||||
dateShiftPending={batchDateShiftMutation.isPending}
|
||||
/>
|
||||
|
||||
{/* Confirm batch status */}
|
||||
{confirmBatchStatus && (
|
||||
@@ -1311,46 +949,6 @@ export function AllocationsClient() {
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* 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
|
||||
|
||||
@@ -0,0 +1,94 @@
|
||||
import type { AllocationWithDetails } from "@capakraken/shared";
|
||||
|
||||
type DemandRow = AllocationWithDetails & {
|
||||
sourceAllocationId?: string;
|
||||
requestedHeadcount?: number;
|
||||
unfilledHeadcount?: number;
|
||||
};
|
||||
|
||||
type OpenDemandsPanelProps = {
|
||||
demands: DemandRow[];
|
||||
onEdit: (demand: AllocationWithDetails) => void;
|
||||
onRequestDelete: (demand: AllocationWithDetails) => void;
|
||||
deleteDisabled: boolean;
|
||||
formatPeriod: (alloc: AllocationWithDetails) => string;
|
||||
};
|
||||
|
||||
export function OpenDemandsPanel({
|
||||
demands,
|
||||
onEdit,
|
||||
onRequestDelete,
|
||||
deleteDisabled,
|
||||
formatPeriod,
|
||||
}: OpenDemandsPanelProps) {
|
||||
if (demands.length === 0) return null;
|
||||
|
||||
return (
|
||||
<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">
|
||||
{demands.length} item{demands.length !== 1 ? "s" : ""}
|
||||
</span>
|
||||
</div>
|
||||
<div className="divide-y divide-amber-100 dark:divide-amber-900/40">
|
||||
{demands.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={() => onEdit(demand as AllocationWithDetails)}
|
||||
className="app-action-edit"
|
||||
>
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onRequestDelete(demand as AllocationWithDetails)}
|
||||
disabled={deleteDisabled}
|
||||
className="app-action-delete disabled:opacity-50"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user