Hartmut/Nexus
1
0
Fork 0
Code Issues 11 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

refactor: complete v2 refactoring plan (Phases 1-5)

Browse Source 
Phase 1 — Quick Wins: centralize formatMoney/formatCents, extract
findUniqueOrThrow helper (19 routers), shared Prisma select constants,
useInvalidatePlanningViews hook, status badge consolidation, composite
DB indexes.

Phase 2 — Timeline Split: extract TimelineContext, TimelineResourcePanel,
TimelineProjectPanel; split 28-dep useMemo into 3 focused memos.
TimelineView.tsx reduced from 1,903 to 538 lines.

Phase 3 — Query Performance: server-side filtering for getEntriesView,
remove availability from timeline resource select, SSE event debouncing
(50ms batch window).

Phase 4 — Estimate Workspace: extract 7 tab components and 3 editor
components. EstimateWorkspaceClient 1,298→306 lines,
EstimateWorkspaceDraftEditor 1,205→581 lines.

Phase 5 — Package Cleanup: split commit-dispo-import-batch (1,112→573
lines), extract shared pagination helper with 11 tests.

All tests pass: 209 API, 254 engine, 67 application.

Co-Authored-By: claude-flow <ruv@ruv.net>
This commit is contained in:
Hartmut Nörenberg
2026-03-14 23:03:42 +01:00
parent 4dabb9d4ce
commit ad0855902b
65 changed files with 7108 additions and 4740 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/allocations/AllocationModal.tsx
+2 -11
View File
@@ -2,6 +2,7 @@
import { useState, useEffect, useRef } from "react";
import { useFocusTrap } from "~/hooks/useFocusTrap.js";
import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
import { AllocationStatus } from "@planarchy/shared";
import type { AllocationWithDetails, RecurrencePattern } from "@planarchy/shared";
import { trpc } from "~/lib/trpc/client.js";
@@ -64,17 +65,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{ staleTime: 60_000 },
);
const utils = trpc.useUtils();
const invalidatePlanningViews = () => {
void utils.allocation.list.invalidate();
void (utils as { allocation: { listView: { invalidate: () => Promise<unknown> } } }).allocation.listView.invalidate();
void utils.allocation.listDemands.invalidate();
void utils.allocation.listAssignments.invalidate();
void utils.timeline.getEntries.invalidate();
void utils.timeline.getEntriesView.invalidate();
void utils.timeline.getProjectContext.invalidate();
void utils.timeline.getBudgetStatus.invalidate();
};
const invalidatePlanningViews = useInvalidatePlanningViews();
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const createDemandMutation = (trpc.allocation.createDemandRequirement.useMutation as any)({
apps/web/src/components/allocations/AllocationsClient.tsx
+35 -45
View File
@@ -20,14 +20,7 @@ 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",
};
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
const ALL_ALLOC_STATUSES = [
{ value: "PROPOSED", label: "Proposed" },
@@ -221,12 +214,11 @@ export function AllocationsClient() {
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 className="app-page space-y-5 pb-24">
<div className="app-page-header gap-4">
<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">
<h1 className="app-page-title">Allocations</h1>
<p className="app-page-subtitle mt-1">
{isLoading
? "Loading…"
: `${filteredAllocations.length} assignment${filteredAllocations.length !== 1 ? "s" : ""}${filteredDemands.length > 0 ? ` · ${filteredDemands.length} open demand${filteredDemands.length !== 1 ? "s" : ""}` : ""}`}
@@ -237,28 +229,27 @@ export function AllocationsClient() {
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"
className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
>
↓ PDF
</a>
<a
href="/api/reports/allocations?format=xlsx"
download
className="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"
className="inline-flex items-center gap-2 rounded-xl border border-gray-300 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition hover:border-gray-400 hover:bg-gray-50 dark:border-gray-600 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800"
>
↓ XLS
</a>
<button
type="button"
onClick={openCreate}
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
className="rounded-xl bg-brand-600 px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:opacity-50"
>
New Planning Entry
</button>
</div>
</div>
{/* Filters */}
<FilterBar>
<ProjectCombobox
value={filterProjectId || null}
@@ -277,7 +268,7 @@ export function AllocationsClient() {
<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"
className="app-select"
>
<option value="">All Statuses</option>
{ALL_ALLOC_STATUSES.map((s) => (
@@ -285,7 +276,7 @@ export function AllocationsClient() {
))}
</select>
<label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
<input
type="checkbox"
checked={hidePastProjects}
@@ -295,7 +286,7 @@ export function AllocationsClient() {
Hide past
</label>
<label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
<input
type="checkbox"
checked={hideCompletedProjects}
@@ -305,7 +296,7 @@ export function AllocationsClient() {
Hide completed
</label>
<label className="flex items-center gap-1.5 text-sm text-gray-600 dark:text-gray-400 cursor-pointer whitespace-nowrap">
<label className="flex cursor-pointer items-center gap-1.5 whitespace-nowrap text-sm text-gray-600 dark:text-gray-300">
<input
type="checkbox"
checked={hideDraftProjects}
@@ -329,10 +320,9 @@ export function AllocationsClient() {
</div>
)}
{/* Table */}
<div className="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
<div className="app-data-table">
<table className="w-full">
<thead className="bg-gray-50 dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700">
<thead className="border-b border-gray-200 dark:border-gray-700">
<tr>
<th className="px-4 py-3 w-10">
<input
@@ -370,16 +360,16 @@ export function AllocationsClient() {
<th className="px-4 py-3" />
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-700">
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
{isLoading && (
<tr>
<td colSpan={9} className="text-center py-12 text-gray-400 dark:text-gray-500 text-sm">Loading allocations…</td>
<td colSpan={9} className="py-12 text-center text-sm text-gray-500 dark:text-gray-400">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>
<td colSpan={9} className="py-12 text-center text-sm text-gray-500 dark:text-gray-400">No assignments found.</td>
</tr>
)}
@@ -387,7 +377,7 @@ export function AllocationsClient() {
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" : ""}`}>
<tr key={alloc.id} className={`transition-colors hover:bg-gray-50/80 dark:hover:bg-gray-900/60 ${isSelected ? "bg-brand-50 dark:bg-brand-900/20" : ""}`}>
<td className="px-4 py-3">
<input
type="checkbox"
@@ -402,16 +392,16 @@ export function AllocationsClient() {
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">
<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-400">{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="px-4 py-3 text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">{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>;
case "cost":
@@ -425,17 +415,17 @@ export function AllocationsClient() {
</td>
);
default:
return <td key={col.key} className="px-4 py-3 text-sm text-gray-500">—</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 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>
<div className="flex items-center justify-end gap-2">
<button type="button" onClick={() => openEdit(alloc)} className="text-xs font-medium text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-300 dark:hover:text-blue-200">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"
className="text-xs font-medium text-red-500 hover:text-red-700 hover:underline disabled:opacity-50 dark:text-red-300 dark:hover:text-red-200"
>
Delete
</button>
@@ -449,8 +439,8 @@ export function AllocationsClient() {
</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 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">
@@ -465,7 +455,7 @@ export function AllocationsClient() {
{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"
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">
@@ -473,11 +463,11 @@ export function AllocationsClient() {
<><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">
<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 items-center gap-4 flex-shrink-0">
<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">
@@ -488,7 +478,7 @@ export function AllocationsClient() {
<button
type="button"
onClick={() => openEdit(demand as AllocationWithDetails)}
className="text-xs text-blue-600 hover:text-blue-800 font-medium hover:underline"
className="text-xs font-medium text-blue-600 hover:text-blue-800 hover:underline dark:text-blue-300 dark:hover:text-blue-200"
>
Edit
</button>
@@ -496,7 +486,7 @@ export function AllocationsClient() {
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"
className="text-xs font-medium text-red-500 hover:text-red-700 hover:underline disabled:opacity-50 dark:text-red-300 dark:hover:text-red-200"
>
Delete
</button>
@@ -511,8 +501,8 @@ 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="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="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
@@ -522,7 +512,7 @@ export function AllocationsClient() {
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"
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}