Hartmut/CapaKraken
1
0
Fork 0
Code Issues 10 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

chore: add pre-commit hooks, tighten ESLint, activate Sentry DSN, publish CI coverage (Phase 1)

Browse Source 
- 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:
Hartmut Nörenberg
2026-04-10 14:49:29 +02:00
parent 605fd7cea1
commit 82acc56b8d
38 changed files with 2901 additions and 1251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/blueprints/BlueprintsClient.tsx
+191 -46
View File
@@ -2,7 +2,7 @@
import { useState, useEffect } from "react";
import type { FormEvent } from "react";
import { BlueprintTarget } from "@capakraken/shared";
import type { BlueprintTarget } from "@capakraken/shared";
import type { BlueprintFieldDefinition } from "@capakraken/shared";
import { trpc } from "~/lib/trpc/client.js";
import { BlueprintFieldCatalog } from "./BlueprintFieldCatalog.js";
@@ -68,27 +68,59 @@ function NewBlueprintModal({ onClose, onCreated }: NewBlueprintModalProps) {
<div className="bg-white rounded-xl shadow-2xl w-full max-w-md mx-4">
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">New Blueprint</h2>
<button type="button" onClick={onClose} className="text-gray-400 hover:text-gray-600 text-2xl leading-none" aria-label="Close">×</button>
<button
type="button"
onClick={onClose}
className="text-gray-400 hover:text-gray-600 text-2xl leading-none"
aria-label="Close"
>
×
</button>
</div>
<form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Name <span className="text-red-500">*</span></label>
<input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="e.g. Resource Extended Fields" className="app-input" autoFocus />
<label className="text-sm font-medium text-gray-700">
Name <span className="text-red-500">*</span>
</label>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
placeholder="e.g. Resource Extended Fields"
className="app-input"
autoFocus
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Description</label>
<textarea value={description} onChange={(e) => setDescription(e.target.value)} placeholder="Optional description" className="app-input resize-none" rows={2} />
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Optional description"
className="app-input resize-none"
rows={2}
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-sm font-medium text-gray-700">Target</label>
<select value={target} onChange={(e) => setTarget(e.target.value as BlueprintTargetValue)} className="app-input">
<select
value={target}
onChange={(e) => setTarget(e.target.value as BlueprintTargetValue)}
className="app-input"
>
<option value="RESOURCE">Resource</option>
<option value="PROJECT">Project</option>
</select>
</div>
{error && <p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">{error}</p>}
{error && (
<p className="text-sm text-red-600 bg-red-50 border border-red-200 rounded-lg px-3 py-2">
{error}
</p>
)}
<div className="flex items-center justify-end gap-3 pt-2">
<button type="button" onClick={onClose} className={BTN_SECONDARY}>Cancel</button>
<button type="button" onClick={onClose} className={BTN_SECONDARY}>
Cancel
</button>
<button type="submit" disabled={createMutation.isPending} className={BTN_PRIMARY}>
{createMutation.isPending ? "Creating…" : "Create Blueprint"}
</button>
@@ -128,14 +160,20 @@ function BlueprintCard({
isSelected,
onToggleSelect,
}: BlueprintCardProps) {
const fieldDefs = Array.isArray(blueprint.fieldDefs) ? (blueprint.fieldDefs as BlueprintFieldDefinition[]) : [];
const rolePresets = Array.isArray(blueprint.rolePresets) ? (blueprint.rolePresets as unknown[]) : [];
const fieldDefs = Array.isArray(blueprint.fieldDefs)
? (blueprint.fieldDefs as BlueprintFieldDefinition[])
: [];
const rolePresets = Array.isArray(blueprint.rolePresets)
? (blueprint.rolePresets as unknown[])
: [];
const fieldCount = fieldDefs.length;
const presetCount = rolePresets.length;
const isProject = blueprint.target === "PROJECT";
return (
<div className={`bg-white rounded-xl border p-5 flex flex-col gap-3 hover:shadow-sm transition-shadow ${isSelected ? "border-brand-400 bg-brand-50" : "border-gray-200"}`}>
<div
className={`bg-white rounded-xl border p-5 flex flex-col gap-3 hover:shadow-sm transition-shadow ${isSelected ? "border-brand-400 bg-brand-50" : "border-gray-200"}`}
>
<div className="flex items-start justify-between gap-3">
<div className="flex items-start gap-3 flex-1 min-w-0">
<input
@@ -151,29 +189,45 @@ function BlueprintCard({
)}
</div>
</div>
<span className={`shrink-0 inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}>
<span
className={`shrink-0 inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700" : "bg-blue-50 text-blue-700"}`}
>
{blueprint.target}
</span>
</div>
<div className="flex flex-wrap gap-3 text-sm text-gray-500">
<span>{fieldCount === 0 ? "No fields" : `${fieldCount} field${fieldCount === 1 ? "" : "s"}`}</span>
<span>
{fieldCount === 0 ? "No fields" : `${fieldCount} field${fieldCount === 1 ? "" : "s"}`}
</span>
{isProject && (
<span className={presetCount > 0 ? "text-brand-600 font-medium" : ""}>
{presetCount === 0 ? "No staffing presets" : `${presetCount} staffing preset${presetCount === 1 ? "" : "s"}`}
{presetCount === 0
? "No staffing presets"
: `${presetCount} staffing preset${presetCount === 1 ? "" : "s"}`}
</span>
)}
{blueprint.isGlobal && (
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">Global</span>
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 font-medium">
Global
</span>
)}
</div>
<div className="flex flex-wrap items-center gap-2 pt-1 border-t border-gray-100">
<button type="button" onClick={onEditFields} className="px-3 py-1.5 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium transition-colors">
<button
type="button"
onClick={onEditFields}
className="px-3 py-1.5 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium transition-colors"
>
Edit Fields
</button>
{isProject && (
<button type="button" onClick={onEditStaffing} className="px-3 py-1.5 border border-brand-300 text-brand-700 rounded-lg hover:bg-brand-50 text-sm font-medium transition-colors">
<button
type="button"
onClick={onEditStaffing}
className="px-3 py-1.5 border border-brand-300 text-brand-700 rounded-lg hover:bg-brand-50 text-sm font-medium transition-colors"
>
Edit Staffing Presets
</button>
)}
@@ -185,7 +239,11 @@ function BlueprintCard({
? "border border-amber-300 text-amber-700 hover:bg-amber-50"
: "border border-gray-200 text-gray-500 hover:bg-gray-50"
}`}
title={blueprint.isGlobal ? "Remove from global columns" : "Make fields available as global columns"}
title={
blueprint.isGlobal
? "Remove from global columns"
: "Make fields available as global columns"
}
>
{blueprint.isGlobal ? "Unglobalize" : "Make Global"}
</button>
@@ -227,11 +285,16 @@ export function BlueprintsClient() {
useEffect(() => {
selection.clear();
// eslint-disable-next-line react-hooks/exhaustive-deps
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [targetFilter]);
const blueprints: BlueprintRow[] = data ?? [];
const { sorted: sortedBlueprints, sortField, sortDir, toggle } = useTableSort<BlueprintRow, BlueprintSortField>(blueprints, {
const {
sorted: sortedBlueprints,
sortField,
sortDir,
toggle,
} = useTableSort<BlueprintRow, BlueprintSortField>(blueprints, {
initialField: (viewPrefs.savedSort?.field as BlueprintSortField | undefined) ?? null,
initialDir: viewPrefs.savedSort?.dir ?? null,
onSortChange: (field, dir) => {
@@ -287,17 +350,16 @@ export function BlueprintsClient() {
<div className="flex items-start justify-between mb-6 gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900">Blueprints</h1>
<p className="text-gray-500 text-sm mt-1">Configure dynamic fields for resources and projects</p>
<p className="text-gray-500 text-sm mt-1">
Configure dynamic fields for resources and projects
</p>
</div>
<button type="button" onClick={() => setShowNewModal(true)} className={BTN_PRIMARY}>
+ New Blueprint
</button>
</div>
<FilterBar
hasActiveFilters={!!targetFilter}
onClearFilters={() => setTargetFilter("")}
>
<FilterBar hasActiveFilters={!!targetFilter} onClearFilters={() => setTargetFilter("")}>
<select
value={targetFilter}
onChange={(e) => setTargetFilter(e.target.value)}
@@ -312,7 +374,10 @@ export function BlueprintsClient() {
{isLoading && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{[1, 2, 3].map((i) => (
<div key={i} className="bg-white rounded-xl border border-gray-200 p-5 shimmer-skeleton h-36" />
<div
key={i}
className="bg-white rounded-xl border border-gray-200 p-5 shimmer-skeleton h-36"
/>
))}
</div>
)}
@@ -325,7 +390,9 @@ export function BlueprintsClient() {
{!isLoading && !isError && blueprints.length === 0 && (
<div className="flex flex-col items-center justify-center py-20 text-center">
<p className="text-gray-400 text-sm mb-4">No blueprints yet. Create one to start defining dynamic fields.</p>
<p className="text-gray-400 text-sm mb-4">
No blueprints yet. Create one to start defining dynamic fields.
</p>
<button type="button" onClick={() => setShowNewModal(true)} className={BTN_PRIMARY}>
+ New Blueprint
</button>
@@ -347,12 +414,52 @@ export function BlueprintsClient() {
aria-label="Select all blueprints"
/>
</th>
<SortableColumnHeader label="Name" field="name" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} tooltip="Blueprint name. Defines a template of dynamic fields for resources or projects." />
<SortableColumnHeader label="Target" field="target" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} tooltip="Whether this blueprint applies to Resource or Project entities." />
<SortableColumnHeader label="Fields" field="fieldCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Number of custom dynamic fields defined in this blueprint." />
<SortableColumnHeader label="Staffing Presets" field="presetCount" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Role presets for project staffing demands. Only applicable to PROJECT blueprints." />
<SortableColumnHeader label="Global" field="global" sortField={sortField} sortDir={sortDir} onSort={handleSortRequest} align="center" tooltip="Global blueprints expose their fields as columns across all entities of the target type." />
<th className="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
<SortableColumnHeader
label="Name"
field="name"
sortField={sortField}
sortDir={sortDir}
onSort={handleSortRequest}
tooltip="Blueprint name. Defines a template of dynamic fields for resources or projects."
/>
<SortableColumnHeader
label="Target"
field="target"
sortField={sortField}
sortDir={sortDir}
onSort={handleSortRequest}
tooltip="Whether this blueprint applies to Resource or Project entities."
/>
<SortableColumnHeader
label="Fields"
field="fieldCount"
sortField={sortField}
sortDir={sortDir}
onSort={handleSortRequest}
align="center"
tooltip="Number of custom dynamic fields defined in this blueprint."
/>
<SortableColumnHeader
label="Staffing Presets"
field="presetCount"
sortField={sortField}
sortDir={sortDir}
onSort={handleSortRequest}
align="center"
tooltip="Role presets for project staffing demands. Only applicable to PROJECT blueprints."
/>
<SortableColumnHeader
label="Global"
field="global"
sortField={sortField}
sortDir={sortDir}
onSort={handleSortRequest}
align="center"
tooltip="Global blueprints expose their fields as columns across all entities of the target type."
/>
<th className="px-3 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
Actions
</th>
</tr>
</thead>
<tbody>
@@ -362,7 +469,10 @@ export function BlueprintsClient() {
const isProject = bp.target === "PROJECT";
return (
<tr key={bp.id} className="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors">
<tr
key={bp.id}
className="border-b border-gray-100 dark:border-gray-700/50 last:border-b-0 hover:bg-gray-50 dark:hover:bg-gray-800/50 transition-colors"
>
<td className="px-3 py-3">
<input
type="checkbox"
@@ -373,17 +483,29 @@ export function BlueprintsClient() {
</td>
<td className="px-3 py-3">
<div className="min-w-0">
<div className="font-medium text-gray-900 dark:text-gray-100">{bp.name}</div>
{bp.description && <div className="text-xs text-gray-500 mt-0.5 truncate">{bp.description}</div>}
<div className="font-medium text-gray-900 dark:text-gray-100">
{bp.name}
</div>
{bp.description && (
<div className="text-xs text-gray-500 mt-0.5 truncate">
{bp.description}
</div>
)}
</div>
</td>
<td className="px-3 py-3">
<span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" : "bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"}`}>
<span
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${isProject ? "bg-purple-50 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300" : "bg-blue-50 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300"}`}
>
{bp.target}
</span>
</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{fieldCount}</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">{isProject ? presetCount : "—"}</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">
{fieldCount}
</td>
<td className="px-3 py-3 text-center text-gray-600 dark:text-gray-400">
{isProject ? presetCount : "—"}
</td>
<td className="px-3 py-3 text-center">
{bp.isGlobal ? (
<span className="inline-block px-2 py-0.5 text-xs rounded-full bg-amber-100 text-amber-700 dark:bg-amber-900/40 dark:text-amber-300 font-medium">
@@ -397,7 +519,10 @@ export function BlueprintsClient() {
<div className="flex items-center justify-end gap-2">
<button
type="button"
onClick={() => { setEditingTab("fields"); setEditingBlueprint(bp); }}
onClick={() => {
setEditingTab("fields");
setEditingBlueprint(bp);
}}
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
>
Edit Fields
@@ -405,7 +530,10 @@ export function BlueprintsClient() {
{isProject && (
<button
type="button"
onClick={() => { setEditingTab("presets"); setEditingBlueprint(bp); }}
onClick={() => {
setEditingTab("presets");
setEditingBlueprint(bp);
}}
className="text-xs text-brand-600 hover:text-brand-800 font-medium"
>
Presets
@@ -445,8 +573,14 @@ export function BlueprintsClient() {
<BlueprintCard
key={bp.id}
blueprint={bp}
onEditFields={() => { setEditingTab("fields"); setEditingBlueprint(bp); }}
onEditStaffing={() => { setEditingTab("presets"); setEditingBlueprint(bp); }}
onEditFields={() => {
setEditingTab("fields");
setEditingBlueprint(bp);
}}
onEditStaffing={() => {
setEditingTab("presets");
setEditingBlueprint(bp);
}}
onToggleGlobal={() => handleToggleGlobal(bp.id, bp.isGlobal)}
onDelete={() => handleDelete(bp.id)}
isSelected={selection.selectedIds.has(bp.id)}
@@ -485,7 +619,10 @@ export function BlueprintsClient() {
)}
{showNewModal && (
<NewBlueprintModal onClose={() => setShowNewModal(false)} onCreated={() => setShowNewModal(false)} />
<NewBlueprintModal
onClose={() => setShowNewModal(false)}
onCreated={() => setShowNewModal(false)}
/>
)}
{editingBlueprint && (
@@ -493,8 +630,16 @@ export function BlueprintsClient() {
blueprintId={editingBlueprint.id}
blueprintName={editingBlueprint.name}
blueprintTarget={editingBlueprint.target}
initialFieldDefs={Array.isArray(editingBlueprint.fieldDefs) ? (editingBlueprint.fieldDefs as BlueprintFieldDefinition[]) : []}
initialRolePresets={Array.isArray(editingBlueprint.rolePresets) ? (editingBlueprint.rolePresets as import("@capakraken/shared").StaffingRequirement[]) : []}
initialFieldDefs={
Array.isArray(editingBlueprint.fieldDefs)
? (editingBlueprint.fieldDefs as BlueprintFieldDefinition[])
: []
}
initialRolePresets={
Array.isArray(editingBlueprint.rolePresets)
? (editingBlueprint.rolePresets as import("@capakraken/shared").StaffingRequirement[])
: []
}
initialTab={editingTab}
onClose={() => setEditingBlueprint(null)}
/>