607 lines
27 KiB
TypeScript
607 lines
27 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect, useMemo } from "react";
|
||
import { formatDate } from "~/lib/format.js";
|
||
import { trpc } from "~/lib/trpc/client.js";
|
||
import { AllocationModal } from "./AllocationModal.js";
|
||
import type { AllocationLike, AllocationReadModel, AllocationWithDetails, ColumnDef } from "@planarchy/shared";
|
||
import { AllocationStatus, ALLOCATION_COLUMNS } from "@planarchy/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";
|
||
|
||
const STATUS_BADGE: Record<string, string> = {
|
||
ACTIVE: "bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400",
|
||
PROPOSED: "bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400",
|
||
CONFIRMED: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
|
||
COMPLETED: "bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400",
|
||
CANCELLED: "bg-red-100 text-red-600 dark:bg-red-900/30 dark:text-red-400",
|
||
};
|
||
|
||
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;
|
||
};
|
||
|
||
export function AllocationsClient() {
|
||
const [modalOpen, setModalOpen] = useState(false);
|
||
const [editingAllocation, setEditingAllocation] = useState<AllocationWithDetails | null>(null);
|
||
const [filterProjectId, setFilterProjectId] = useState<string>("");
|
||
const [filterResourceId, setFilterResourceId] = useState<string>("");
|
||
const [filterStatus, setFilterStatus] = useState<string>("");
|
||
const [hidePastProjects, setHidePastProjects] = useState(true);
|
||
const [hideCompletedProjects, setHideCompletedProjects] = useState(true);
|
||
const [hideDraftProjects, setHideDraftProjects] = useState(false);
|
||
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 selection = useSelection();
|
||
const utils = trpc.useUtils();
|
||
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 { data: allocationView, isLoading } = 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 };
|
||
|
||
const deleteDemandMutation = trpc.allocation.deleteDemandRequirement.useMutation({
|
||
onSuccess: async () => {
|
||
await utils.allocation.list.invalidate();
|
||
await utils.allocation.listView.invalidate();
|
||
},
|
||
});
|
||
|
||
const deleteAssignmentMutation = trpc.allocation.deleteAssignment.useMutation({
|
||
onSuccess: async () => {
|
||
await utils.allocation.list.invalidate();
|
||
await utils.allocation.listView.invalidate();
|
||
},
|
||
});
|
||
|
||
const batchDeleteMutation = trpc.allocation.batchDelete.useMutation({
|
||
onSuccess: async () => {
|
||
await utils.allocation.list.invalidate();
|
||
await utils.allocation.listView.invalidate();
|
||
selection.clear();
|
||
},
|
||
});
|
||
|
||
const batchStatusMutation = trpc.allocation.batchUpdateStatus.useMutation({
|
||
onSuccess: async () => {
|
||
await utils.allocation.list.invalidate();
|
||
await utils.allocation.listView.invalidate();
|
||
selection.clear();
|
||
},
|
||
});
|
||
|
||
useEffect(() => {
|
||
selection.clear();
|
||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
}, [filterProjectId, filterResourceId, filterStatus, hidePastProjects, hideCompletedProjects, hideDraftProjects]);
|
||
|
||
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],
|
||
);
|
||
|
||
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() {
|
||
setFilterProjectId("");
|
||
setFilterResourceId("");
|
||
setFilterStatus("");
|
||
setHidePastProjects(false);
|
||
setHideCompletedProjects(false);
|
||
setHideDraftProjects(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) }] : []),
|
||
];
|
||
|
||
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;
|
||
|
||
return (
|
||
<div className="p-6 pb-24">
|
||
{/* Page header */}
|
||
<div className="mb-6 flex items-center justify-between">
|
||
<div>
|
||
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Allocations</h1>
|
||
<p className="text-gray-500 dark:text-gray-400 text-sm mt-1">
|
||
{isLoading
|
||
? "Loading…"
|
||
: `${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="px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors flex items-center gap-2"
|
||
>
|
||
↓ PDF
|
||
</a>
|
||
<a
|
||
href="/api/reports/allocations?format=xlsx"
|
||
download
|
||
className="px-3 py-1.5 text-sm rounded-lg border border-gray-200 dark:border-gray-700 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors flex items-center gap-2"
|
||
>
|
||
↓ XLS
|
||
</a>
|
||
<button
|
||
type="button"
|
||
onClick={openCreate}
|
||
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
|
||
>
|
||
New Planning Entry
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Filters */}
|
||
<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="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 bg-white dark:bg-gray-900 dark:text-gray-100"
|
||
>
|
||
<option value="">All Statuses</option>
|
||
{ALL_ALLOC_STATUSES.map((s) => (
|
||
<option key={s.value} value={s.value}>{s.label}</option>
|
||
))}
|
||
</select>
|
||
|
||
<label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
|
||
<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 items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
|
||
<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 items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
|
||
<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}
|
||
/>
|
||
</FilterBar>
|
||
|
||
{/* Filter chips */}
|
||
{chips.length > 0 && (
|
||
<div className="mb-3">
|
||
<FilterChips chips={chips} onClearAll={clearAll} />
|
||
</div>
|
||
)}
|
||
|
||
{/* Table */}
|
||
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
|
||
<table className="w-full">
|
||
<thead className="bg-gray-50 dark:bg-gray-900 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 }> = {
|
||
role: { tip: "The role this allocation was created for. May differ from the resource's primary role." },
|
||
hoursPerDay: { tip: "Planned working hours per calendar day for this allocation." },
|
||
cost: { tip: "Resource LCR × hours per day. Reflects the cost of one day of work for this allocation." },
|
||
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-700">
|
||
{isLoading && (
|
||
<tr>
|
||
<td colSpan={9} className="text-center py-12 text-gray-400 dark:text-gray-500 text-sm">Loading allocations…</td>
|
||
</tr>
|
||
)}
|
||
|
||
{!isLoading && sorted.length === 0 && (
|
||
<tr>
|
||
<td colSpan={9} className="text-center py-12 text-gray-500 dark:text-gray-400 text-sm">No assignments found.</td>
|
||
</tr>
|
||
)}
|
||
|
||
{!isLoading &&
|
||
sorted.map((alloc) => {
|
||
const isSelected = selection.selectedIds.has(alloc.id);
|
||
return (
|
||
<tr key={alloc.id} className={`hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}>
|
||
<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">{alloc.resource?.displayName ?? "—"}</td>;
|
||
case "project":
|
||
return (
|
||
<td key={col.key} className="px-4 py-3 text-sm text-gray-600 dark:text-gray-400">
|
||
{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-400">{alloc.role}</td>;
|
||
case "dates":
|
||
return <td key={col.key} className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{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">—</td>;
|
||
}
|
||
})}
|
||
<td className="px-4 py-3">
|
||
<div className="flex items-center gap-2 justify-end">
|
||
<button type="button" onClick={() => openEdit(alloc)} className="text-xs text-blue-600 hover:text-blue-800 font-medium hover:underline">Edit</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setConfirmDelete({ single: alloc })}
|
||
disabled={singleDeletePending}
|
||
className="text-xs text-red-500 hover:text-red-700 font-medium hover:underline disabled:opacity-50"
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
);
|
||
})}
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{!isLoading && filteredDemands.length > 0 && (
|
||
<div className="mt-6 bg-white dark:bg-gray-800 rounded-xl border border-amber-200 dark:border-amber-800/60 overflow-hidden">
|
||
<div className="px-4 py-3 border-b border-amber-200 dark:border-amber-800/60 bg-amber-50/70 dark:bg-amber-950/20 flex items-center justify-between">
|
||
<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="px-4 py-3 flex items-center justify-between gap-4 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="text-xs text-gray-500 dark:text-gray-400 mt-1">
|
||
{(demand.role ?? "Placeholder role")} · {formatPeriod(demand)} · {demand.hoursPerDay}h/day
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-4 flex-shrink-0">
|
||
<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="text-xs text-blue-600 hover:text-blue-800 font-medium hover:underline"
|
||
>
|
||
Edit
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setConfirmDelete({ single: demand as AllocationWithDetails })}
|
||
disabled={singleDeletePending}
|
||
className="text-xs text-red-500 hover:text-red-700 font-medium hover:underline 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="bg-white dark:bg-gray-800 rounded-xl shadow-2xl p-5 min-w-[220px]" onClick={(e) => e.stopPropagation()}>
|
||
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100 mb-3">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 text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
||
>
|
||
<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: `Delete (${selection.count})`,
|
||
variant: "danger",
|
||
onClick: () => setConfirmDelete({ ids: selectedMutationIds }),
|
||
disabled: batchDeleteMutation.isPending,
|
||
},
|
||
]}
|
||
/>
|
||
|
||
{/* Modal */}
|
||
{modalOpen && (
|
||
<AllocationModal allocation={editingAllocation} onClose={closeModal} onSuccess={closeModal} />
|
||
)}
|
||
</div>
|
||
);
|
||
}
|