chore: add pre-commit hooks, tighten ESLint, activate Sentry DSN, publish CI coverage (Phase 1)
- Install husky v9 + lint-staged: pre-commit runs eslint --fix and prettier on staged files - Tighten ESLint base config: no-console→error, ban-ts-comment (ts-ignore banned, ts-expect-error with description allowed), reportUnusedDisableDirectives→error - Migrate web app from deprecated `next lint` to `eslint src/` with flat config and react-hooks plugin - Convert all 5 @ts-ignore to @ts-expect-error with descriptions, remove stale disable comments - Add NEXT_PUBLIC_SENTRY_DSN to docker-compose.prod.yml and .env.example - Add coverage artifact upload step to CI test job - Pre-existing violations (102 warnings) downgraded to warn in web config for Phase 2 cleanup Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -6,8 +6,14 @@ import { useLocalStorage } from "~/hooks/useLocalStorage.js";
|
||||
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 "@capakraken/shared";
|
||||
import { AllocationStatus, ALLOCATION_COLUMNS } from "@capakraken/shared";
|
||||
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";
|
||||
@@ -34,7 +40,10 @@ import {
|
||||
toggleCollapsedAllocationGroup,
|
||||
type CollapsedAllocationGroups,
|
||||
} from "./allocationGroupState.js";
|
||||
import { getAllocationEmptyState, shouldAutoRelaxAllocationFilters } from "./allocationVisibilityState.js";
|
||||
import {
|
||||
getAllocationEmptyState,
|
||||
shouldAutoRelaxAllocationFilters,
|
||||
} from "./allocationVisibilityState.js";
|
||||
|
||||
/** Left-border color by allocation status for instant visual scanning */
|
||||
const STATUS_LEFT_BORDER: Record<string, string> = {
|
||||
@@ -124,15 +133,39 @@ export function AllocationsClient() {
|
||||
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 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 [confirmBatchStatus, setConfirmBatchStatus] = useState<{
|
||||
ids: string[];
|
||||
status: string;
|
||||
} | null>(null);
|
||||
const [showStatusToast, setShowStatusToast] = useState(false);
|
||||
const [showDateShiftModal, setShowDateShiftModal] = useState(false);
|
||||
|
||||
@@ -145,8 +178,14 @@ export function AllocationsClient() {
|
||||
() => (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 { 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(
|
||||
{
|
||||
@@ -207,17 +246,28 @@ export function AllocationsClient() {
|
||||
|
||||
useEffect(() => {
|
||||
selection.clear();
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filterProjectId, filterResourceId, filterStatus, hidePastProjects, hideCompletedProjects, hideDraftProjects]);
|
||||
// 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.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.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,
|
||||
@@ -248,16 +298,28 @@ export function AllocationsClient() {
|
||||
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 (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 (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;
|
||||
});
|
||||
@@ -273,9 +335,7 @@ export function AllocationsClient() {
|
||||
const allocationIds = sorted.map((a) => a.id);
|
||||
const allocationMutationIdsByDisplayId = useMemo(
|
||||
() =>
|
||||
new Map(
|
||||
sorted.map((allocation) => [allocation.id, getPlanningEntryMutationId(allocation)]),
|
||||
),
|
||||
new Map(sorted.map((allocation) => [allocation.id, getPlanningEntryMutationId(allocation)])),
|
||||
[sorted],
|
||||
);
|
||||
const selectedMutationIds = useMemo(
|
||||
@@ -288,16 +348,19 @@ export function AllocationsClient() {
|
||||
);
|
||||
|
||||
// ─── View mode: grouped (default) vs flat ──────────────────────────────────
|
||||
const [viewMode, setViewMode] = useLocalStorage<"grouped" | "flat">("capakraken:allocations:viewMode", "grouped");
|
||||
const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(
|
||||
() => createInitialCollapsedAllocationGroups(),
|
||||
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((prev) => (prev === "grouped" ? "flat" : "grouped"));
|
||||
}, [setViewMode]);
|
||||
|
||||
type ProjectSubGroup = {
|
||||
@@ -344,7 +407,10 @@ export function AllocationsClient() {
|
||||
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); }
|
||||
if (!list) {
|
||||
list = [];
|
||||
projMap.set(pid, list);
|
||||
}
|
||||
list.push(alloc);
|
||||
}
|
||||
group.projectSubGroups = [...projMap.entries()].map(([pid, allocs]) => {
|
||||
@@ -364,7 +430,10 @@ export function AllocationsClient() {
|
||||
let typicalH = first.hoursPerDay;
|
||||
let maxCount = 0;
|
||||
for (const [h, count] of hpdCounts) {
|
||||
if (count > maxCount) { typicalH = h; maxCount = count; }
|
||||
if (count > maxCount) {
|
||||
typicalH = h;
|
||||
maxCount = count;
|
||||
}
|
||||
}
|
||||
return {
|
||||
projectId: pid,
|
||||
@@ -390,9 +459,12 @@ export function AllocationsClient() {
|
||||
|
||||
const groupIds = useMemo(() => groups.map((g) => g.resourceId), [groups]);
|
||||
|
||||
const toggleGroup = useCallback((resourceId: string) => {
|
||||
setCollapsedGroups((prev) => toggleCollapsedAllocationGroup(prev, groupIds, resourceId));
|
||||
}, [groupIds]);
|
||||
const toggleGroup = useCallback(
|
||||
(resourceId: string) => {
|
||||
setCollapsedGroups((prev) => toggleCollapsedAllocationGroup(prev, groupIds, resourceId));
|
||||
},
|
||||
[groupIds],
|
||||
);
|
||||
|
||||
const collapseAll = useCallback(() => {
|
||||
setCollapsedGroups(collapseAllAllocationGroups());
|
||||
@@ -423,16 +495,35 @@ export function AllocationsClient() {
|
||||
}
|
||||
|
||||
function clearAll() {
|
||||
setAllocFilters({ projectId: "", resourceId: "", status: "", hidePast: "false", hideCompleted: "false", hideDraft: "false" });
|
||||
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) }] : []),
|
||||
...(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({
|
||||
@@ -518,41 +609,80 @@ export function AllocationsClient() {
|
||||
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
|
||||
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}</>
|
||||
) : "—"}
|
||||
<>
|
||||
<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>;
|
||||
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>;
|
||||
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>;
|
||||
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>;
|
||||
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"}`}>
|
||||
<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>;
|
||||
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={() => openEdit(alloc)} className="app-action-edit">
|
||||
Edit
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfirmDelete({ single: alloc })}
|
||||
@@ -569,7 +699,11 @@ export function AllocationsClient() {
|
||||
|
||||
return (
|
||||
<div className="app-page space-y-5 pb-24">
|
||||
<SuccessToast show={showStatusToast} message="Allocation status updated" onDone={() => setShowStatusToast(false)} />
|
||||
<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>
|
||||
@@ -578,7 +712,7 @@ export function AllocationsClient() {
|
||||
? "Loading…"
|
||||
: allocationQueryFailure
|
||||
? allocationQueryFailure.title
|
||||
: `${filteredAllocations.length} assignment${filteredAllocations.length !== 1 ? "s" : ""}${filteredDemands.length > 0 ? ` · ${filteredDemands.length} open demand${filteredDemands.length !== 1 ? "s" : ""}` : ""}`}
|
||||
: `${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">
|
||||
@@ -629,7 +763,9 @@ export function AllocationsClient() {
|
||||
>
|
||||
<option value="">All Statuses</option>
|
||||
{ALL_ALLOC_STATUSES.map((s) => (
|
||||
<option key={s.value} value={s.value}>{s.label}</option>
|
||||
<option key={s.value} value={s.value}>
|
||||
{s.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
@@ -678,7 +814,12 @@ export function AllocationsClient() {
|
||||
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" />
|
||||
<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
|
||||
@@ -688,7 +829,12 @@ export function AllocationsClient() {
|
||||
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" />
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M4 6h16M4 10h16M4 14h16M4 18h16"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
@@ -701,7 +847,12 @@ export function AllocationsClient() {
|
||||
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" />
|
||||
<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>
|
||||
@@ -709,11 +860,19 @@ export function AllocationsClient() {
|
||||
|
||||
{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">
|
||||
<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">
|
||||
<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>
|
||||
@@ -744,16 +903,34 @@ export function AllocationsClient() {
|
||||
</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." },
|
||||
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" },
|
||||
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" };
|
||||
const fieldMap: Record<string, string> = {
|
||||
dates: "startDate",
|
||||
hoursPerDay: "hoursPerDay",
|
||||
cost: "dailyCostCents",
|
||||
};
|
||||
return (
|
||||
<SortableColumnHeader
|
||||
key={col.key}
|
||||
@@ -773,15 +950,28 @@ export function AllocationsClient() {
|
||||
<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>
|
||||
<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>
|
||||
<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
|
||||
@@ -817,15 +1007,21 @@ export function AllocationsClient() {
|
||||
</tr>
|
||||
)}
|
||||
|
||||
{!isLoading && !allocationQueryFailure && viewMode === "flat" &&
|
||||
{!isLoading &&
|
||||
!allocationQueryFailure &&
|
||||
viewMode === "flat" &&
|
||||
sorted.map((alloc, index) => renderAllocRow(alloc, false, index))}
|
||||
|
||||
{!isLoading && !allocationQueryFailure && viewMode === "grouped" &&
|
||||
{!isLoading &&
|
||||
!allocationQueryFailure &&
|
||||
viewMode === "grouped" &&
|
||||
groups.map((group) => {
|
||||
const isCollapsed = collapsedGroups === "all" || collapsedGroups.has(group.resourceId);
|
||||
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));
|
||||
const groupIndeterminate =
|
||||
!allGroupSelected && groupAllocIds.some((id) => selection.selectedIds.has(id));
|
||||
return (
|
||||
<GroupRows key={group.resourceId}>
|
||||
{/* Group header */}
|
||||
@@ -833,7 +1029,12 @@ export function AllocationsClient() {
|
||||
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); } }}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
toggleGroup(group.resourceId);
|
||||
}
|
||||
}}
|
||||
tabIndex={0}
|
||||
role="button"
|
||||
aria-expanded={!isCollapsed}
|
||||
@@ -842,7 +1043,9 @@ export function AllocationsClient() {
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={allGroupSelected}
|
||||
ref={(el) => { if (el) el.indeterminate = groupIndeterminate; }}
|
||||
ref={(el) => {
|
||||
if (el) el.indeterminate = groupIndeterminate;
|
||||
}}
|
||||
onChange={() => selection.toggleAll(groupAllocIds)}
|
||||
className="rounded border-gray-300 dark:border-gray-600"
|
||||
/>
|
||||
@@ -872,64 +1075,88 @@ export function AllocationsClient() {
|
||||
</td>
|
||||
</tr>
|
||||
{/* Project sub-groups within person */}
|
||||
{!isCollapsed && group.projectSubGroups.map((subGroup) => {
|
||||
const subKey = `${group.resourceId}::${subGroup.projectId}`;
|
||||
const isSubExpanded = expandedSubGroups.has(subKey);
|
||||
{!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>;
|
||||
}
|
||||
// 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));
|
||||
// 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))
|
||||
}
|
||||
}}
|
||||
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>
|
||||
);
|
||||
})}
|
||||
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>
|
||||
);
|
||||
})}
|
||||
@@ -941,7 +1168,9 @@ export function AllocationsClient() {
|
||||
<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>
|
||||
<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>
|
||||
@@ -959,18 +1188,27 @@ export function AllocationsClient() {
|
||||
<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"}
|
||||
<>
|
||||
<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
|
||||
{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-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}
|
||||
{demand.unfilledHeadcount ?? demand.headcount} /{" "}
|
||||
{demand.requestedHeadcount ?? demand.headcount}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
@@ -999,9 +1237,17 @@ export function AllocationsClient() {
|
||||
|
||||
{/* 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="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
|
||||
@@ -1013,7 +1259,9 @@ export function AllocationsClient() {
|
||||
}}
|
||||
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]}`}>
|
||||
<span
|
||||
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${STATUS_BADGE[s.value]}`}
|
||||
>
|
||||
{s.label}
|
||||
</span>
|
||||
</button>
|
||||
@@ -1060,7 +1308,10 @@ export function AllocationsClient() {
|
||||
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 });
|
||||
batchStatusMutation.mutate({
|
||||
ids: confirmBatchStatus.ids,
|
||||
status: confirmBatchStatus.status as never,
|
||||
});
|
||||
setConfirmBatchStatus(null);
|
||||
}}
|
||||
onCancel={() => setConfirmBatchStatus(null)}
|
||||
@@ -1097,7 +1348,11 @@ export function AllocationsClient() {
|
||||
count={selection.count}
|
||||
isPending={batchDateShiftMutation.isPending}
|
||||
onConfirm={(daysDelta) =>
|
||||
batchDateShiftMutation.mutate({ allocationIds: selectedMutationIds, daysDelta, mode: "move" })
|
||||
batchDateShiftMutation.mutate({
|
||||
allocationIds: selectedMutationIds,
|
||||
daysDelta,
|
||||
mode: "move",
|
||||
})
|
||||
}
|
||||
onClose={() => setShowDateShiftModal(false)}
|
||||
/>
|
||||
@@ -1105,7 +1360,11 @@ export function AllocationsClient() {
|
||||
|
||||
{/* Modal */}
|
||||
{modalOpen && (
|
||||
<AllocationModal allocation={editingAllocation} onClose={closeModal} onSuccess={closeModal} />
|
||||
<AllocationModal
|
||||
allocation={editingAllocation}
|
||||
onClose={closeModal}
|
||||
onSuccess={closeModal}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user