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

rename(phase 1): CapaKraken → Nexus across code, UI, docs, CI
CI / Unit Tests (pull_request) Successful in 5m46s
Details
CI / Lint (pull_request) Failing after 3m49s
Details
CI / E2E Tests (pull_request) Has been skipped
Details
CI / Fresh-Linux Docker Deploy (pull_request) Has been skipped
Details
CI / Assistant Split Regression (pull_request) Failing after 35s
Details
CI / Architecture Guardrails (pull_request) Failing after 2m14s
Details
CI / Typecheck (pull_request) Successful in 4m22s
Details
CI / Build (pull_request) Has been skipped
Details
CI / Release Images (pull_request) Has been skipped
Details

Browse Source 
- @capakraken/* → @nexus/* across 12 packages (root + 11 workspaces),
  1551 import lines migrated via codemod
- User-visible brand strings renamed (emails, page titles, PWA
  manifest, mobile header, MFA backup-codes header, tooltips, signin
  page, invite page, weekly digest, install prompt)
- TOTP issuer "CapaKraken" → "Nexus" (existing secrets still valid;
  re-enrollment relabels them in users' authenticator apps)
- Function rename: assertCapaKrakenDbTarget → assertNexusDbTarget
- LocalStorage migration shim in apps/web/src/app/layout.tsx copies
  capakraken_* → nexus_* on first load (guarded by nexus_migrated_v1
  sentinel; runs once per browser, then never again)
- Service-worker cache name capakraken-v2 → nexus-v2 with one-time
  caches.delete('capakraken-v2') from the same shim
- Email-domain fixtures @capakraken.{dev,app} → @nexus.{dev,app} in
  seed data, e2e specs, SMTP default fallback
- Dockerfile.dev / Dockerfile.prod / all .github/workflows/*.yml
  pnpm --filter @capakraken/* → @nexus/*
- README, CLAUDE.md, LEARNINGS.md, all docs/*.md, .env.example,
  tooling/deploy/.env.production.example brand sweep

Phase 1 deliberately leaves untouched (handled in Phase 3 cutover):
- PostgreSQL DB name "capakraken" and POSTGRES_USER "capakraken"
- Volume names capakraken_pgdata etc.
- Compose project name "capakraken" / "capakraken-prod"
- db-target-guard default expectedDatabase
- env-var CAPAKRAKEN_EXPECTED_DB_NAME
- Container DNS names in docker-compose.ci.yml

Quality gates green: pnpm typecheck (7/7), pnpm test:unit (7/7),
pnpm lint (0 errors), check:exports/imports/architecture all pass.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Hartmut Nörenberg
2026-05-21 15:10:44 +02:00
parent d9a7ec0338
commit 4a5edeef3e
941 changed files with 24475 additions and 16760 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/e2e/a11y.spec.ts
+1 -1
View File
@@ -3,7 +3,7 @@ import { test, expect } from "./a11y-fixture.js";
test.describe("Accessibility (axe-core)", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/, { timeout: 15_000 });
apps/web/e2e/admin.spec.ts
+17 -14
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Admin Pages", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -12,39 +12,42 @@ test.describe("Admin Pages", () => {
test("settings page loads", async ({ page }) => {
await page.goto("/admin/settings");
await page.waitForLoadState("networkidle");
await expect(page.locator("h1", { hasText: /System Settings/i })).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: /System Settings/i })).toBeVisible({
timeout: 10000,
});
});
test("users page loads with user list", async ({ page }) => {
await page.goto("/admin/users");
await page.waitForLoadState("networkidle");
await expect(page.locator("h1", { hasText: /User Management/i })).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: /User Management/i })).toBeVisible({
timeout: 10000,
});
// Should show a table with at least the admin user
await expect(page.locator("table")).toBeVisible({ timeout: 10000 });
await expect(page.locator("text=admin@capakraken.dev")).toBeVisible({ timeout: 10000 });
await expect(page.locator("text=admin@nexus.dev")).toBeVisible({ timeout: 10000 });
});
test("roles page loads", async ({ page }) => {
await page.goto("/roles");
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1").filter({ hasText: /Roles/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1").filter({ hasText: /Roles/i })).toBeVisible({ timeout: 10000 });
// Should show table or list of roles
await expect(
page.locator("table").or(page.locator("text=No roles")),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("table").or(page.locator("text=No roles"))).toBeVisible({
timeout: 10000,
});
});
test("blueprints page loads", async ({ page }) => {
await page.goto("/admin/blueprints");
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1").filter({ hasText: /Blueprints/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1").filter({ hasText: /Blueprints/i })).toBeVisible({
timeout: 10000,
});
// Should show blueprint cards or list from seed data
await expect(
page.locator("table")
page
.locator("table")
.or(page.locator("text=3D Content Production"))
.or(page.locator("text=No blueprints")),
).toBeVisible({ timeout: 10000 });
apps/web/e2e/allocations.spec.ts
+22 -16
View File
@@ -40,24 +40,28 @@ async function signIn(page: Page, email: string, password: string) {
test.describe("Allocations", () => {
test.beforeEach(async ({ page }) => {
await freezeBrowserTime(page);
await signIn(page, "admin@capakraken.dev", "admin123");
await signIn(page, "admin@nexus.dev", "admin123");
await page.goto("/allocations");
});
test("seeded assignments stay visibly rendered on first load", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1").filter({ hasText: /Allocations|Planning/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1").filter({ hasText: /Allocations|Planning/i })).toBeVisible({
timeout: 10000,
});
await expect(page.getByTestId("allocations-table")).toBeVisible({ timeout: 10000 });
await expect(page.getByTestId("allocations-empty-state")).toHaveCount(0);
await expect(page.getByTestId("allocation-group-header").first()).toBeVisible({ timeout: 10000 });
await expect(page.getByTestId("allocation-group-header").first()).toBeVisible({
timeout: 10000,
});
await expect(page.getByTestId("allocation-row").first()).toBeVisible({ timeout: 10000 });
expect(await page.getByTestId("allocation-row").count()).toBeGreaterThan(0);
});
test("explicitly restrictive filters show a visible empty state and can be reset", async ({ page }) => {
test("explicitly restrictive filters show a visible empty state and can be reset", async ({
page,
}) => {
await page.waitForLoadState("networkidle");
const projectFilter = page.getByPlaceholder("Filter by project…");
@@ -83,21 +87,23 @@ test.describe("Allocations", () => {
await expect(newBtn).toBeVisible({ timeout: 10000 });
await newBtn.click();
await expect(page.getByTestId("allocation-modal")).toBeVisible({ timeout: 5000 });
await expect(page.getByRole("heading", { name: /New (Assignment|Open Demand)/i })).toBeVisible();
await expect(
page.getByRole("heading", { name: /New (Assignment|Open Demand)/i }),
).toBeVisible();
await page.keyboard.press("Escape");
});
test("filter by status works", async ({ page }) => {
await page.waitForLoadState("networkidle");
// Look for status filter chips or dropdown
const statusFilter = page.locator("button", { hasText: /Proposed|Confirmed|Active|Status/i }).first();
const statusFilter = page
.locator("button", { hasText: /Proposed|Confirmed|Active|Status/i })
.first();
if ((await statusFilter.count()) > 0) {
await statusFilter.click();
await page.waitForTimeout(300);
// After clicking a status filter, the page should still show the table
await expect(
page.locator("table").or(page.locator("text=No allocations")),
).toBeVisible();
await expect(page.locator("table").or(page.locator("text=No allocations"))).toBeVisible();
}
});
@@ -108,17 +114,17 @@ test.describe("Allocations", () => {
await colToggle.click();
await page.waitForTimeout(300);
// A panel or dropdown with column checkboxes should appear
await expect(
page.locator("input[type='checkbox']").first(),
).toBeVisible({ timeout: 3000 });
await expect(page.locator("input[type='checkbox']").first()).toBeVisible({ timeout: 3000 });
await page.keyboard.press("Escape");
}
});
test("viewer sees a visible access error instead of an empty allocations page", async ({ browser }) => {
test("viewer sees a visible access error instead of an empty allocations page", async ({
browser,
}) => {
const page = await browser.newPage();
await freezeBrowserTime(page);
await signIn(page, "viewer@capakraken.dev", "viewer123");
await signIn(page, "viewer@nexus.dev", "viewer123");
await page.goto("/allocations");
await page.waitForLoadState("networkidle");
apps/web/e2e/analytics.spec.ts
+4 -4
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signIn(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -71,8 +71,8 @@ test.describe("Analytics / Insights", () => {
test("insights page loads without errors", async ({ page }) => {
await page.waitForLoadState("networkidle");
// Page should render some heading or content area — not a hard 404
await expect(
page.locator("h1").or(page.locator("main")).first(),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1").or(page.locator("main")).first()).toBeVisible({
timeout: 10000,
});
});
});
apps/web/e2e/assistant-approvals.spec.ts
+15 -5
View File
@@ -3,7 +3,7 @@ import { execFileSync } from "node:child_process";
import { existsSync, readFileSync } from "node:fs";
import { resolve } from "node:path";
const ADMIN_EMAIL = "admin@capakraken.dev";
const ADMIN_EMAIL = "admin@nexus.dev";
const ADMIN_PASSWORD = "admin123";
const CURRENT_CONVERSATION_ID = "assistant-e2e-current";
const DB_WORKDIR = resolve(process.cwd(), "../../packages/db");
@@ -159,7 +159,9 @@ test.describe("Assistant approvals", () => {
`);
});
test("renders the pending approval inbox and handles cross-conversation actions", async ({ page }) => {
test("renders the pending approval inbox and handles cross-conversation actions", async ({
page,
}) => {
const suffix = Date.now();
const currentClientName = `E2E Approval Client Current ${suffix}`;
const otherClientName = `E2E Approval Client Other ${suffix}`;
@@ -210,14 +212,22 @@ test.describe("Assistant approvals", () => {
await expect(page.getByText(currentApproval.summary)).toBeVisible();
await expect(page.getByText(otherApproval.summary)).toBeVisible();
const currentCard = page.locator('[data-testid="assistant-approval-card"][data-conversation-scope="current"]').first();
const otherCard = page.locator('[data-testid="assistant-approval-card"][data-conversation-scope="other"]').first();
const currentCard = page
.locator('[data-testid="assistant-approval-card"][data-conversation-scope="current"]')
.first();
const otherCard = page
.locator('[data-testid="assistant-approval-card"][data-conversation-scope="other"]')
.first();
await expect(currentCard).toContainText("This chat");
await expect(otherCard).toContainText("Other chat");
await otherCard.getByTestId("assistant-approval-cancel").click();
await expect(page.getByText(`Aktion verworfen: ${otherApproval.summary}`)).toBeVisible();
await expect(page.locator(`[data-testid="assistant-approval-card"][data-approval-id="${otherApproval.id}"]`)).toHaveCount(0);
await expect(
page.locator(
`[data-testid="assistant-approval-card"][data-approval-id="${otherApproval.id}"]`,
),
).toHaveCount(0);
await expect
.poll(async () => {
apps/web/e2e/auth.spec.ts
+1 -1
View File
@@ -8,7 +8,7 @@ test.describe("Authentication", () => {
test("admin can sign in", async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
apps/web/e2e/bench.spec.ts
+4 -5
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signIn(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -16,9 +16,7 @@ test.describe("Bench Board", () => {
test("bench board page loads with heading", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1", { hasText: "Bench Board" }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: "Bench Board" })).toBeVisible({ timeout: 10000 });
});
test("date range filter inputs are visible", async ({ page }) => {
@@ -32,7 +30,8 @@ test.describe("Bench Board", () => {
test("shows bench results or no-resources empty state", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("table")
page
.locator("table")
.or(page.locator("text=No resources on bench"))
.or(page.locator("text=No results"))
.first(),
apps/web/e2e/dashboard.spec.ts
+4 -2
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Dashboard", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -31,7 +31,9 @@ test.describe("Dashboard", () => {
const addBtn = page.locator("button", { hasText: /Add Widget/i });
if ((await addBtn.count()) > 0) {
await addBtn.click();
await expect(page.locator("text=Add Widget").or(page.locator("text=Available Widgets"))).toBeVisible();
await expect(
page.locator("text=Add Widget").or(page.locator("text=Available Widgets")),
).toBeVisible();
await page.keyboard.press("Escape");
}
});
apps/web/e2e/dev-system/mfa.spec.ts
+29 -13
View File
@@ -21,9 +21,16 @@ import { STORAGE_STATE } from "../../playwright.dev.config.js";
// ─── tRPC helpers ─────────────────────────────────────────────────────────────
type TrpcResult = { result?: { data?: unknown }; error?: { data?: { code?: string }; message?: string } };
type TrpcResult = {
result?: { data?: unknown };
error?: { data?: { code?: string }; message?: string };
};
async function trpcMutation(page: Page, procedure: string, input: unknown = null): Promise<TrpcResult> {
async function trpcMutation(
page: Page,
procedure: string,
input: unknown = null,
): Promise<TrpcResult> {
return page.evaluate(
async ({ procedure, input }) => {
const res = await fetch(`/api/trpc/${procedure}?batch=1`, {
@@ -39,7 +46,11 @@ async function trpcMutation(page: Page, procedure: string, input: unknown = null
);
}
async function trpcQuery(page: Page, procedure: string, input: unknown = null): Promise<TrpcResult> {
async function trpcQuery(
page: Page,
procedure: string,
input: unknown = null,
): Promise<TrpcResult> {
return page.evaluate(
async ({ procedure, input }) => {
const encodedInput = encodeURIComponent(JSON.stringify({ "0": { json: input } }));
@@ -60,7 +71,7 @@ async function enableMfaForSession(page: Page): Promise<TOTP> {
if (!data?.secret) throw new Error(`generateTotpSecret failed: ${JSON.stringify(genRes)}`);
const totp = new TOTP({
issuer: "CapaKraken",
issuer: "Nexus",
algorithm: "SHA1",
digits: 6,
period: 30,
@@ -92,7 +103,9 @@ test.describe("MFA — setup flow (account/security page)", () => {
test.afterEach(async ({ page }) => {
// Clean up: disable MFA if a test enabled it
if (totp) {
await disableMfaForSession(page).catch(() => {/* already disabled or admin override */});
await disableMfaForSession(page).catch(() => {
/* already disabled or admin override */
});
totp = null;
}
});
@@ -106,7 +119,7 @@ test.describe("MFA — setup flow (account/security page)", () => {
expect(data?.secret).toBeTruthy();
expect(data?.uri).toMatch(/^otpauth:\/\/totp\//);
expect(data?.uri).toContain("CapaKraken");
expect(data?.uri).toContain("Nexus");
});
test("verifyAndEnableTotp accepts a valid code and enables MFA", async ({ page }) => {
@@ -137,9 +150,9 @@ test.describe("MFA — setup flow (account/security page)", () => {
await page.waitForLoadState("networkidle");
// Click the enable/setup button if MFA is not yet enabled
const setupBtn = page.getByRole("button", { name: /set up/i }).or(
page.getByRole("button", { name: /enable.*mfa/i }),
);
const setupBtn = page
.getByRole("button", { name: /set up/i })
.or(page.getByRole("button", { name: /enable.*mfa/i }));
if (await setupBtn.isVisible({ timeout: 3000 }).catch(() => false)) {
await setupBtn.click();
@@ -233,9 +246,10 @@ test.describe("MFA — login flow", () => {
// Should show error and remain on TOTP step
await expect(
page.getByText(/invalid.*code|incorrect.*token|try again/i).or(
page.locator("[data-error]"),
).first(),
page
.getByText(/invalid.*code|incorrect.*token|try again/i)
.or(page.locator("[data-error]"))
.first(),
).toBeVisible({ timeout: 5000 });
// Should NOT have navigated away
@@ -248,7 +262,9 @@ test.describe("MFA — login flow", () => {
test.describe("MFA — users without MFA enabled", () => {
test.use({ storageState: { cookies: [], origins: [] } });
test("login for MFA-less user goes straight to dashboard without TOTP prompt", async ({ page }) => {
test("login for MFA-less user goes straight to dashboard without TOTP prompt", async ({
page,
}) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "manager@planarchy.dev");
await page.fill('input[type="password"]', "manager123");
apps/web/e2e/dev-system/nav-smoke.spec.ts
+1 -1
View File
@@ -8,7 +8,7 @@
* Auth: e2e/dev-system/.auth/admin.json (created by global-setup.ts)
*
* Run:
* pnpm --filter @capakraken/web exec playwright test \
* pnpm --filter @nexus/web exec playwright test \
* --config playwright.dev.config.ts \
* e2e/dev-system/nav-smoke.spec.ts
*/
apps/web/e2e/dev-system/rbac-permissions.spec.ts
+12 -10
View File
@@ -27,10 +27,10 @@ test.describe("RBAC — admin routes (admin session)", () => {
await page.waitForLoadState("networkidle");
await expect(page.locator("table")).toBeVisible({ timeout: 10000 });
// Seed users have planarchy.dev or capakraken.dev email domains
await expect(
page.locator("text=/planarchy\\.dev|capakraken\\.dev/").first(),
).toBeVisible({ timeout: 10000 });
// Seed users have planarchy.dev or nexus.dev email domains
await expect(page.locator("text=/planarchy\\.dev|capakraken\\.dev/").first()).toBeVisible({
timeout: 10000,
});
});
test("admin can access /admin/system-roles without errors", async ({ page }) => {
@@ -99,9 +99,10 @@ test.describe("RBAC — allocations permitted for admin", () => {
await page.goto("/allocations");
await page.waitForLoadState("networkidle");
await expect(
page.locator("text=/do not have permission to view allocations/i"),
).toHaveCount(0, { timeout: 8000 });
await expect(page.locator("text=/do not have permission to view allocations/i")).toHaveCount(
0,
{ timeout: 8000 },
);
});
});
@@ -112,9 +113,10 @@ test.describe("RBAC — allocations permitted for manager", () => {
await page.goto("/allocations");
await page.waitForLoadState("networkidle");
await expect(
page.locator("text=/do not have permission to view allocations/i"),
).toHaveCount(0, { timeout: 8000 });
await expect(page.locator("text=/do not have permission to view allocations/i")).toHaveCount(
0,
{ timeout: 8000 },
);
});
});
apps/web/e2e/estimates.spec.ts
+26 -17
View File
@@ -10,22 +10,26 @@ async function signIn(page: Page, email: string, password: string) {
test.describe("Estimates", () => {
test.beforeEach(async ({ page }) => {
await signIn(page, "admin@capakraken.dev", "admin123");
await signIn(page, "admin@nexus.dev", "admin123");
await page.goto("/estimates");
});
test("estimate list loads", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(page.getByRole("heading", { name: /estimate workspace/i })).toBeVisible({
timeout: 10000,
});
await expect(page.getByPlaceholder("Search by estimate or opportunity")).toBeVisible({
timeout: 10000,
});
await expect(
page.getByRole("heading", { name: /estimate workspace/i }),
).toBeVisible({ timeout: 10000 });
await expect(
page.getByPlaceholder("Search by estimate or opportunity"),
).toBeVisible({ timeout: 10000 });
await expect(
page.locator("text=No estimates yet").or(
page.locator("text=Select an estimate to inspect the current version, demand lines, and summary metrics."),
),
page
.locator("text=No estimates yet")
.or(
page.locator(
"text=Select an estimate to inspect the current version, demand lines, and summary metrics.",
),
),
).toBeVisible({ timeout: 10000 });
});
@@ -44,8 +48,13 @@ test.describe("Estimates", () => {
await page.locator("button", { hasText: /New Estimate/i }).click();
// Step 1: Setup — fill a name
await expect(page.getByRole("button", { name: /Step 1 Setup/i })).toBeVisible({ timeout: 5000 });
const nameInput = page.locator('input[placeholder*="name"]').or(page.locator('input[name="name"]')).first();
await expect(page.getByRole("button", { name: /Step 1 Setup/i })).toBeVisible({
timeout: 5000,
});
const nameInput = page
.locator('input[placeholder*="name"]')
.or(page.locator('input[name="name"]'))
.first();
if ((await nameInput.count()) > 0) {
await nameInput.fill(`E2E Estimate ${Date.now()}`);
}
@@ -90,9 +99,7 @@ test.describe("Estimates", () => {
test("shows the empty-state fallback when no estimates exist", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("text=No estimates yet"),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("text=No estimates yet")).toBeVisible({ timeout: 10000 });
});
test("shows an estimate-not-found fallback for unknown workspaces", async ({ page }) => {
@@ -103,12 +110,14 @@ test.describe("Estimates", () => {
test("shows the restricted workspace fallback for viewers", async ({ browser }) => {
const page = await browser.newPage();
await signIn(page, "viewer@capakraken.dev", "viewer123");
await signIn(page, "viewer@nexus.dev", "viewer123");
await page.goto("/estimates/missing-estimate");
await page.waitForLoadState("networkidle");
await expect(
page.locator("text=Your role can access the estimate list, but not the detailed financial workspace."),
page.locator(
"text=Your role can access the estimate list, but not the detailed financial workspace.",
),
).toBeVisible({ timeout: 10000 });
await page.close();
apps/web/e2e/holiday-calendar.spec.ts
+20 -6
View File
@@ -2,14 +2,16 @@ import { expect, test, type Page } from "@playwright/test";
async function signInAsAdmin(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
}
test.describe("Holiday Calendar Editor", () => {
test("creates a city calendar, previews a holiday, blocks duplicates and confirms deletion", async ({ page }) => {
test("creates a city calendar, previews a holiday, blocks duplicates and confirms deletion", async ({
page,
}) => {
const suffix = Date.now().toString();
const calendarName = `E2E City Calendar ${suffix}`;
const holidayName = `E2E Local Holiday ${suffix}`;
@@ -21,11 +23,18 @@ test.describe("Holiday Calendar Editor", () => {
await page.getByTestId("holiday-calendar-name-input").fill(calendarName);
await page.getByTestId("holiday-calendar-scope-select").selectOption("CITY");
await page.getByTestId("holiday-calendar-country-select").selectOption({ label: "Germany (DE)" });
await page
.getByTestId("holiday-calendar-country-select")
.selectOption({ label: "Germany (DE)" });
await page.getByTestId("holiday-calendar-city-select").selectOption({ label: "Muenchen" });
await page.getByTestId("holiday-calendar-create-button").click();
await expect(page.getByTestId(/holiday-calendar-row-/).filter({ hasText: calendarName }).first()).toBeVisible();
await expect(
page
.getByTestId(/holiday-calendar-row-/)
.filter({ hasText: calendarName })
.first(),
).toBeVisible();
await expect(page.getByRole("heading", { name: calendarName })).toBeVisible();
await expect(page.getByTestId("holiday-entry-create-button")).toBeVisible();
@@ -44,10 +53,15 @@ test.describe("Holiday Calendar Editor", () => {
await page.getByTestId("holiday-entry-name-input").fill(`${holidayName} Duplicate`);
await page.getByTestId("holiday-entry-create-button").click();
await expect(page.getByText("A holiday entry for this calendar and date already exists")).toBeVisible();
await expect(
page.getByText("A holiday entry for this calendar and date already exists"),
).toBeVisible();
page.once("dialog", (dialog) => dialog.accept());
await page.getByTestId(/holiday-entry-delete-/).first().click();
await page
.getByTestId(/holiday-entry-delete-/)
.first()
.click();
await expect(page.getByText(holidayName).first()).not.toBeVisible();
page.once("dialog", (dialog) => dialog.accept());
apps/web/e2e/navigation.spec.ts
+10 -4
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Navigation", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -28,7 +28,7 @@ test.describe("Navigation", () => {
test("all nav routes resolve — no 404 (smoke)", async ({ page }) => {
// Complements the click-based test above with a direct-navigation check
// covering every sidebar destination. Uses admin@capakraken.dev (ADMIN role).
// covering every sidebar destination. Uses admin@nexus.dev (ADMIN role).
const routes = [
// Already covered by click test but included for completeness
"/dashboard",
@@ -79,7 +79,10 @@ test.describe("Navigation", () => {
}
// Expand again — the button should still be visible as an icon
const expandBtn = page.locator("nav button").filter({ has: page.locator("svg") }).last();
const expandBtn = page
.locator("nav button")
.filter({ has: page.locator("svg") })
.last();
await expandBtn.click();
await page.waitForTimeout(300);
const boxExpanded = await nav.boundingBox();
@@ -113,7 +116,10 @@ test.describe("Navigation", () => {
await page.waitForLoadState("networkidle");
// The hamburger button should be visible on mobile
const hamburgerBtn = page.locator("button").filter({ has: page.locator("svg") }).first();
const hamburgerBtn = page
.locator("button")
.filter({ has: page.locator("svg") })
.first();
await expect(hamburgerBtn).toBeVisible({ timeout: 5000 });
await hamburgerBtn.click();
apps/web/e2e/project-detail.spec.ts
+9 -5
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signIn(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -74,9 +74,9 @@ test.describe("Project Detail Page", () => {
await page.waitForLoadState("networkidle");
// BudgetStatusCard renders budget-related content
await expect(
page.locator("text=Budget").or(page.locator("text=budget")).first(),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("text=Budget").or(page.locator("text=budget")).first()).toBeVisible({
timeout: 10000,
});
});
test("unknown project id shows not-found state", async ({ page }) => {
@@ -85,7 +85,11 @@ test.describe("Project Detail Page", () => {
// Server-side notFound() triggers the Next.js 404 page
await expect(
page.locator("text=404").or(page.locator("text=Not Found")).or(page.locator("text=not found")).first(),
page
.locator("text=404")
.or(page.locator("text=Not Found"))
.or(page.locator("text=not found"))
.first(),
).toBeVisible({ timeout: 10000 });
});
apps/web/e2e/projects.spec.ts
+24 -10
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Projects", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "manager@capakraken.dev");
await page.fill('input[type="email"]', "manager@nexus.dev");
await page.fill('input[type="password"]', "manager123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/resources/);
@@ -26,9 +26,16 @@ test.describe("Projects", () => {
// Step 1: Blueprint selection
await expect(page.locator("text=Select Blueprint")).toBeVisible();
// Select the first available blueprint
const blueprintCard = page.locator("[data-blueprint-id]").first()
.or(page.locator("button").filter({ hasText: /Blueprint|Production/ }).first());
if (await blueprintCard.count() > 0) {
const blueprintCard = page
.locator("[data-blueprint-id]")
.first()
.or(
page
.locator("button")
.filter({ hasText: /Blueprint|Production/ })
.first(),
);
if ((await blueprintCard.count()) > 0) {
await blueprintCard.click();
} else {
// Click next without blueprint if none shown
@@ -37,16 +44,21 @@ test.describe("Projects", () => {
}
// Step 2: Timeline — set project dates
await expect(page.locator("text=Timeline").or(page.locator("text=Project Dates"))).toBeVisible({ timeout: 5000 });
const projectNameInput = page.locator('input[placeholder*="name"]').or(page.locator('input[name="name"]')).first();
if (await projectNameInput.count() > 0) {
await expect(page.locator("text=Timeline").or(page.locator("text=Project Dates"))).toBeVisible({
timeout: 5000,
});
const projectNameInput = page
.locator('input[placeholder*="name"]')
.or(page.locator('input[name="name"]'))
.first();
if ((await projectNameInput.count()) > 0) {
await projectNameInput.fill(`E2E Test Project ${Date.now()}`);
}
await page.locator("button", { hasText: "Next" }).click();
// Step 3: Staffing demand
await expect(
page.locator("text=Staffing").or(page.locator("text=Demand").or(page.locator("text=Roles")))
page.locator("text=Staffing").or(page.locator("text=Demand").or(page.locator("text=Roles"))),
).toBeVisible({ timeout: 5000 });
await page.locator("button", { hasText: "Next" }).click();
@@ -56,11 +68,13 @@ test.describe("Projects", () => {
// Step 5: Review
await page.waitForTimeout(500);
const reviewOrFinish = page.locator("text=Review").or(page.locator("button", { hasText: /Create|Finish|Submit/ }));
const reviewOrFinish = page
.locator("text=Review")
.or(page.locator("button", { hasText: /Create|Finish|Submit/ }));
await expect(reviewOrFinish).toBeVisible({ timeout: 5000 });
// Don't actually submit — just close
const cancelBtn = page.locator("button", { hasText: /Cancel|Close/ }).first();
if (await cancelBtn.count() > 0) {
if ((await cancelBtn.count()) > 0) {
await cancelBtn.click();
}
});
apps/web/e2e/reports.spec.ts
+17 -12
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signIn(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -16,16 +16,17 @@ test.describe("Chargeability Report", () => {
test("chargeability forecast page loads with heading", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1", { hasText: "Chargeability Forecast" }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: "Chargeability Forecast" })).toBeVisible({
timeout: 10000,
});
});
test("filter controls are present", async ({ page }) => {
await page.waitForLoadState("networkidle");
// Should have at least one filter (e.g., chapter, period, resource search)
await expect(
page.locator('input[type="text"]')
page
.locator('input[type="text"]')
.or(page.locator('input[type="search"]'))
.or(page.locator("select"))
.first(),
@@ -64,9 +65,9 @@ test.describe("Report Builder", () => {
test("report builder page loads with heading", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.getByRole("heading", { name: "Report Builder" }),
).toBeVisible({ timeout: 10000 });
await expect(page.getByRole("heading", { name: "Report Builder" })).toBeVisible({
timeout: 10000,
});
});
test("entity selector is present with expected options", async ({ page }) => {
@@ -78,9 +79,9 @@ test.describe("Report Builder", () => {
test("run report button is visible", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("button", { hasText: /Run|Export|Generate/i }).first(),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("button", { hasText: /Run|Export|Generate/i }).first()).toBeVisible({
timeout: 10000,
});
});
test("running a default report produces output or empty state", async ({ page }) => {
@@ -90,7 +91,11 @@ test.describe("Report Builder", () => {
await runBtn.click();
await page.waitForTimeout(1500);
await expect(
page.locator("table").or(page.locator("text=No rows")).or(page.locator("text=0 rows")).first(),
page
.locator("table")
.or(page.locator("text=No rows"))
.or(page.locator("text=0 rows"))
.first(),
).toBeVisible({ timeout: 15000 });
}
});
apps/web/e2e/resources.spec.ts
+6 -5
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Resources", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "manager@capakraken.dev");
await page.fill('input[type="email"]', "manager@nexus.dev");
await page.fill('input[type="password"]', "manager123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -21,10 +21,11 @@ test.describe("Resources", () => {
await expect(rows.first()).toBeVisible();
const firstRowText = (await rows.first().textContent()) ?? "";
const searchTerm = firstRowText
.split(/\s+/)
.map((token) => token.replace(/[^A-Za-z0-9@._-]/g, "").trim())
.find((token) => token.length >= 3) ?? "EMP";
const searchTerm =
firstRowText
.split(/\s+/)
.map((token) => token.replace(/[^A-Za-z0-9@._-]/g, "").trim())
.find((token) => token.length >= 3) ?? "EMP";
const searchInput = page.locator('input[type="search"]');
await searchInput.fill(searchTerm);
apps/web/e2e/scenarios.spec.ts
+6 -5
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signIn(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -16,15 +16,16 @@ test.describe("Scenario Planning", () => {
test("scenarios page loads with heading", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("h1", { hasText: /Scenario Planning/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: /Scenario Planning/i })).toBeVisible({
timeout: 10000,
});
});
test("shows scenarios list or empty state", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("table")
page
.locator("table")
.or(page.locator("text=No scenarios"))
.or(page.locator("text=Create a project first"))
.or(page.locator("[data-testid]"))
apps/web/e2e/smoke.spec.ts
+2 -2
View File
@@ -29,7 +29,7 @@ test("signin page renders credential inputs and submit button", async ({ page })
test("admin login succeeds and redirects away from signin", async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).not.toHaveURL(/\/auth\/signin/, { timeout: 15_000 });
@@ -37,7 +37,7 @@ test("admin login succeeds and redirects away from signin", async ({ page }) =>
test("authenticated user sees app shell nav", async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).not.toHaveURL(/\/auth\/signin/, { timeout: 15_000 });
apps/web/e2e/staffing.spec.ts
+10 -6
View File
@@ -3,7 +3,7 @@ import { expect, test } from "@playwright/test";
test.describe("Staffing", () => {
test.beforeEach(async ({ page }) => {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -12,7 +12,9 @@ test.describe("Staffing", () => {
test("staffing page loads with search form", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(page.locator("h1", { hasText: /Staffing Suggestions/i })).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1", { hasText: /Staffing Suggestions/i })).toBeVisible({
timeout: 10000,
});
// Search form should have skill input, date fields, and a search button
await expect(page.locator("text=How scoring works")).toBeVisible({ timeout: 10000 });
});
@@ -20,9 +22,9 @@ test.describe("Staffing", () => {
test("search form has default skill tags", async ({ page }) => {
await page.waitForLoadState("networkidle");
// The StaffingPanel pre-populates with TypeScript and React skill tags
await expect(
page.locator("text=TypeScript").or(page.locator("text=React")),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("text=TypeScript").or(page.locator("text=React"))).toBeVisible({
timeout: 10000,
});
});
test("submitting search returns suggestions or empty state", async ({ page }) => {
@@ -34,7 +36,9 @@ test.describe("Staffing", () => {
await page.waitForTimeout(1000);
// After search, should show either suggestion cards or a "no suggestions" message
await expect(
page.locator("text=/Score|Availability|No suggestions|No matching/i").first()
page
.locator("text=/Score|Availability|No suggestions|No matching/i")
.first()
.or(page.locator("[data-suggestion]").first())
.or(page.locator("table").first()),
).toBeVisible({ timeout: 15000 });
apps/web/e2e/test-server.mjs
+3 -3
View File
@@ -393,9 +393,9 @@ try {
await cleanupStaleE2eArtifacts();
await ensureE2eDatabaseContainer();
}
await run("pnpm", ["--filter", "@capakraken/db", "db:push"], workspaceRoot);
await run("pnpm", ["--filter", "@capakraken/db", "db:seed"], workspaceRoot);
await run("pnpm", ["--filter", "@capakraken/db", "db:seed:holidays"], workspaceRoot);
await run("pnpm", ["--filter", "@nexus/db", "db:push"], workspaceRoot);
await run("pnpm", ["--filter", "@nexus/db", "db:seed"], workspaceRoot);
await run("pnpm", ["--filter", "@nexus/db", "db:seed:holidays"], workspaceRoot);
rmSync(webDistDirPath, { recursive: true, force: true });
const server = spawn("pnpm", ["exec", "next", "dev", "-p", e2ePort], {
apps/web/e2e/timeline.spec.ts
+285 -158
View File
@@ -133,7 +133,7 @@ function createTimelineSegmentScenario(suffix: string): TimelineSegmentScenario
data: {
eid: ${JSON.stringify(`e2e.timeline.${suffix}`)},
displayName: ${JSON.stringify(`E2E Timeline ${suffix}`)},
email: ${JSON.stringify(`e2e.timeline.${suffix}@capakraken.dev`)},
email: ${JSON.stringify(`e2e.timeline.${suffix}@nexus.dev`)},
chapter: "E2E",
lcrCents: 5000,
ucrCents: 9000,
@@ -208,7 +208,7 @@ function createTimelineDemandScenario(suffix: string): TimelineDemandScenario {
data: {
eid: ${JSON.stringify(`e2e.timeline.demand.${suffix}`)},
displayName: ${JSON.stringify(`E2E Timeline Demand Resource ${suffix}`)},
email: ${JSON.stringify(`e2e.timeline.demand.${suffix}@capakraken.dev`)},
email: ${JSON.stringify(`e2e.timeline.demand.${suffix}@nexus.dev`)},
chapter: "E2E",
lcrCents: 5000,
ucrCents: 9000,
@@ -341,7 +341,9 @@ function listScenarioAssignments(projectId: string) {
}
function listScenarioDemands(projectId: string) {
return runDbJson<Array<{ id: string; startDate: string; endDate: string; headcount: number; status: string }>>(`
return runDbJson<
Array<{ id: string; startDate: string; endDate: string; headcount: number; status: string }>
>(`
const demands = await prisma.demandRequirement.findMany({
where: { projectId: ${JSON.stringify(projectId)} },
orderBy: [{ startDate: "asc" }, { endDate: "asc" }],
@@ -448,10 +450,7 @@ async function openAllocationContextMenuAtOffset(
);
}
async function openContextMenuAtCenter(
page: Page,
locator: ReturnType<Page["locator"]>,
) {
async function openContextMenuAtCenter(page: Page, locator: ReturnType<Page["locator"]>) {
const target = await resolveAllocationContextMenuTarget(locator);
const box = await readBoundingBox(target);
await page.mouse.click(box.x + box.width / 2, box.y + box.height / 2, { button: "right" });
@@ -511,9 +510,7 @@ async function listRenderedAllocationSegments(
row: ReturnType<Page["locator"]>,
allocationId?: string,
) {
const selector = allocationId
? `[data-allocation-id="${allocationId}"]`
: "[data-allocation-id]";
const selector = allocationId ? `[data-allocation-id="${allocationId}"]` : "[data-allocation-id]";
return row.locator(selector).evaluateAll((elements) =>
elements.map((element) => {
const htmlElement = element as HTMLElement;
@@ -536,17 +533,13 @@ function escapeRegex(value: string) {
async function signInAsAdmin(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
}
async function findVisibleTimelineEntryId(
page: Page,
selector: string,
minimumWidth = 24,
) {
async function findVisibleTimelineEntryId(page: Page, selector: string, minimumWidth = 24) {
return page.locator(selector).evaluateAll((elements, minimum) => {
for (const element of elements) {
if (!(element instanceof HTMLElement)) continue;
@@ -600,9 +593,9 @@ async function findVisibleAllocationSegmentForResize(
);
const stickyHeaderBottom = scrollContainer
? Array.from(scrollContainer.querySelectorAll<HTMLElement>(".sticky.top-0")).reduce(
(maxBottom, element) => Math.max(maxBottom, element.getBoundingClientRect().bottom),
0,
)
(maxBottom, element) => Math.max(maxBottom, element.getBoundingClientRect().bottom),
0,
)
: 0;
const safeTop = stickyHeaderBottom > 0 ? stickyHeaderBottom + 8 : 48;
const candidates: Array<{
@@ -611,8 +604,11 @@ async function findVisibleAllocationSegmentForResize(
segmentEnd: string | null;
score: number;
}> = [];
let fallback: { allocationId: string; segmentStart: string | null; segmentEnd: string | null } | null =
null;
let fallback: {
allocationId: string;
segmentStart: string | null;
segmentEnd: string | null;
} | null = null;
for (const element of elements) {
if (!(element instanceof HTMLElement)) continue;
@@ -829,13 +825,20 @@ async function switchToProjectView(page: Page, readySelector?: string) {
await expect(page.locator(readySelector).first()).toBeVisible();
} else {
await expect
.poll(async () => {
const projectRows = await page.getByTestId("timeline-project-resource-row-canvas").count();
const projectBars = await page.locator("[data-timeline-entry-type='project-bar']").count();
const demandBars = await page.locator("[data-timeline-entry-type='demand']").count();
const emptyStates = await page.getByText(/No projects in this time range/).count();
return projectRows + projectBars + demandBars + emptyStates;
}, { timeout: 10_000 })
.poll(
async () => {
const projectRows = await page
.getByTestId("timeline-project-resource-row-canvas")
.count();
const projectBars = await page
.locator("[data-timeline-entry-type='project-bar']")
.count();
const demandBars = await page.locator("[data-timeline-entry-type='demand']").count();
const emptyStates = await page.getByText(/No projects in this time range/).count();
return projectRows + projectBars + demandBars + emptyStates;
},
{ timeout: 10_000 },
)
.not.toBe(0);
}
await expect(page.getByTestId("timeline-resource-row-canvas")).toHaveCount(0);
@@ -906,22 +909,21 @@ test.describe("Timeline", () => {
await expect(page.locator("text=/\\d+ resources/")).toBeVisible();
});
test("view toggle stays disabled until the initial timeline load becomes interactive", async ({ page }) => {
test("view toggle stays disabled until the initial timeline load becomes interactive", async ({
page,
}) => {
const suffix = `${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}`;
const scenario = createTimelineSegmentScenario(suffix);
try {
await page.goto(
`/timeline?startDate=2026-04-01&days=31&eids=${scenario.resourceEid}`,
{ waitUntil: "domcontentloaded" },
);
await page.goto(`/timeline?startDate=2026-04-01&days=31&eids=${scenario.resourceEid}`, {
waitUntil: "domcontentloaded",
});
const projectButton = page.getByRole("button", { name: "Project view" });
const resourceButton = page.getByRole("button", { name: "Resource view" });
const resourceRowSelector =
`[data-testid="timeline-resource-row-canvas"][data-resource-eid="${scenario.resourceEid}"]`;
const projectRowSelector =
`[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
const resourceRowSelector = `[data-testid="timeline-resource-row-canvas"][data-resource-eid="${scenario.resourceEid}"]`;
const projectRowSelector = `[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
await expect(projectButton).toBeDisabled();
await expect(resourceButton).toBeDisabled();
@@ -951,9 +953,9 @@ test.describe("Timeline", () => {
test("keeps timeline data populated after navigating from allocations", async ({ page }) => {
await page.goto("/allocations");
await expect(
page.locator("h1").filter({ hasText: /Allocations|Planning/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("h1").filter({ hasText: /Allocations|Planning/i })).toBeVisible({
timeout: 10000,
});
await page.locator('nav a >> text="Timeline"').first().click();
await expect(page).toHaveURL(/\/timeline/);
@@ -1046,7 +1048,10 @@ test.describe("Timeline", () => {
if (!projectAllocationBox) {
throw new Error("Expected a project allocation block to be available");
}
await page.mouse.move(projectAllocationBox.x + (projectAllocationBox.width / 2), projectHoverBox.y + 20);
await page.mouse.move(
projectAllocationBox.x + projectAllocationBox.width / 2,
projectHoverBox.y + 20,
);
await expect(heatmapTooltip).toBeVisible();
await expect
.poll(async () => {
@@ -1071,7 +1076,9 @@ test.describe("Timeline", () => {
.first();
await allocation.click({ button: "right" });
await expect(page.getByTestId("timeline-allocation-popover-loading")).toHaveCount(0, { timeout: 2_000 });
await expect(page.getByTestId("timeline-allocation-popover-loading")).toHaveCount(0, {
timeout: 2_000,
});
const popover = page.getByTestId("timeline-allocation-popover");
await expect(popover).toBeVisible();
await expect(page.getByTestId("timeline-allocation-popover-error")).toHaveCount(0);
@@ -1103,12 +1110,16 @@ test.describe("Timeline", () => {
waitUntil: "domcontentloaded",
});
const row = page.locator('[data-testid="timeline-resource-row-canvas"][data-resource-eid="bruce.banner"]').first();
const row = page
.locator('[data-testid="timeline-resource-row-canvas"][data-resource-eid="bruce.banner"]')
.first();
await expect(row).toBeVisible();
const holidayBlock = row.locator(
'[data-testid="timeline-vacation-block"][data-vacation-type="PUBLIC_HOLIDAY"][data-vacation-note="Karfreitag"]',
).first();
const holidayBlock = row
.locator(
'[data-testid="timeline-vacation-block"][data-vacation-type="PUBLIC_HOLIDAY"][data-vacation-note="Karfreitag"]',
)
.first();
await expect(holidayBlock).toBeVisible();
const rowBox = await row.boundingBox();
@@ -1129,7 +1140,9 @@ test.describe("Timeline", () => {
const holidayTooltip = page
.locator("div.fixed.pointer-events-none.rounded-xl.border.border-amber-700\\/50")
.or(page.locator("div.fixed.pointer-events-none.rounded-xl").filter({ hasText: "Karfreitag" }))
.or(
page.locator("div.fixed.pointer-events-none.rounded-xl").filter({ hasText: "Karfreitag" }),
)
.first();
await expect(holidayTooltip).toBeVisible();
@@ -1278,9 +1291,7 @@ test.describe("Timeline", () => {
expect(result.maxGap).toBeLessThan(24);
});
test("allocation resize shows a live preview before mouseup", async ({
page,
}) => {
test("allocation resize shows a live preview before mouseup", async ({ page }) => {
await page.goto("/timeline?startDate=2026-04-01&days=31", {
waitUntil: "domcontentloaded",
});
@@ -1358,9 +1369,7 @@ test.describe("Timeline", () => {
expect(secondResize.rightEdgeGain).toBeGreaterThan(48);
});
test("allocation start resize shows a live preview before mouseup", async ({
page,
}) => {
test("allocation start resize shows a live preview before mouseup", async ({ page }) => {
await page.goto("/timeline?startDate=2026-04-01&days=31", {
waitUntil: "domcontentloaded",
});
@@ -1394,18 +1403,17 @@ test.describe("Timeline", () => {
await page.goto(`/timeline?startDate=2026-04-01&days=30&eids=${scenario.resourceEid}`, {
waitUntil: "domcontentloaded",
});
const resourceRowSelector =
`[data-testid="timeline-resource-row-canvas"][data-resource-eid="${scenario.resourceEid}"]`;
const projectRowSelector =
`[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
const projectAllocationSelector =
`${projectRowSelector} [data-timeline-entry-type="allocation"][data-allocation-id="${scenario.assignmentId}"]`;
const resourceRowSelector = `[data-testid="timeline-resource-row-canvas"][data-resource-eid="${scenario.resourceEid}"]`;
const projectRowSelector = `[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
const projectAllocationSelector = `${projectRowSelector} [data-timeline-entry-type="allocation"][data-allocation-id="${scenario.assignmentId}"]`;
await expect(page.locator(resourceRowSelector)).toBeVisible();
await expect(
page.locator(
`[data-timeline-entry-type="allocation"][data-allocation-id="${scenario.assignmentId}"]`,
).first(),
page
.locator(
`[data-timeline-entry-type="allocation"][data-allocation-id="${scenario.assignmentId}"]`,
)
.first(),
).toBeVisible();
await switchToProjectView(page, projectRowSelector);
@@ -1427,19 +1435,22 @@ test.describe("Timeline", () => {
expect(resizeEnd.rightEdgeGain).toBeGreaterThan(48);
let rightResizeAssignments: Array<{ id: string; startDate: string; endDate: string }> = [];
await expect
.poll(() => {
rightResizeAssignments = listScenarioAssignments(scenario.projectId);
if (rightResizeAssignments.length !== 1) {
return null;
}
.poll(
() => {
rightResizeAssignments = listScenarioAssignments(scenario.projectId);
if (rightResizeAssignments.length !== 1) {
return null;
}
const [assignment] = rightResizeAssignments;
if (!assignment || assignment.id !== scenario.assignmentId) {
return null;
}
const [assignment] = rightResizeAssignments;
if (!assignment || assignment.id !== scenario.assignmentId) {
return null;
}
return assignment.endDate;
}, { timeout: 15_000 })
return assignment.endDate;
},
{ timeout: 15_000 },
)
.not.toBe("2026-04-17");
expect(rightResizeAssignments).toHaveLength(1);
expect(rightResizeAssignments[0]?.id).toBe(scenario.assignmentId);
@@ -1451,19 +1462,22 @@ test.describe("Timeline", () => {
expect(resizeStart.leftEdgeGain).toBeGreaterThan(36);
let leftResizeAssignments: Array<{ id: string; startDate: string; endDate: string }> = [];
await expect
.poll(() => {
leftResizeAssignments = listScenarioAssignments(scenario.projectId);
if (leftResizeAssignments.length !== 1) {
return null;
}
.poll(
() => {
leftResizeAssignments = listScenarioAssignments(scenario.projectId);
if (leftResizeAssignments.length !== 1) {
return null;
}
const [assignment] = leftResizeAssignments;
if (!assignment || assignment.id !== scenario.assignmentId) {
return null;
}
const [assignment] = leftResizeAssignments;
if (!assignment || assignment.id !== scenario.assignmentId) {
return null;
}
return assignment.startDate;
}, { timeout: 15_000 })
return assignment.startDate;
},
{ timeout: 15_000 },
)
.not.toBe("2026-04-06");
expect(leftResizeAssignments).toHaveLength(1);
expect(leftResizeAssignments[0]?.id).toBe(scenario.assignmentId);
@@ -1479,15 +1493,12 @@ test.describe("Timeline", () => {
const scenario = createTimelineDemandScenario(suffix);
try {
await page.goto(
`/timeline?startDate=2026-04-01&days=31&projectIds=${scenario.projectId}`,
{ waitUntil: "domcontentloaded" },
);
await page.goto(`/timeline?startDate=2026-04-01&days=31&projectIds=${scenario.projectId}`, {
waitUntil: "domcontentloaded",
});
await ensureOpenDemandVisibilityEnabled(page);
const demandRowSelector =
`[data-project-demand-row="true"][data-project-id="${scenario.projectId}"]`;
const demandSelector =
`${demandRowSelector} [data-timeline-entry-type="demand"][data-allocation-id="${scenario.demandId}"]`;
const demandRowSelector = `[data-project-demand-row="true"][data-project-id="${scenario.projectId}"]`;
const demandSelector = `${demandRowSelector} [data-timeline-entry-type="demand"][data-allocation-id="${scenario.demandId}"]`;
await switchToProjectView(page, demandRowSelector);
await expect(page.getByText(scenario.projectName).first()).toBeVisible();
@@ -1505,19 +1516,22 @@ test.describe("Timeline", () => {
status: string;
}> = [];
await expect
.poll(() => {
rightResizeDemands = listScenarioDemands(scenario.projectId);
if (rightResizeDemands.length !== 1) {
return null;
}
.poll(
() => {
rightResizeDemands = listScenarioDemands(scenario.projectId);
if (rightResizeDemands.length !== 1) {
return null;
}
const [demand] = rightResizeDemands;
if (!demand || demand.id !== scenario.demandId) {
return null;
}
const [demand] = rightResizeDemands;
if (!demand || demand.id !== scenario.demandId) {
return null;
}
return demand.endDate;
}, { timeout: 15_000 })
return demand.endDate;
},
{ timeout: 15_000 },
)
.not.toBe("2026-04-16");
expect(rightResizeDemands).toHaveLength(1);
expect(rightResizeDemands[0]?.id).toBe(scenario.demandId);
@@ -1538,19 +1552,22 @@ test.describe("Timeline", () => {
status: string;
}> = [];
await expect
.poll(() => {
leftResizeDemands = listScenarioDemands(scenario.projectId);
if (leftResizeDemands.length !== 1) {
return null;
}
.poll(
() => {
leftResizeDemands = listScenarioDemands(scenario.projectId);
if (leftResizeDemands.length !== 1) {
return null;
}
const [demand] = leftResizeDemands;
if (!demand || demand.id !== scenario.demandId) {
return null;
}
const [demand] = leftResizeDemands;
if (!demand || demand.id !== scenario.demandId) {
return null;
}
return demand.startDate;
}, { timeout: 15_000 })
return demand.startDate;
},
{ timeout: 15_000 },
)
.not.toBe("2026-04-07");
expect(leftResizeDemands).toHaveLength(1);
expect(leftResizeDemands[0]?.id).toBe(scenario.demandId);
@@ -1630,7 +1647,11 @@ test.describe("Timeline", () => {
);
await expect(resizedSegment).toBeVisible();
await dragLocatorBy(page, resizedSegment.locator('[data-allocation-interaction="body"]'), -dayWidth);
await dragLocatorBy(
page,
resizedSegment.locator('[data-allocation-interaction="body"]'),
-dayWidth,
);
await releaseMouse(page);
await waitForScenarioAssignments(scenario.projectId, [
@@ -1674,9 +1695,21 @@ test.describe("Timeline", () => {
{ startDate: "2026-04-11", endDate: "2026-04-17" },
]);
const leftSplit = row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first();
const rightSplit = row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first();
const nextWeekSegment = row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first();
const leftSplit = row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first();
const rightSplit = row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first();
const nextWeekSegment = row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(leftSplit).toBeVisible();
await expect(rightSplit).toBeVisible();
await expect(nextWeekSegment).toBeVisible();
@@ -1704,22 +1737,42 @@ test.describe("Timeline", () => {
]);
await expect(
row.locator('[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-08"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-08"]',
)
.first(),
).toBeVisible();
await page.reload({ waitUntil: "domcontentloaded" });
await expect(row).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-08"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-08"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first(),
).toBeVisible();
} finally {
cleanupTimelineSegmentScenario(scenario.projectId, scenario.resourceId);
@@ -1769,9 +1822,21 @@ test.describe("Timeline", () => {
await page.reload({ waitUntil: "domcontentloaded" });
await expect(row).toBeVisible();
const leftSplit = row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first();
const fridayBridge = row.locator('[data-allocation-segment-start="2026-04-10"][data-allocation-segment-end="2026-04-10"]').first();
const mondaySegment = row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first();
const leftSplit = row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first();
const fridayBridge = row
.locator(
'[data-allocation-segment-start="2026-04-10"][data-allocation-segment-end="2026-04-10"]',
)
.first();
const mondaySegment = row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(leftSplit).toBeVisible();
await expect(fridayBridge).toBeVisible();
await expect(mondaySegment).toBeVisible();
@@ -1797,13 +1862,25 @@ test.describe("Timeline", () => {
await page.reload({ waitUntil: "domcontentloaded" });
await expect(row).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-09"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-08"][data-allocation-segment-end="2026-04-09"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-10"][data-allocation-segment-end="2026-04-10"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-10"][data-allocation-segment-end="2026-04-10"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first(),
).toBeVisible();
} finally {
cleanupTimelineSegmentScenario(scenario.projectId, scenario.resourceId);
@@ -1850,9 +1927,21 @@ test.describe("Timeline", () => {
{ startDate: "2026-04-09", endDate: "2026-04-17" },
]);
const leftSplit = row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first();
const rightSplit = row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first();
const mondaySegment = row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first();
const leftSplit = row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first();
const rightSplit = row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first();
const mondaySegment = row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(leftSplit).toBeVisible();
await expect(rightSplit).toBeVisible();
await expect(mondaySegment).toBeVisible();
@@ -1870,8 +1959,16 @@ test.describe("Timeline", () => {
{ startDate: "2026-04-09", endDate: "2026-04-17" },
]);
const resizedRightSplit = row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first();
await dragLocatorBy(page, resizedRightSplit.locator('[data-allocation-handle="end"]'), -dayWidth);
const resizedRightSplit = row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first();
await dragLocatorBy(
page,
resizedRightSplit.locator('[data-allocation-handle="end"]'),
-dayWidth,
);
await releaseMouse(page);
await waitForScenarioAssignments(scenario.projectId, [
@@ -1883,9 +1980,11 @@ test.describe("Timeline", () => {
await page.reload({ waitUntil: "domcontentloaded" });
await expect(row).toBeVisible();
const mondaySegmentAfterReload = row.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
).first();
const mondaySegmentAfterReload = row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(mondaySegmentAfterReload).toBeVisible();
const mondayCarveDateInputs = page.locator('input[placeholder="dd/mm/yyyy"]');
@@ -1951,9 +2050,21 @@ test.describe("Timeline", () => {
{ startDate: "2026-04-09", endDate: "2026-04-17" },
]);
const leftSplit = row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first();
const rightSplit = row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first();
const mondaySegment = row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first();
const leftSplit = row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first();
const rightSplit = row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first();
const mondaySegment = row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(leftSplit).toBeVisible();
await expect(rightSplit).toBeVisible();
await expect(mondaySegment).toBeVisible();
@@ -1968,7 +2079,11 @@ test.describe("Timeline", () => {
]);
await expect(
row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first(),
).toHaveCount(0);
await expect(rightSplit).toBeVisible();
await expect(mondaySegment).toBeVisible();
@@ -1976,13 +2091,25 @@ test.describe("Timeline", () => {
await page.reload({ waitUntil: "domcontentloaded" });
await expect(row).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-06"][data-allocation-segment-end="2026-04-07"]',
)
.first(),
).toHaveCount(0);
await expect(
row.locator('[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-09"][data-allocation-segment-end="2026-04-10"]',
)
.first(),
).toBeVisible();
await expect(
row.locator('[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]').first(),
row
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first(),
).toBeVisible();
} finally {
cleanupTimelineSegmentScenario(scenario.projectId, scenario.resourceId);
@@ -2029,13 +2156,14 @@ test.describe("Timeline", () => {
{ startDate: "2026-04-09", endDate: "2026-04-17" },
]);
const mondaySegment = resourceRow.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
).first();
const mondaySegment = resourceRow
.locator(
'[data-allocation-segment-start="2026-04-13"][data-allocation-segment-end="2026-04-17"]',
)
.first();
await expect(mondaySegment).toBeVisible();
const projectRowSelector =
`[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
const projectRowSelector = `[data-testid="timeline-project-resource-row-canvas"][data-project-id="${scenario.projectId}"][data-resource-id="${scenario.resourceId}"]`;
await switchToProjectView(page, projectRowSelector);
let mondayAssignment: { id: string; startDate: string; endDate: string } | null = null;
@@ -2072,7 +2200,9 @@ test.describe("Timeline", () => {
await expect(page.getByText(scenario.projectName).first()).toBeVisible();
const projectAllocationAfterReload = page
.locator(`[data-timeline-entry-type="allocation"][data-allocation-id="${mondayAssignment!.id}"]`)
.locator(
`[data-timeline-entry-type="allocation"][data-allocation-id="${mondayAssignment!.id}"]`,
)
.first();
await expect(projectAllocationAfterReload).toBeVisible();
await openContextMenuAtCenter(page, projectAllocationAfterReload);
@@ -2093,15 +2223,12 @@ test.describe("Timeline", () => {
const scenario = createTimelineDemandScenario(suffix);
try {
await page.goto(
`/timeline?startDate=2026-04-01&days=31&projectIds=${scenario.projectId}`,
{ waitUntil: "domcontentloaded" },
);
await page.goto(`/timeline?startDate=2026-04-01&days=31&projectIds=${scenario.projectId}`, {
waitUntil: "domcontentloaded",
});
await ensureOpenDemandVisibilityEnabled(page);
const demandRowSelector =
`[data-project-demand-row="true"][data-project-id="${scenario.projectId}"]`;
const demandSelector =
`${demandRowSelector} [data-timeline-entry-type="demand"][data-allocation-id="${scenario.demandId}"]`;
const demandRowSelector = `[data-project-demand-row="true"][data-project-id="${scenario.projectId}"]`;
const demandSelector = `${demandRowSelector} [data-timeline-entry-type="demand"][data-allocation-id="${scenario.demandId}"]`;
await switchToProjectView(page, demandRowSelector);
await expect(page.locator(demandSelector)).toBeVisible();
apps/web/e2e/vacations.spec.ts
+28 -11
View File
@@ -2,7 +2,7 @@ import { expect, test, type Page } from "@playwright/test";
async function signInAsAdmin(page: Page) {
await page.goto("/auth/signin");
await page.fill('input[type="email"]', "admin@capakraken.dev");
await page.fill('input[type="email"]', "admin@nexus.dev");
await page.fill('input[type="password"]', "admin123");
await page.click('button[type="submit"]');
await expect(page).toHaveURL(/\/(dashboard|resources)/);
@@ -27,9 +27,9 @@ test.describe("Vacations", () => {
test("request vacation button is visible", async ({ page }) => {
await page.waitForLoadState("networkidle");
await expect(
page.locator("button", { hasText: /Request Vacation/i }),
).toBeVisible({ timeout: 10000 });
await expect(page.locator("button", { hasText: /Request Vacation/i })).toBeVisible({
timeout: 10000,
});
});
test("request vacation is blocked without linked resource", async ({ page }) => {
@@ -37,7 +37,9 @@ test.describe("Vacations", () => {
const reqBtn = page.locator("button", { hasText: /Request Vacation/i });
await expect(reqBtn).toBeDisabled();
await expect(
page.getByText("Your account is not linked to a resource. Please contact an administrator."),
page.getByText(
"Your account is not linked to a resource. Please contact an administrator.",
),
).toBeVisible({ timeout: 5000 });
});
});
@@ -57,11 +59,18 @@ test.describe("Vacations", () => {
test("team calendar tab renders", async ({ page }) => {
await page.waitForLoadState("networkidle");
await page.locator("button", { hasText: "Team Calendar" }).or(page.locator("text=Team Calendar")).first().click();
await page
.locator("button", { hasText: "Team Calendar" })
.or(page.locator("text=Team Calendar"))
.first()
.click();
await page.waitForTimeout(500);
// Calendar view should appear
await expect(
page.locator("table").or(page.locator("[data-calendar]")).or(page.locator("text=Mon").or(page.locator("text=Week"))),
page
.locator("table")
.or(page.locator("[data-calendar]"))
.or(page.locator("text=Mon").or(page.locator("text=Week"))),
).toBeVisible({ timeout: 10000 });
});
@@ -75,11 +84,15 @@ test.describe("Vacations", () => {
await expect(filters.nth(2)).toHaveValue("");
});
test("vacation request preview excludes regional public holidays from deducted days", async ({ page }) => {
test("vacation request preview excludes regional public holidays from deducted days", async ({
page,
}) => {
await page.waitForLoadState("networkidle");
await page.getByRole("button", { name: /request vacation/i }).click();
await expect(page.getByLabel(/^type/i).locator("option", { hasText: /Public Holiday/i })).toHaveCount(0);
await expect(
page.getByLabel(/^type/i).locator("option", { hasText: /Public Holiday/i }),
).toHaveCount(0);
await page.getByLabel(/resource/i).selectOption({ label: "Bruce Banner (bruce.banner)" });
await page.getByLabel(/^type/i).selectOption("ANNUAL");
await fillDisplayDate(page, /start date/i, "2026-01-06");
@@ -89,9 +102,13 @@ test.describe("Vacations", () => {
await expect(page.getByTestId("vacation-preview-requested-days")).toHaveText("1");
await expect(page.getByTestId("vacation-preview-effective-days")).toHaveText("0");
await expect(page.getByTestId("vacation-preview-deducted-days")).toHaveText("0");
await expect(page.getByTestId("vacation-preview-public-holidays")).toContainText("2026-01-06");
await expect(page.getByTestId("vacation-preview-public-holidays")).toContainText(
"2026-01-06",
);
await expect(page.getByTestId("vacation-preview-holiday-basis")).toContainText("Germany");
await expect(page.getByTestId("vacation-preview-holiday-sources")).toContainText("Holiday Calendar");
await expect(page.getByTestId("vacation-preview-holiday-sources")).toContainText(
"Holiday Calendar",
);
});
});
apps/web/eslint.config.mjs
+1 -1
View File
@@ -1,4 +1,4 @@
import nextjsConfig from "@capakraken/eslint-config/nextjs";
import nextjsConfig from "@nexus/eslint-config/nextjs";
/** @type {import("eslint").Linter.FlatConfig[]} */
export default [
apps/web/next.config.ts
+6 -6
View File
@@ -11,16 +11,16 @@ const nextConfig: NextConfig = {
"recharts",
"date-fns",
"framer-motion",
"@capakraken/shared",
"@nexus/shared",
"@react-pdf/renderer",
],
},
transpilePackages: [
"@capakraken/api",
"@capakraken/db",
"@capakraken/engine",
"@capakraken/shared",
"@capakraken/staffing",
"@nexus/api",
"@nexus/db",
"@nexus/engine",
"@nexus/shared",
"@nexus/staffing",
],
typedRoutes: true,
eslint: {
apps/web/package.json
+8 -8
View File
@@ -1,5 +1,5 @@
{
"name": "@capakraken/web",
"name": "@nexus/web",
"version": "0.1.0",
"private": true,
"scripts": {
@@ -13,11 +13,11 @@
"test:e2e:email": "playwright test --config playwright.dev.config.ts e2e/dev-system/invite-flow.spec.ts e2e/dev-system/password-reset.spec.ts"
},
"dependencies": {
"@capakraken/api": "workspace:*",
"@capakraken/application": "workspace:*",
"@capakraken/db": "workspace:*",
"@capakraken/engine": "workspace:*",
"@capakraken/shared": "workspace:*",
"@nexus/api": "workspace:*",
"@nexus/application": "workspace:*",
"@nexus/db": "workspace:*",
"@nexus/engine": "workspace:*",
"@nexus/shared": "workspace:*",
"@dnd-kit/core": "^6.3.1",
"@dnd-kit/sortable": "^10.0.0",
"@dnd-kit/utilities": "^3.2.2",
@@ -51,8 +51,8 @@
"devDependencies": {
"@next/bundle-analyzer": "^16.2.3",
"@axe-core/playwright": "^4.11.1",
"@capakraken/eslint-config": "workspace:*",
"@capakraken/tsconfig": "workspace:*",
"@nexus/eslint-config": "workspace:*",
"@nexus/tsconfig": "workspace:*",
"@playwright/test": "^1.49.1",
"@testing-library/jest-dom": "^6.9.1",
"@testing-library/react": "^16.3.2",
apps/web/playwright.dev.config.ts
+1 -1
View File
@@ -6,7 +6,7 @@
* dev server at localhost:3100 and exercises real dev-DB data.
*
* Usage:
* pnpm --filter @capakraken/web exec playwright test --config playwright.dev.config.ts
* pnpm --filter @nexus/web exec playwright test --config playwright.dev.config.ts
*
* Prerequisites:
* - Dev server running: pnpm run dev (or docker compose up)
apps/web/public/manifest.json
+2 -2
View File
@@ -1,6 +1,6 @@
{
"name": "CapaKraken — Resource & Capacity Planning",
"short_name": "CapaKraken",
"name": "Nexus — Resource & Capacity Planning",
"short_name": "Nexus",
"description": "Resource planning and project staffing for 3D production",
"start_url": "/dashboard",
"display": "standalone",
apps/web/public/sw.js
+3 -3
View File
@@ -1,6 +1,6 @@
/// <reference lib="webworker" />
const CACHE_NAME = "capakraken-v2";
const CACHE_NAME = "nexus-v2";
const STATIC_EXTENSIONS = /\.(js|css|png|jpg|jpeg|svg|gif|ico|woff2?|ttf|eot)$/;
// Offline fallback page (simple inline HTML)
@@ -9,7 +9,7 @@ const OFFLINE_HTML = `<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>CapaKraken - Offline</title>
<title>Nexus - Offline</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
@@ -31,7 +31,7 @@ const OFFLINE_HTML = `<!DOCTYPE html>
<body>
<div class="container">
<h1>You are offline</h1>
<p>CapaKraken requires an internet connection. Please check your network and try again.</p>
<p>Nexus requires an internet connection. Please check your network and try again.</p>
<button onclick="location.reload()">Retry</button>
</div>
</body>
apps/web/src/app/(app)/admin/vacations/page.tsx
+18 -8
View File
@@ -2,7 +2,7 @@ import { HolidayCalendarEditor } from "~/components/vacations/HolidayCalendarEdi
import { PublicHolidayBatch } from "~/components/vacations/PublicHolidayBatch.js";
import { EntitlementManager } from "~/components/vacations/EntitlementManager.js";
export const metadata = { title: "Vacation Management — CapaKraken" };
export const metadata = { title: "Vacation Management — Nexus" };
export default function AdminVacationsPage() {
return (
@@ -10,15 +10,19 @@ export default function AdminVacationsPage() {
<div>
<h1 className="text-2xl font-bold text-gray-900">Vacation Management</h1>
<p className="mt-1 text-sm text-gray-500">
Verwalte Feiertagskalender pro Land, Bundesland und Stadt sowie Entitlements und Fallback-Importe.
Verwalte Feiertagskalender pro Land, Bundesland und Stadt sowie Entitlements und
Fallback-Importe.
</p>
</div>
<section className="space-y-3">
<div>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Holiday Calendars</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
Holiday Calendars
</h2>
<p className="text-sm text-gray-600">
Fachliche Quelle fuer regionale Feiertage. Diese Kalender werden fuer Urlaubszaehlung, Timeline-Overlay und Assistant-Abfragen verwendet.
Fachliche Quelle fuer regionale Feiertage. Diese Kalender werden fuer Urlaubszaehlung,
Timeline-Overlay und Assistant-Abfragen verwendet.
</p>
</div>
<HolidayCalendarEditor />
@@ -26,9 +30,12 @@ export default function AdminVacationsPage() {
<section className="space-y-3">
<div>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Legacy Batch Import</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
Legacy Batch Import
</h2>
<p className="text-sm text-gray-600">
Nur als Fallback fuer bestaende Prozesse. Bevorzugt sollen Feiertage ueber die Kalenderlogik und nicht als statische Urlaubseintraege gepflegt werden.
Nur als Fallback fuer bestaende Prozesse. Bevorzugt sollen Feiertage ueber die
Kalenderlogik und nicht als statische Urlaubseintraege gepflegt werden.
</p>
</div>
<PublicHolidayBatch />
@@ -36,9 +43,12 @@ export default function AdminVacationsPage() {
<section className="space-y-3">
<div>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">Entitlements</h2>
<h2 className="text-sm font-semibold uppercase tracking-wide text-gray-500">
Entitlements
</h2>
<p className="text-sm text-gray-600">
Jahresansprueche und Resttage im gleichen Kontext pruefen, nachdem Feiertage regional aufgeloest wurden.
Jahresansprueche und Resttage im gleichen Kontext pruefen, nachdem Feiertage regional
aufgeloest wurden.
</p>
</div>
<EntitlementManager />
apps/web/src/app/(app)/estimates/EstimatesClient.tsx
+16 -7
View File
@@ -2,7 +2,7 @@
import { useMemo, useState } from "react";
import Link from "next/link";
import { EstimateStatus, type EstimateVersionStatus } from "@capakraken/shared";
import { EstimateStatus, type EstimateVersionStatus } from "@nexus/shared";
import { clsx } from "clsx";
import { EstimateWizard } from "~/components/estimates/EstimateWizard.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
@@ -122,7 +122,8 @@ function EstimateDetailPanel({
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-gray-400">
Estimate detail <InfoTooltip content="Pre-project cost and effort calculation. Estimates model staffing demand, scope, and financials before work begins." />
Estimate detail{" "}
<InfoTooltip content="Pre-project cost and effort calculation. Estimates model staffing demand, scope, and financials before work begins." />
</p>
<h2 className="mt-2 text-xl font-semibold text-gray-900 dark:text-gray-50">
{estimate.name}
@@ -206,7 +207,8 @@ function EstimateDetailPanel({
<section>
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
Scope items <InfoTooltip content="Deliverables or work packages that define what is included in this estimate." />
Scope items{" "}
<InfoTooltip content="Deliverables or work packages that define what is included in this estimate." />
</h3>
<span className="text-xs text-gray-400">{latestVersion.scopeItems.length}</span>
</div>
@@ -239,7 +241,8 @@ function EstimateDetailPanel({
<section>
<div className="flex items-center justify-between">
<h3 className="text-sm font-semibold text-gray-900 dark:text-gray-100">
Demand lines <InfoTooltip content="Staffing demand rows. Each line represents a role or resource with hours, cost rate, and sell rate." />
Demand lines{" "}
<InfoTooltip content="Staffing demand rows. Each line represents a role or resource with hours, cost rate, and sell rate." />
</h3>
<span className="text-xs text-gray-400">{latestVersion.demandLines.length}</span>
</div>
@@ -345,13 +348,19 @@ function EstimateCard({
<div className="mt-5 grid gap-3 sm:grid-cols-2">
<div>
<p className="text-xs uppercase tracking-wide text-gray-400">Opportunity <InfoTooltip content="External CRM or sales reference ID linking this estimate to a sales opportunity." /></p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Opportunity{" "}
<InfoTooltip content="External CRM or sales reference ID linking this estimate to a sales opportunity." />
</p>
<p className="mt-1 text-sm text-gray-700 dark:text-gray-200">
{estimate.opportunityId ?? "Not set"}
</p>
</div>
<div>
<p className="text-xs uppercase tracking-wide text-gray-400">Updated <InfoTooltip content="When this estimate or any of its versions was last modified." /></p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Updated{" "}
<InfoTooltip content="When this estimate or any of its versions was last modified." />
</p>
<p className="mt-1 text-sm text-gray-700 dark:text-gray-200">
{formatDateLong(estimate.updatedAt)}
</p>
@@ -466,7 +475,7 @@ export function EstimatesClient() {
No estimates yet
</p>
<p className="mt-2 text-sm text-gray-400 dark:text-gray-500">
Start with the wizard to create a connected estimate from CapaKraken data.
Start with the wizard to create a connected estimate from Nexus data.
</p>
</div>
) : (
apps/web/src/app/(app)/mobile/page.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
import { MobileSummaryClient } from "~/components/mobile/MobileSummaryClient.js";
export const metadata = {
title: "CapaKraken — Mobile Summary",
title: "Nexus — Mobile Summary",
};
export default function MobilePage() {
apps/web/src/app/(app)/projects/ProjectsClient.tsx
+2 -2
View File
@@ -5,8 +5,8 @@ import { useUrlFilters } from "~/hooks/useUrlFilters.js";
import { useDebounce } from "~/hooks/useDebounce.js";
import { createPortal } from "react-dom";
import { formatDate, formatMoney } from "~/lib/format.js";
import type { Project, ColumnDef, ProjectStatus } from "@capakraken/shared";
import { PROJECT_COLUMNS, BlueprintTarget } from "@capakraken/shared";
import type { Project, ColumnDef, ProjectStatus } from "@nexus/shared";
import { PROJECT_COLUMNS, BlueprintTarget } from "@nexus/shared";
import Link from "next/link";
import Image from "next/image";
import { clsx } from "clsx";
apps/web/src/app/(app)/resources/ResourcesClient.tsx
+4 -4
View File
@@ -4,9 +4,9 @@ import { useState, useEffect, useCallback, useMemo, useRef } from "react";
import { useUrlFilters } from "~/hooks/useUrlFilters.js";
import { useDebounce } from "~/hooks/useDebounce.js";
import Link from "next/link";
import type { Resource, SkillEntry } from "@capakraken/shared";
import { RESOURCE_COLUMNS } from "@capakraken/shared";
import { BlueprintTarget, ResourceType } from "@capakraken/shared";
import type { Resource, SkillEntry } from "@nexus/shared";
import { RESOURCE_COLUMNS } from "@nexus/shared";
import { BlueprintTarget, ResourceType } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { formatMoney } from "~/lib/format.js";
import { generateCsv, downloadCsv } from "~/lib/csv-export.js";
@@ -945,7 +945,7 @@ export function ResourcesClient() {
sortField={sortField}
sortDir={sortDir}
onSort={toggle}
tooltip="Unique employee identifier used across all CapaKraken records."
tooltip="Unique employee identifier used across all Nexus records."
/>
);
case "displayName":
apps/web/src/app/(app)/resources/[id]/page.tsx
+8 -10
View File
@@ -2,24 +2,22 @@ import type { Metadata } from "next";
import { createCaller } from "~/server/trpc.js";
import { ResourceDetail } from "~/components/resources/ResourceDetail.js";
export async function generateMetadata(
{ params }: { params: Promise<{ id: string }> },
): Promise<Metadata> {
export async function generateMetadata({
params,
}: {
params: Promise<{ id: string }>;
}): Promise<Metadata> {
const { id } = await params;
try {
const trpc = await createCaller();
const resource = await trpc.resource.getById({ id });
return { title: `${resource.displayName} — Resources | CapaKraken` };
return { title: `${resource.displayName} — Resources | Nexus` };
} catch {
return { title: "Resource — CapaKraken" };
return { title: "Resource — Nexus" };
}
}
export default async function ResourceDetailPage({
params,
}: {
params: Promise<{ id: string }>;
}) {
export default async function ResourceDetailPage({ params }: { params: Promise<{ id: string }> }) {
const { id } = await params;
return <ResourceDetail resourceId={id} />;
}
apps/web/src/app/(app)/resources/resource-client/types.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import type { Resource } from "@capakraken/shared";
import { ResourceType } from "@capakraken/shared";
import type { Resource } from "@nexus/shared";
import { ResourceType } from "@nexus/shared";
export type ModalState =
| { type: "closed" }
apps/web/src/app/(app)/vacations/my/page.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { MyVacationsClient } from "~/components/vacations/MyVacationsClient.js";
export const metadata = { title: "My Vacations — CapaKraken" };
export const metadata = { title: "My Vacations — Nexus" };
export default function MyVacationsPage() {
return <MyVacationsClient />;
apps/web/src/app/api/cron/auth-anomaly-check/detect.ts
+1 -1
View File
@@ -1,4 +1,4 @@
import { prisma } from "@capakraken/db";
import { prisma } from "@nexus/db";
/** Window over which auth events are analysed. */
const WINDOW_MS = 30 * 60 * 1000; // 30 minutes
apps/web/src/app/api/cron/auth-anomaly-check/route.test.ts
+3 -3
View File
@@ -17,7 +17,7 @@ import { THRESHOLDS } from "./detect.js";
const auditLogFindManyMock = vi.hoisted(() => vi.fn());
const userFindManyMock = vi.hoisted(() => vi.fn());
vi.mock("@capakraken/db", () => ({
vi.mock("@nexus/db", () => ({
prisma: {
auditLog: { findMany: auditLogFindManyMock },
user: { findMany: userFindManyMock },
@@ -27,11 +27,11 @@ vi.mock("@capakraken/db", () => ({
// ─── createNotificationsForUsers mock ─────────────────────────────────────────
const createNotificationsMock = vi.hoisted(() => vi.fn().mockResolvedValue(undefined));
vi.mock("@capakraken/api", () => ({
vi.mock("@nexus/api", () => ({
createNotificationsForUsers: createNotificationsMock,
}));
vi.mock("@capakraken/api/lib/logger", () => ({
vi.mock("@nexus/api/lib/logger", () => ({
logger: { warn: vi.fn(), error: vi.fn(), info: vi.fn() },
}));
apps/web/src/app/api/cron/auth-anomaly-check/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { createNotificationsForUsers } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { createNotificationsForUsers } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { verifyCronSecret } from "~/lib/cron-auth.js";
import { detectAuthAnomalies } from "./detect.js";
apps/web/src/app/api/cron/chargeability-alerts/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { checkChargeabilityAlerts } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { checkChargeabilityAlerts } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { verifyCronSecret } from "~/lib/cron-auth.js";
export const dynamic = "force-dynamic";
apps/web/src/app/api/cron/estimate-reminders/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { checkPendingEstimateReminders } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { checkPendingEstimateReminders } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { verifyCronSecret } from "~/lib/cron-auth.js";
export const dynamic = "force-dynamic";
apps/web/src/app/api/cron/health-check/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { createNotificationsForUsers } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { createNotificationsForUsers } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { createConnection } from "net";
import { verifyCronSecret } from "~/lib/cron-auth.js";
apps/web/src/app/api/cron/public-holidays/route.ts
+7 -7
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { autoImportPublicHolidays } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { autoImportPublicHolidays } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { verifyCronSecret } from "~/lib/cron-auth.js";
export const dynamic = "force-dynamic";
@@ -45,10 +45,10 @@ export async function GET(request: Request) {
skippedExisting: result.skippedExisting,
});
} catch (error) {
logger.error({ error, route: "/api/cron/public-holidays", year }, "Public holiday import cron failed");
return NextResponse.json(
{ ok: false, error: "Internal error" },
{ status: 500 },
logger.error(
{ error, route: "/api/cron/public-holidays", year },
"Public holiday import cron failed",
);
return NextResponse.json({ ok: false, error: "Internal error" }, { status: 500 });
}
}
apps/web/src/app/api/cron/security-audit/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { createNotificationsForUsers } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { createNotificationsForUsers } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { readFileSync } from "fs";
import { join } from "path";
import { verifyCronSecret } from "~/lib/cron-auth.js";
apps/web/src/app/api/cron/weekly-digest/route.ts
+3 -3
View File
@@ -1,7 +1,7 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { sendWeeklyDigest } from "@capakraken/api";
import { logger } from "@capakraken/api/lib/logger";
import { prisma } from "@nexus/db";
import { sendWeeklyDigest } from "@nexus/api";
import { logger } from "@nexus/api/lib/logger";
import { verifyCronSecret } from "~/lib/cron-auth.js";
export const dynamic = "force-dynamic";
apps/web/src/app/api/health/route.ts
+9 -3
View File
@@ -1,5 +1,5 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { prisma } from "@nexus/db";
import { createConnection } from "net";
export const dynamic = "force-dynamic";
@@ -30,8 +30,14 @@ async function checkRedis(): Promise<"ok" | "error"> {
socket.destroy();
resolve(data.toString().includes("PONG") ? "ok" : "error");
});
socket.on("timeout", () => { socket.destroy(); resolve("error"); });
socket.on("error", () => { socket.destroy(); resolve("error"); });
socket.on("timeout", () => {
socket.destroy();
resolve("error");
});
socket.on("error", () => {
socket.destroy();
resolve("error");
});
} catch {
resolve("error");
}
apps/web/src/app/api/perf/route.test.ts
+7 -3
View File
@@ -1,6 +1,6 @@
import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
vi.mock("@capakraken/api/sse", () => ({
vi.mock("@nexus/api/sse", () => ({
eventBus: { subscriberCount: 0 },
}));
@@ -33,7 +33,7 @@ describe("GET /api/perf — security hardening", () => {
const response = await GET(request);
expect(response.status).toBe(200);
const body = await response.json() as { timestamp: string; uptime: unknown; memory: unknown };
const body = (await response.json()) as { timestamp: string; uptime: unknown; memory: unknown };
expect(typeof body.timestamp).toBe("string");
expect(body.uptime).toBeDefined();
expect(body.memory).toBeDefined();
@@ -81,7 +81,11 @@ describe("GET /api/perf — security hardening", () => {
const response = await GET(request);
expect(response.status).toBe(401);
const body = await response.json() as { error?: string; timestamp?: string; memory?: unknown };
const body = (await response.json()) as {
error?: string;
timestamp?: string;
memory?: unknown;
};
expect(body.timestamp).toBeUndefined();
expect(body.memory).toBeUndefined();
});
apps/web/src/app/api/perf/route.ts
+1 -1
View File
@@ -1,5 +1,5 @@
import { NextResponse } from "next/server";
import { eventBus } from "@capakraken/api/sse";
import { eventBus } from "@nexus/api/sse";
import { verifyCronSecret } from "~/lib/cron-auth.js";
export const dynamic = "force-dynamic";
apps/web/src/app/api/ready/route.ts
+3 -6
View File
@@ -1,5 +1,5 @@
import { NextResponse } from "next/server";
import { prisma } from "@capakraken/db";
import { prisma } from "@nexus/db";
import { createConnection } from "net";
export const dynamic = "force-dynamic";
@@ -18,7 +18,7 @@ async function checkPostgres(): Promise<"ok" | "error"> {
/**
* Lightweight Redis PING check using a raw TCP socket.
* Avoids importing ioredis (which is only a dependency of @capakraken/api).
* Avoids importing ioredis (which is only a dependency of @nexus/api).
*/
async function checkRedis(): Promise<"ok" | "error"> {
return new Promise((resolve) => {
@@ -58,10 +58,7 @@ async function checkRedis(): Promise<"ok" | "error"> {
}
export async function GET() {
const [postgres, redis] = await Promise.all([
checkPostgres(),
checkRedis(),
]);
const [postgres, redis] = await Promise.all([checkPostgres(), checkRedis()]);
const allHealthy = postgres === "ok" && redis === "ok";
apps/web/src/app/api/reports/allocations/route.test.ts
+3 -3
View File
@@ -13,7 +13,7 @@ const authMock = vi.hoisted(() => vi.fn());
vi.mock("~/server/auth.js", () => ({ auth: authMock }));
// ─── heavy dep stubs ─────────────────────────────────────────────────────────
vi.mock("@capakraken/db", () => ({
vi.mock("@nexus/db", () => ({
prisma: {
demandRequirement: { findMany: vi.fn().mockResolvedValue([]) },
assignment: { findMany: vi.fn().mockResolvedValue([]) },
@@ -21,11 +21,11 @@ vi.mock("@capakraken/db", () => ({
},
}));
vi.mock("@capakraken/application", () => ({
vi.mock("@nexus/application", () => ({
buildSplitAllocationReadModel: vi.fn().mockReturnValue({ assignments: [] }),
}));
vi.mock("@capakraken/api", () => ({
vi.mock("@nexus/api", () => ({
anonymizeResource: vi.fn((r: unknown) => r),
getAnonymizationDirectory: vi.fn().mockResolvedValue({}),
}));
apps/web/src/app/api/reports/allocations/route.ts
+4 -4
View File
@@ -2,10 +2,10 @@ import { renderToBuffer } from "@react-pdf/renderer";
import { createElement } from "react";
import { NextResponse } from "next/server";
import { z } from "zod";
import { buildSplitAllocationReadModel } from "@capakraken/application";
import { anonymizeResource, getAnonymizationDirectory } from "@capakraken/api";
import { prisma } from "@capakraken/db";
import type { AllocationLike } from "@capakraken/shared";
import { buildSplitAllocationReadModel } from "@nexus/application";
import { anonymizeResource, getAnonymizationDirectory } from "@nexus/api";
import { prisma } from "@nexus/db";
import type { AllocationLike } from "@nexus/shared";
import { auth } from "~/server/auth.js";
import { AllocationReport } from "~/components/reports/AllocationReport.js";
import { createWorkbookArrayBuffer } from "~/lib/workbook-export.js";
apps/web/src/app/api/sse/timeline/route.ts
+6 -6
View File
@@ -1,9 +1,9 @@
import { loadRoleDefaults } from "@capakraken/api";
import { deriveUserSseSubscription, eventBus } from "@capakraken/api/sse";
import { startReminderScheduler } from "@capakraken/api/lib/reminder-scheduler";
import { prisma } from "@capakraken/db";
import type { SystemRole } from "@capakraken/shared";
import { SSE_EVENT_TYPES, type PermissionOverrides } from "@capakraken/shared";
import { loadRoleDefaults } from "@nexus/api";
import { deriveUserSseSubscription, eventBus } from "@nexus/api/sse";
import { startReminderScheduler } from "@nexus/api/lib/reminder-scheduler";
import { prisma } from "@nexus/db";
import type { SystemRole } from "@nexus/shared";
import { SSE_EVENT_TYPES, type PermissionOverrides } from "@nexus/shared";
import { auth } from "~/server/auth.js";
export const dynamic = "force-dynamic";
apps/web/src/app/api/trpc/[trpc]/route.ts
+3 -3
View File
@@ -1,6 +1,6 @@
import { createTRPCContext, loadRoleDefaults } from "@capakraken/api";
import { appRouter } from "@capakraken/api/router";
import { prisma } from "@capakraken/db";
import { createTRPCContext, loadRoleDefaults } from "@nexus/api";
import { appRouter } from "@nexus/api/router";
import { prisma } from "@nexus/db";
import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import { getToken } from "next-auth/jwt";
import type { NextRequest } from "next/server";
apps/web/src/app/auth/reset-password/[token]/page.tsx
+1 -1
View File
@@ -2,7 +2,7 @@
import { use, useState } from "react";
import { useRouter } from "next/navigation";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@capakraken/shared";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
export default function ResetPasswordPage({ params }: { params: Promise<{ token: string }> }) {
apps/web/src/app/auth/signin/page.tsx
+2 -2
View File
@@ -98,7 +98,7 @@ export default function SignInPage() {
<div className="hidden rounded-[2rem] border border-white/70 bg-white/75 p-10 shadow-2xl backdrop-blur lg:flex lg:flex-col lg:justify-between dark:border-slate-800 dark:bg-slate-950/60">
<div>
<span className="inline-flex rounded-full border border-brand-200 bg-brand-50 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.18em] text-brand-700 dark:border-brand-900/50 dark:bg-brand-900/20 dark:text-brand-300">
CapaKraken Control Center
Nexus Control Center
</span>
<h1 className="mt-6 font-display text-5xl font-semibold leading-tight text-gray-900 dark:text-gray-50">
Resource planning that stays readable under pressure.
@@ -137,7 +137,7 @@ export default function SignInPage() {
Welcome Back
</p>
<h2 className="mt-3 font-display text-4xl font-semibold text-gray-900 dark:text-gray-50">
{mfaRequired ? "Two-Factor Authentication" : "Sign in to CapaKraken"}
{mfaRequired ? "Two-Factor Authentication" : "Sign in to Nexus"}
</h2>
<p className="mt-2 text-sm text-gray-500">
{mfaRequired
apps/web/src/app/invite/[token]/page.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import { useState, use } from "react";
import { useRouter } from "next/navigation";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@capakraken/shared";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
export default function AcceptInvitePage({ params }: { params: Promise<{ token: string }> }) {
@@ -91,7 +91,7 @@ export default function AcceptInvitePage({ params }: { params: Promise<{ token:
<div className="mb-6">
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Accept invitation</h1>
<p className="mt-1 text-sm text-gray-500">
You have been invited as <strong>{invite.role}</strong> to CapaKraken. Set a password to
You have been invited as <strong>{invite.role}</strong> to Nexus. Set a password to
activate your account (<span className="font-medium">{invite.email}</span>).
</p>
</div>
apps/web/src/app/layout.tsx
+51 -10
View File
@@ -19,8 +19,8 @@ const displayFont = Manrope({
});
export const metadata: Metadata = {
metadataBase: new URL("https://capakraken.hartmut-noerenberg.com"),
title: "CapaKraken — Resource & Capacity Planning",
metadataBase: new URL("https://nexus.hartmut-noerenberg.com"),
title: "Nexus — Resource & Capacity Planning",
description: "Interactive resource planning and project staffing tool",
manifest: "/manifest.json",
icons: {
@@ -35,17 +35,17 @@ export const metadata: Metadata = {
appleWebApp: {
capable: true,
statusBarStyle: "default",
title: "CapaKraken",
title: "Nexus",
},
openGraph: {
title: "CapaKraken — Resource & Capacity Planning",
title: "Nexus — Resource & Capacity Planning",
description: "Estimates, staffing, chargeability, and timelines in one workspace.",
images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "CapaKraken Logo" }],
images: [{ url: "/og-image.png", width: 1024, height: 1024, alt: "Nexus Logo" }],
type: "website",
},
twitter: {
card: "summary_large_image",
title: "CapaKraken — Resource & Capacity Planning",
title: "Nexus — Resource & Capacity Planning",
description: "Estimates, staffing, chargeability, and timelines in one workspace.",
images: ["/og-image.png"],
},
@@ -60,15 +60,56 @@ export default async function RootLayout({ children }: { children: React.ReactNo
return (
<html lang="en" suppressHydrationWarning>
<head>
<script nonce={nonce} suppressHydrationWarning dangerouslySetInnerHTML={{__html: `
<script
nonce={nonce}
suppressHydrationWarning
dangerouslySetInnerHTML={{
__html: `
try {
var p = JSON.parse(localStorage.getItem('capakraken_theme') || '{}');
if (!localStorage.getItem('nexus_migrated_v1')) {
var underscoreKeys = ['theme','sidebar_collapsed','mfa_prompt_snoozed_until','prefs','pwa_dismiss'];
underscoreKeys.forEach(function(k){
var oldK = 'capakraken_' + k, newK = 'nexus_' + k;
var v = localStorage.getItem(oldK);
if (v !== null && localStorage.getItem(newK) === null) localStorage.setItem(newK, v);
localStorage.removeItem(oldK);
});
var dashKeys = [];
for (var i = 0; i < localStorage.length; i++) {
var lk = localStorage.key(i);
if (lk && lk.indexOf('capakraken_dashboard_v1_') === 0) dashKeys.push(lk);
}
dashKeys.forEach(function(lk){
var newLk = 'nexus_' + lk.substring('capakraken_'.length);
var v = localStorage.getItem(lk);
if (v !== null && localStorage.getItem(newLk) === null) localStorage.setItem(newLk, v);
localStorage.removeItem(lk);
});
['capakraken-chat-messages','capakraken-chat-conversation-id'].forEach(function(lk){
var newLk = 'nexus-' + lk.substring('capakraken-'.length);
var v = localStorage.getItem(lk);
if (v !== null && localStorage.getItem(newLk) === null) localStorage.setItem(newLk, v);
localStorage.removeItem(lk);
});
var av = localStorage.getItem('capakraken:allocations:viewMode');
if (av !== null && localStorage.getItem('nexus:allocations:viewMode') === null) {
localStorage.setItem('nexus:allocations:viewMode', av);
}
localStorage.removeItem('capakraken:allocations:viewMode');
localStorage.setItem('nexus_migrated_v1', '1');
if (typeof caches !== 'undefined') caches.delete('capakraken-v2');
}
var p = JSON.parse(localStorage.getItem('nexus_theme') || '{}');
if (p.mode === 'dark') document.documentElement.classList.add('dark');
if (p.accent) document.documentElement.setAttribute('data-accent', p.accent);
} catch(e) {}
`}} />
`,
}}
/>
</head>
<body className={`${uiFont.variable} ${displayFont.variable} min-h-screen bg-gray-50 font-sans antialiased`}>
<body
className={`${uiFont.variable} ${displayFont.variable} min-h-screen bg-gray-50 font-sans antialiased`}
>
<TRPCProvider>{children}</TRPCProvider>
<ServiceWorkerRegistration />
<InstallPrompt />
apps/web/src/app/setup/SetupClient.tsx
+2 -2
View File
@@ -2,7 +2,7 @@
import { useState, useTransition } from "react";
import { useRouter } from "next/navigation";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@capakraken/shared";
import { PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@nexus/shared";
import { createFirstAdmin } from "./actions.js";
export function SetupClient() {
@@ -76,7 +76,7 @@ export function SetupClient() {
<div className="mb-6">
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">First-run setup</h1>
<p className="mt-1 text-sm text-gray-500">
Create the initial administrator account for CapaKraken.
Create the initial administrator account for Nexus.
</p>
</div>
apps/web/src/app/setup/actions.ts
+3 -7
View File
@@ -1,11 +1,7 @@
"use server";
import { prisma } from "@capakraken/db";
import { SystemRole } from "@capakraken/db";
import {
PASSWORD_MAX_LENGTH,
PASSWORD_MIN_LENGTH,
PASSWORD_POLICY_MESSAGE,
} from "@capakraken/shared";
import { prisma } from "@nexus/db";
import { SystemRole } from "@nexus/db";
import { PASSWORD_MAX_LENGTH, PASSWORD_MIN_LENGTH, PASSWORD_POLICY_MESSAGE } from "@nexus/shared";
export type SetupResult =
| { success: true }
apps/web/src/app/setup/page.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import { redirect } from "next/navigation";
import { prisma } from "@capakraken/db";
import { prisma } from "@nexus/db";
import { SetupClient } from "./SetupClient.js";
export default async function SetupPage() {
apps/web/src/components/admin/BatchSkillImport.tsx
+98 -30
View File
@@ -4,11 +4,11 @@ import { useState, useRef } from "react";
import { trpc } from "~/lib/trpc/client.js";
import { parseSkillMatrixWorkbook, matchRoleName } from "~/lib/skillMatrixParser.js";
import { assertSpreadsheetFile } from "~/lib/excel.js";
import type { SkillEntry } from "@capakraken/shared";
import type { SkillEntry } from "@nexus/shared";
interface ParsedEntry {
fileName: string;
candidateEid: string; // guessed from filename (no extension, lowercased)
candidateEid: string; // guessed from filename (no extension, lowercased)
selectedEid: string;
skills: SkillEntry[];
employeeInfo: Record<string, string>;
@@ -30,8 +30,14 @@ export function BatchSkillImport() {
);
const batchMutation = trpc.resource.batchImportSkillMatrices.useMutation({
onSuccess: (data) => { setResult(data); setSubmitting(false); },
onError: (err) => { setError(err.message); setSubmitting(false); },
onSuccess: (data) => {
setResult(data);
setSubmitting(false);
},
onError: (err) => {
setError(err.message);
setSubmitting(false);
},
});
async function handleFiles(e: React.ChangeEvent<HTMLInputElement>) {
@@ -72,7 +78,8 @@ export function BatchSkillImport() {
const empInfo: Record<string, string> = {};
if (roleId) empInfo["roleId"] = roleId;
if (result.employeeInfo.portfolioUrl) empInfo["portfolioUrl"] = result.employeeInfo.portfolioUrl;
if (result.employeeInfo.portfolioUrl)
empInfo["portfolioUrl"] = result.employeeInfo.portfolioUrl;
return {
fileName: file.name,
@@ -124,7 +131,9 @@ export function BatchSkillImport() {
skills: e.skills,
employeeInfo: {
...(e.employeeInfo["roleId"] ? { roleId: e.employeeInfo["roleId"] } : {}),
...(e.employeeInfo["portfolioUrl"] ? { portfolioUrl: e.employeeInfo["portfolioUrl"] } : {}),
...(e.employeeInfo["portfolioUrl"]
? { portfolioUrl: e.employeeInfo["portfolioUrl"] }
: {}),
},
})),
});
@@ -138,7 +147,9 @@ export function BatchSkillImport() {
return (
<div className="p-6 max-w-4xl">
<div className="mb-6">
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">Batch Skill Matrix Import</h1>
<h1 className="text-2xl font-bold text-gray-900 dark:text-gray-100">
Batch Skill Matrix Import
</h1>
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
Upload multiple skill matrix files at once. Files are matched to resources by filename.
</p>
@@ -149,12 +160,33 @@ export function BatchSkillImport() {
className="border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-xl p-8 text-center cursor-pointer hover:border-brand-400 transition-colors mb-6 bg-white dark:bg-gray-800"
onClick={() => fileRef.current?.click()}
>
<svg className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
<svg
className="w-10 h-10 text-gray-300 dark:text-gray-600 mx-auto mb-3"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={1.5}
d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
/>
</svg>
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">Click to select multiple .xlsx files</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">Name files after resource EID or display name for automatic matching</p>
<input ref={fileRef} type="file" accept=".xlsx" multiple className="hidden" onChange={handleFiles} />
<p className="text-sm font-medium text-gray-700 dark:text-gray-300">
Click to select multiple .xlsx files
</p>
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
Name files after resource EID or display name for automatic matching
</p>
<input
ref={fileRef}
type="file"
accept=".xlsx"
multiple
className="hidden"
onChange={handleFiles}
/>
</div>
{/* Summary */}
@@ -166,7 +198,9 @@ export function BatchSkillImport() {
</div>
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-lg px-4 py-2 text-sm">
<span className="font-semibold text-yellow-700 dark:text-yellow-400">{unmatched}</span>
<span className="text-yellow-600 dark:text-yellow-400 ml-1">unmatched (select EID manually)</span>
<span className="text-yellow-600 dark:text-yellow-400 ml-1">
unmatched (select EID manually)
</span>
</div>
</div>
)}
@@ -177,20 +211,39 @@ export function BatchSkillImport() {
<table className="w-full text-sm">
<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 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">File</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Resource EID</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Skills</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Role Match</th>
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">Status</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
File
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
Resource EID
</th>
<th className="px-4 py-3 text-right text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
Skills
</th>
<th className="px-4 py-3 text-left text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
Role Match
</th>
<th className="px-4 py-3 text-center text-xs font-medium text-gray-500 dark:text-gray-400 uppercase">
Status
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-700">
{entries.map((entry, idx) => (
<tr key={idx} className={entry.status === "unmatched" ? "bg-yellow-50 dark:bg-yellow-900/10" : ""}>
<td className="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 font-mono">{entry.fileName}</td>
<tr
key={idx}
className={
entry.status === "unmatched" ? "bg-yellow-50 dark:bg-yellow-900/10" : ""
}
>
<td className="px-4 py-3 text-xs text-gray-600 dark:text-gray-400 font-mono">
{entry.fileName}
</td>
<td className="px-4 py-3">
{entry.status === "matched" ? (
<span className="font-mono text-sm text-gray-800 dark:text-gray-100">{entry.selectedEid}</span>
<span className="font-mono text-sm text-gray-800 dark:text-gray-100">
{entry.selectedEid}
</span>
) : (
<select
className="w-full px-2 py-1.5 border border-yellow-300 dark:border-yellow-600 rounded text-sm bg-white dark:bg-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-500"
@@ -199,17 +252,27 @@ export function BatchSkillImport() {
>
<option value="">— Select resource —</option>
{resourceList.map((r) => (
<option key={r.eid} value={r.eid}>{r.displayName} ({r.eid})</option>
<option key={r.eid} value={r.eid}>
{r.displayName} ({r.eid})
</option>
))}
</select>
)}
</td>
<td className="px-4 py-3 text-right text-gray-700 dark:text-gray-300">{entry.skills.length}</td>
<td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">{entry.matchedRoleName ?? "—"}</td>
<td className="px-4 py-3 text-right text-gray-700 dark:text-gray-300">
{entry.skills.length}
</td>
<td className="px-4 py-3 text-xs text-gray-500 dark:text-gray-400">
{entry.matchedRoleName ?? "—"}
</td>
<td className="px-4 py-3 text-center">
<span className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${
entry.status === "matched" ? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400" : "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
}`}>
<span
className={`inline-block px-2 py-0.5 text-xs rounded-full font-medium ${
entry.status === "matched"
? "bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400"
: "bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-400"
}`}
>
{entry.status}
</span>
</td>
@@ -221,12 +284,15 @@ export function BatchSkillImport() {
)}
{error && (
<div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">{error}</div>
<div className="mb-4 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-700 px-4 py-3 text-sm text-red-700 dark:text-red-400">
{error}
</div>
)}
{result && (
<div className="mb-4 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-700 px-4 py-3 text-sm text-green-700 dark:text-green-400">
Import complete: <strong>{result.updated}</strong> updated, <strong>{result.notFound}</strong> not found.
Import complete: <strong>{result.updated}</strong> updated,{" "}
<strong>{result.notFound}</strong> not found.
</div>
)}
@@ -237,7 +303,9 @@ export function BatchSkillImport() {
disabled={submitting || matched === 0}
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
>
{submitting ? "Importing…" : `Import ${entries.filter((e) => e.selectedEid && e.skills.length > 0).length} Files`}
{submitting
? "Importing…"
: `Import ${entries.filter((e) => e.selectedEid && e.skills.length > 0).length} Files`}
</button>
)}
</div>
apps/web/src/components/admin/InviteUserModal.tsx
+8 -3
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { SystemRole } from "@capakraken/shared";
import { SystemRole } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
@@ -51,7 +51,10 @@ export function InviteUserModal({ open, onClose }: InviteUserModalProps) {
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setError(null);
if (!email) { setError("Email is required."); return; }
if (!email) {
setError("Email is required.");
return;
}
await inviteMutation.mutateAsync({ email, role });
}
@@ -96,7 +99,9 @@ export function InviteUserModal({ open, onClose }: InviteUserModalProps) {
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 px-3 py-2 text-sm text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-brand-400"
>
{ROLE_OPTIONS.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>
<option key={opt.value} value={opt.value}>
{opt.label}
</option>
))}
</select>
</div>
apps/web/src/components/admin/SystemRolesClient.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import { PermissionKey } from "@capakraken/shared";
import { PermissionKey } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
apps/web/src/components/admin/SystemSettingsClient.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
"use client";
import { DEFAULT_OPENAI_MODEL } from "@capakraken/shared";
import { DEFAULT_OPENAI_MODEL } from "@nexus/shared";
import { useEffect, useState } from "react";
import { trpc } from "~/lib/trpc/client.js";
import { AiProviderPanel, GenerationSettingsPanel } from "./system-settings/AiSettingsPanels.js";
apps/web/src/components/admin/UserCreateModal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { PASSWORD_MIN_LENGTH, SystemRole } from "@capakraken/shared";
import { PASSWORD_MIN_LENGTH, SystemRole } from "@nexus/shared";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
const SYSTEM_ROLE_LABELS: Record<SystemRole, string> = {
apps/web/src/components/admin/UserEditModal.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import { SystemRole, PermissionKey, type PermissionOverrides } from "@capakraken/shared";
import { SystemRole, PermissionKey, type PermissionOverrides } from "@nexus/shared";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
const ALL_PERMISSION_KEYS = Object.values(PermissionKey);
apps/web/src/components/admin/UsersClient.tsx
+2 -2
View File
@@ -1,13 +1,13 @@
"use client";
import { useState, useMemo } from "react";
import type { PermissionKey } from "@capakraken/shared";
import type { PermissionKey } from "@nexus/shared";
import {
SystemRole,
ROLE_DEFAULT_PERMISSIONS,
MILLISECONDS_PER_DAY,
type PermissionOverrides,
} from "@capakraken/shared";
} from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
import { InviteUserModal } from "./InviteUserModal.js";
apps/web/src/components/admin/WebhooksClient.tsx
+8 -26
View File
@@ -176,7 +176,7 @@ export function WebhooksClient() {
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">Webhooks</h1>
<p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
Configure outbound webhooks to notify external services about events in CapaKraken.
Configure outbound webhooks to notify external services about events in Nexus.
</p>
</div>
<button className={PRIMARY_BUTTON} onClick={openCreateModal}>
@@ -194,10 +194,7 @@ export function WebhooksClient() {
) : (
<div className="space-y-3">
{webhooks.map((wh) => (
<div
key={wh.id}
className="app-surface flex items-center gap-4 p-4"
>
<div key={wh.id} className="app-surface flex items-center gap-4 p-4">
{/* Active indicator */}
<div
className={`h-3 w-3 shrink-0 rounded-full ${
@@ -209,9 +206,7 @@ export function WebhooksClient() {
{/* Info */}
<div className="min-w-0 flex-1">
<div className="flex items-center gap-2">
<span className="font-medium text-gray-900 dark:text-white">
{wh.name}
</span>
<span className="font-medium text-gray-900 dark:text-white">{wh.name}</span>
{wh.url.includes("hooks.slack.com") && (
<span className="rounded bg-purple-100 px-1.5 py-0.5 text-xs font-medium text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">
Slack
@@ -257,17 +252,12 @@ export function WebhooksClient() {
</button>
<button
className={SECONDARY_BUTTON}
onClick={() =>
handleToggleActive(wh.id, wh.isActive)
}
onClick={() => handleToggleActive(wh.id, wh.isActive)}
disabled={updateMut.isPending}
>
{wh.isActive ? "Disable" : "Enable"}
</button>
<button
className={SECONDARY_BUTTON}
onClick={() => openEditModal(wh)}
>
<button className={SECONDARY_BUTTON} onClick={() => openEditModal(wh)}>
Edit
</button>
{deleteConfirmId === wh.id ? (
@@ -282,18 +272,12 @@ export function WebhooksClient() {
>
Confirm
</button>
<button
className={SECONDARY_BUTTON}
onClick={() => setDeleteConfirmId(null)}
>
<button className={SECONDARY_BUTTON} onClick={() => setDeleteConfirmId(null)}>
Cancel
</button>
</div>
) : (
<button
className={SECONDARY_BUTTON}
onClick={() => setDeleteConfirmId(wh.id)}
>
<button className={SECONDARY_BUTTON} onClick={() => setDeleteConfirmId(wh.id)}>
Delete
</button>
)}
@@ -335,9 +319,7 @@ export function WebhooksClient() {
{/* Secret */}
<div>
<label className={LABEL_CLASS}>
Secret (optional)
</label>
<label className={LABEL_CLASS}>Secret (optional)</label>
<input
className={INPUT_CLASS}
type="password"
apps/web/src/components/admin/system-settings/AiSettingsPanels.tsx
+7 -15
View File
@@ -1,4 +1,4 @@
import { DEFAULT_OPENAI_MODEL } from "@capakraken/shared";
import { DEFAULT_OPENAI_MODEL } from "@nexus/shared";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import {
INPUT_CLASS,
@@ -123,7 +123,9 @@ export function AiProviderPanel({
</p>
) : null}
{urlParsedType === "completions" ? (
<p className="text-xs text-green-700 dark:text-green-400">All fields filled from URL.</p>
<p className="text-xs text-green-700 dark:text-green-400">
All fields filled from URL.
</p>
) : null}
</div>
@@ -154,7 +156,7 @@ export function AiProviderPanel({
id="ai-model"
type="text"
className={INPUT_CLASS}
placeholder={provider === "azure" ? "capakraken-gpt-5-4" : DEFAULT_OPENAI_MODEL}
placeholder={provider === "azure" ? "nexus-gpt-5-4" : DEFAULT_OPENAI_MODEL}
value={model}
onChange={(event) => onModelChange(event.target.value)}
/>
@@ -223,12 +225,7 @@ export function AiProviderPanel({
) : null}
<div className="flex items-center gap-3 pt-2">
<button
type="button"
onClick={onSave}
disabled={isSaving}
className={PRIMARY_BUTTON_CLASS}
>
<button type="button" onClick={onSave} disabled={isSaving} className={PRIMARY_BUTTON_CLASS}>
{isSaving ? "Saving…" : "Save Settings"}
</button>
<button
@@ -389,12 +386,7 @@ export function GenerationSettingsPanel({
</div>
<div className="flex items-center gap-3 pt-1">
<button
type="button"
onClick={onSave}
disabled={isSaving}
className={PRIMARY_BUTTON_CLASS}
>
<button type="button" onClick={onSave} disabled={isSaving} className={PRIMARY_BUTTON_CLASS}>
{isSaving ? "Saving…" : "Save Settings"}
</button>
{saved ? (
apps/web/src/components/admin/system-settings/SmtpSettingsPanel.tsx
+1 -1
View File
@@ -137,7 +137,7 @@ export function SmtpSettingsPanel({ initialSettings, onSettingsSaved }: SmtpSett
className={INPUT_CLASS}
value={smtpFrom}
onChange={(event) => setSmtpFrom(event.target.value)}
placeholder="noreply@capakraken.app"
placeholder="noreply@nexus.app"
/>
</div>
<div className={`${CHECKBOX_ROW_CLASS} pt-0 md:mt-[1.65rem]`}>
apps/web/src/components/allocations/AllocationBatchDialogs.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import type { AllocationWithDetails, AllocationStatus } from "@capakraken/shared";
import type { AllocationWithDetails, AllocationStatus } from "@nexus/shared";
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
import { ConfirmDialog } from "~/components/ui/ConfirmDialog.js";
import { BatchActionBar } from "~/components/ui/BatchActionBar.js";
apps/web/src/components/allocations/AllocationGroupedBody.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
import type { AllocationWithDetails, ColumnDef } from "@nexus/shared";
import type { CollapsedAllocationGroups } from "./allocationGroupState.js";
import { formatDate } from "~/lib/format.js";
import { AllocationRow } from "./AllocationRow.js";
apps/web/src/components/allocations/AllocationModal.tsx
+132 -65
View File
@@ -4,8 +4,8 @@ import { useState, useEffect, useMemo } from "react";
import { useDebounce } from "~/hooks/useDebounce.js";
import { AnimatedModal } from "~/components/ui/AnimatedModal.js";
import { useInvalidatePlanningViews } from "~/hooks/useInvalidatePlanningViews.js";
import { AllocationStatus } from "@capakraken/shared";
import type { AllocationWithDetails, RecurrencePattern } from "@capakraken/shared";
import { AllocationStatus } from "@nexus/shared";
import type { AllocationWithDetails, RecurrencePattern } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
import { toDateInputValue } from "~/lib/format.js";
@@ -26,7 +26,8 @@ interface AllocationModalProps {
export function AllocationModal({ allocation, onClose, onSuccess }: AllocationModalProps) {
const isEditing = Boolean(allocation);
const initialEntryKind: EntryKind = allocation && !allocation.resourceId ? "demand" : "assignment";
const initialEntryKind: EntryKind =
allocation && !allocation.resourceId ? "demand" : "assignment";
const [entryKind, setEntryKind] = useState<EntryKind>(initialEntryKind);
const isDemandEntry = entryKind === "demand";
@@ -57,14 +58,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{ isActive: true, limit: 500 },
{ staleTime: 60_000 },
);
const { data: projects } = trpc.project.list.useQuery(
{ limit: 500 },
{ staleTime: 60_000 },
);
const { data: rolesData } = trpc.role.list.useQuery(
{ isActive: true },
{ staleTime: 60_000 },
);
const { data: projects } = trpc.project.list.useQuery({ limit: 500 }, { staleTime: 60_000 });
const { data: rolesData } = trpc.role.list.useQuery({ isActive: true }, { staleTime: 60_000 });
// Fetch existing allocations for the selected resource+project to detect overlaps
const shouldCheckOverlap = !isDemandEntry && !!resourceId && !!projectId;
@@ -85,11 +80,15 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
const shouldCheckConflicts =
!isDemandEntry &&
!!debouncedResourceId &&
conflictCheckStart !== null && !isNaN(conflictCheckStart.getTime()) &&
conflictCheckEnd !== null && !isNaN(conflictCheckEnd.getTime()) &&
conflictCheckStart !== null &&
!isNaN(conflictCheckStart.getTime()) &&
conflictCheckEnd !== null &&
!isNaN(conflictCheckEnd.getTime()) &&
debouncedHoursPerDay > 0;
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const { data: conflictResult, isFetching: checkingConflicts } = (trpc.allocation.checkConflicts.useQuery as any)(
const { data: conflictResult, isFetching: checkingConflicts } = (
trpc.allocation.checkConflicts.useQuery as any
)(
{
resourceId: debouncedResourceId,
startDate: conflictCheckStart,
@@ -98,7 +97,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
excludeAssignmentId: isEditing && allocation?.id ? allocation.id : undefined,
},
{ enabled: shouldCheckConflicts, staleTime: 15_000 },
) as { data: import("@capakraken/shared").AllocationConflictCheckResult | undefined; isFetching: boolean };
) as {
data: import("@nexus/shared").AllocationConflictCheckResult | undefined;
isFetching: boolean;
};
const overlapWarning = useMemo(() => {
if (!shouldCheckOverlap || !existingAllocations || !startDate || !endDate) return null;
@@ -106,7 +108,17 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
const formEnd = new Date(endDate);
if (isNaN(formStart.getTime()) || isNaN(formEnd.getTime())) return null;
const allocList = (existingAllocations as { allocations?: Array<{ id: string; resourceId?: string | null; startDate: string | Date; endDate: string | Date }> }).allocations ?? [];
const allocList =
(
existingAllocations as {
allocations?: Array<{
id: string;
resourceId?: string | null;
startDate: string | Date;
endDate: string | Date;
}>;
}
).allocations ?? [];
for (const existing of allocList) {
// Skip the allocation being edited
if (isEditing && allocation && existing.id === allocation.id) continue;
@@ -121,7 +133,15 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
}
}
return null;
}, [shouldCheckOverlap, existingAllocations, startDate, endDate, isEditing, allocation, resourceId]);
}, [
shouldCheckOverlap,
existingAllocations,
startDate,
endDate,
isEditing,
allocation,
resourceId,
]);
const invalidatePlanningViews = useInvalidatePlanningViews();
@@ -185,7 +205,17 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
useEffect(() => {
setServerError(null);
setOverbookingAcknowledged(false);
}, [resourceId, projectId, roleId, roleFreeText, startDate, endDate, hoursPerDay, status, entryKind]);
}, [
resourceId,
projectId,
roleId,
roleFreeText,
startDate,
endDate,
hoursPerDay,
status,
entryKind,
]);
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
@@ -222,7 +252,7 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
// Determine role string from roleId if set
const rolesList = rolesData ?? [];
const selectedRole = rolesList.find((r) => r.id === roleId);
const roleString = selectedRole ? selectedRole.name : (roleFreeText || undefined);
const roleString = selectedRole ? selectedRole.name : roleFreeText || undefined;
const percentage = Math.min(100, Math.round((hoursPerDay / 8) * 100));
@@ -230,12 +260,14 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
updateMutation.mutate({
id: getPlanningEntryMutationId(allocation),
data: {
resourceId: isDemandEntry ? undefined : (resourceId || undefined),
resourceId: isDemandEntry ? undefined : resourceId || undefined,
projectId,
role: roleString,
roleId: roleId || undefined,
headcount: isDemandEntry ? headcount : 1,
...(isDemandEntry && budgetEur ? { budgetCents: Math.round(parseFloat(budgetEur) * 100) } : {}),
...(isDemandEntry && budgetEur
? { budgetCents: Math.round(parseFloat(budgetEur) * 100) }
: {}),
startDate: start,
endDate: end,
hoursPerDay,
@@ -279,18 +311,22 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
"w-full 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 dark:bg-gray-900 dark:text-gray-100";
const labelClass = "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1";
const resourceList = (resources?.resources ?? []) as Array<{ id: string; displayName: string; eid: string }>;
const projectList = (projects?.projects ?? []) as Array<{ id: string; name: string; shortCode: string }>;
const resourceList = (resources?.resources ?? []) as Array<{
id: string;
displayName: string;
eid: string;
}>;
const projectList = (projects?.projects ?? []) as Array<{
id: string;
name: string;
shortCode: string;
}>;
const rolesList = (rolesData ?? []) as Array<{ id: string; name: string; color: string | null }>;
const entryLabel = isDemandEntry ? "Open Demand" : "Assignment";
return (
<AnimatedModal open={true} onClose={onClose} maxWidth="max-w-xl" className="mx-4">
<div
role="dialog"
aria-modal="true"
data-testid="allocation-modal"
>
<div role="dialog" aria-modal="true" data-testid="allocation-modal">
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
<h2 className="text-lg font-semibold text-gray-900 dark:text-gray-100">
@@ -333,7 +369,9 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{isDemandEntry && (
<div className="flex items-center gap-3">
<div className="flex items-center gap-2">
<label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">Headcount:</label>
<label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
Headcount:
</label>
<input
type="number"
value={headcount}
@@ -344,7 +382,9 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
/>
</div>
<div className="flex items-center gap-2">
<label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">Budget (EUR):</label>
<label className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap">
Budget (EUR):
</label>
<input
type="number"
value={budgetEur}
@@ -363,7 +403,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{!isDemandEntry && (
<div>
<label htmlFor="modal-resource" className={labelClass}>
Resource <span className="text-red-500">*</span><InfoTooltip content="The person to assign. Their LCR determines the daily cost of this allocation." />
Resource <span className="text-red-500">*</span>
<InfoTooltip content="The person to assign. Their LCR determines the daily cost of this allocation." />
</label>
<select
id="modal-resource"
@@ -385,7 +426,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{/* Project */}
<div>
<label htmlFor="modal-project" className={labelClass}>
Project <span className="text-red-500">*</span><InfoTooltip content="The project this time block is allocated to. Costs roll up to the project budget." />
Project <span className="text-red-500">*</span>
<InfoTooltip content="The project this time block is allocated to. Costs roll up to the project budget." />
</label>
<select
id="modal-project"
@@ -405,7 +447,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{/* Role */}
<div>
<label htmlFor="modal-role" className={labelClass}>Role<InfoTooltip content="Role for this allocation. Pick a predefined role or type a custom one." /></label>
<label htmlFor="modal-role" className={labelClass}>
Role
<InfoTooltip content="Role for this allocation. Pick a predefined role or type a custom one." />
</label>
<select
id="modal-role"
value={roleId}
@@ -434,35 +479,43 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
{/* Dates */}
<div>
<div className="flex items-center justify-between mb-1">
<span className={labelClass}>Date Range <span className="text-red-500">*</span></span>
<DateRangePresets onSelect={(s, e) => { setStartDate(s); setEndDate(e); }} />
<span className={labelClass}>
Date Range <span className="text-red-500">*</span>
</span>
<DateRangePresets
onSelect={(s, e) => {
setStartDate(s);
setEndDate(e);
}}
/>
</div>
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="modal-start" className={labelClass}>
Start Date <InfoTooltip content="First day of this allocation period (inclusive)." />
</label>
<DateInput
id="modal-start"
value={startDate}
onChange={setStartDate}
className={inputClass}
required
/>
</div>
<div>
<label htmlFor="modal-end" className={labelClass}>
End Date <InfoTooltip content="Last day of this allocation period (inclusive)." />
</label>
<DateInput
id="modal-end"
value={endDate}
onChange={setEndDate}
min={startDate}
className={inputClass}
required
/>
</div>
<div>
<label htmlFor="modal-start" className={labelClass}>
Start Date{" "}
<InfoTooltip content="First day of this allocation period (inclusive)." />
</label>
<DateInput
id="modal-start"
value={startDate}
onChange={setStartDate}
className={inputClass}
required
/>
</div>
<div>
<label htmlFor="modal-end" className={labelClass}>
End Date <InfoTooltip content="Last day of this allocation period (inclusive)." />
</label>
<DateInput
id="modal-end"
value={endDate}
onChange={setEndDate}
min={startDate}
className={inputClass}
required
/>
</div>
</div>
</div>
@@ -470,7 +523,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
<div className="grid grid-cols-2 gap-4">
<div>
<label htmlFor="modal-hours" className={labelClass}>
Hours / Day<InfoTooltip content="Working hours per day. Total cost = LCR x hours/day x working days. Vacation days are excluded." />
Hours / Day
<InfoTooltip content="Working hours per day. Total cost = LCR x hours/day x working days. Vacation days are excluded." />
</label>
<input
id="modal-hours"
@@ -485,7 +539,8 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
</div>
<div>
<label htmlFor="modal-status" className={labelClass}>
Status<InfoTooltip content="PROPOSED = draft/request · CONFIRMED = approved · ACTIVE = in progress · COMPLETED = done · CANCELLED = removed." />
Status
<InfoTooltip content="PROPOSED = draft/request · CONFIRMED = approved · ACTIVE = in progress · COMPLETED = done · CANCELLED = removed." />
</label>
<select
id="modal-status"
@@ -514,7 +569,10 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
}}
className="rounded border-gray-300 dark:border-gray-600"
/>
<span className="font-medium text-gray-700 dark:text-gray-300">Recurring schedule</span><InfoTooltip content="Enable to repeat this allocation on specific days (e.g. every Monday/Wednesday). Hours per day applies on active days only." />
<span className="font-medium text-gray-700 dark:text-gray-300">
Recurring schedule
</span>
<InfoTooltip content="Enable to repeat this allocation on specific days (e.g. every Monday/Wednesday). Hours per day applies on active days only." />
</label>
{isRecurring && (
<div className="mt-2">
@@ -548,7 +606,12 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
)}
{!conflictResult && checkingConflicts && (
<ConflictWarningPanel
result={{ isOverbooking: false, overbooking: null, vacationOverlap: [], hasVacationOverlap: false }}
result={{
isOverbooking: false,
overbooking: null,
vacationOverlap: [],
hasVacationOverlap: false,
}}
isLoading={true}
acknowledged={false}
onAcknowledge={() => {}}
@@ -568,7 +631,11 @@ export function AllocationModal({ allocation, onClose, onSuccess }: AllocationMo
<button
type="submit"
disabled={isPending || hasUnacknowledgedOverbooking}
title={hasUnacknowledgedOverbooking ? "Acknowledge the overbooking warning above to proceed" : undefined}
title={
hasUnacknowledgedOverbooking
? "Acknowledge the overbooking warning above to proceed"
: undefined
}
className="px-4 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-medium disabled:opacity-50"
>
{isPending ? "Saving…" : "Save"}
apps/web/src/components/allocations/AllocationRow.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import type { AllocationWithDetails, ColumnDef } from "@capakraken/shared";
import type { AllocationWithDetails, ColumnDef } from "@nexus/shared";
import { ALLOCATION_STATUS_BADGE as STATUS_BADGE } from "~/lib/status-styles.js";
const STATUS_LEFT_BORDER: Record<string, string> = {
apps/web/src/components/allocations/AllocationsClient.tsx
+3 -3
View File
@@ -13,8 +13,8 @@ import type {
AllocationWithDetails,
ColumnDef,
AllocationStatus,
} from "@capakraken/shared";
import { ALLOCATION_COLUMNS } from "@capakraken/shared";
} from "@nexus/shared";
import { ALLOCATION_COLUMNS } from "@nexus/shared";
import { useSelection } from "~/hooks/useSelection.js";
import { FilterBar } from "~/components/ui/FilterBar.js";
import { FilterChips } from "~/components/ui/FilterChips.js";
@@ -328,7 +328,7 @@ export function AllocationsClient() {
// ─── View mode: grouped (default) vs flat ──────────────────────────────────
const [viewMode, setViewMode] = useLocalStorage<"grouped" | "flat">(
"capakraken:allocations:viewMode",
"nexus:allocations:viewMode",
"grouped",
);
const [collapsedGroups, setCollapsedGroups] = useState<CollapsedAllocationGroups>(() =>
apps/web/src/components/allocations/ConflictWarningPanel.tsx
+22 -10
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import type { AllocationConflictCheckResult } from "@capakraken/shared";
import type { AllocationConflictCheckResult } from "@nexus/shared";
const INITIAL_ROWS_SHOWN = 5;
@@ -43,12 +43,12 @@ export function ConflictWarningPanel({
<div className="rounded-lg border border-amber-300 dark:border-amber-700 bg-amber-50 dark:bg-amber-950/30 p-4 text-sm">
<p className="font-semibold text-amber-800 dark:text-amber-300">
⚠ Overbooking on {result.overbooking.totalConflictDays} day
{result.overbooking.totalConflictDays !== 1 ? "s" : ""}
{" "}(up to {result.overbooking.maxOverbookPercent}% over capacity)
{result.overbooking.totalConflictDays !== 1 ? "s" : ""} (up to{" "}
{result.overbooking.maxOverbookPercent}% over capacity)
</p>
<p className="mt-1 text-amber-700 dark:text-amber-400">
The resource already has allocations that exceed their daily capacity on the following days.
You can still save — check the box below to confirm.
The resource already has allocations that exceed their daily capacity on the following
days. You can still save — check the box below to confirm.
</p>
{/* Day-by-day table */}
@@ -65,7 +65,10 @@ export function ConflictWarningPanel({
</thead>
<tbody>
{visibleDays.map((day) => (
<tr key={day.date} className="border-b border-amber-100 dark:border-amber-900/50 last:border-0">
<tr
key={day.date}
className="border-b border-amber-100 dark:border-amber-900/50 last:border-0"
>
<td className="py-1 pr-4">{day.date}</td>
<td className="py-1 pr-4 text-right">{day.availableHours}h</td>
<td className="py-1 pr-4 text-right">{day.existingHours}h</td>
@@ -85,7 +88,9 @@ export function ConflictWarningPanel({
onClick={() => setShowAllDays((v) => !v)}
className="mt-2 text-xs font-medium text-amber-700 dark:text-amber-400 underline underline-offset-2"
>
{showAllDays ? "Show less" : `Show ${hiddenCount} more day${hiddenCount !== 1 ? "s" : ""}…`}
{showAllDays
? "Show less"
: `Show ${hiddenCount} more day${hiddenCount !== 1 ? "s" : ""}…`}
</button>
)}
@@ -115,11 +120,18 @@ export function ConflictWarningPanel({
</p>
<ul className="mt-2 space-y-1">
{result.vacationOverlap.map((v, i) => (
<li key={i} className="flex items-center gap-2 text-xs text-sky-700 dark:text-sky-400">
<li
key={i}
className="flex items-center gap-2 text-xs text-sky-700 dark:text-sky-400"
>
<span className="inline-block h-1.5 w-1.5 shrink-0 rounded-full bg-sky-400" />
<span className="font-medium capitalize">{v.type.replace(/_/g, " ").toLowerCase()}</span>
<span className="font-medium capitalize">
{v.type.replace(/_/g, " ").toLowerCase()}
</span>
{v.isHalfDay && <span className="text-sky-500">(half-day)</span>}
<span>{v.startDate === v.endDate ? v.startDate : `${v.startDate} – ${v.endDate}`}</span>
<span>
{v.startDate === v.endDate ? v.startDate : `${v.startDate} – ${v.endDate}`}
</span>
</li>
))}
</ul>
apps/web/src/components/allocations/FillOpenDemandModal.tsx
+161 -58
View File
@@ -1,7 +1,7 @@
"use client";
import { useRef, useState, useMemo } from "react";
import { AllocationStatus } from "@capakraken/shared";
import { AllocationStatus } from "@nexus/shared";
import { useFocusTrap } from "~/hooks/useFocusTrap.js";
import { formatCents, formatDateMedium } from "~/lib/format.js";
import { getPlanningEntryMutationId } from "~/lib/planningEntryIds.js";
@@ -75,7 +75,11 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
const { data: resources } = trpc.resource.listStaff.useQuery(
{ isActive: true, search: debouncedSearch || undefined, limit: 50 },
{ staleTime: 15_000 },
) as { data: { resources: Array<{ id: string; displayName: string; eid: string; lcrCents: number }> } | undefined };
) as {
data:
| { resources: Array<{ id: string; displayName: string; eid: string; lcrCents: number }> }
| undefined;
};
const availabilityQuery = trpc.allocation.checkResourceAvailability.useQuery(
{
@@ -118,17 +122,20 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
const lcrCents = selectedResource.lcrCents ?? 0;
const estimatedCostCents = Math.round(lcrCents * avail.totalAvailableHours);
setPlanned((prev) => [...prev, {
resourceId: selectedResource.id,
resourceName: selectedResource.displayName,
eid: selectedResource.eid,
hoursPerDay,
availableHours: avail.totalAvailableHours,
availableDays: avail.availableDays,
conflictDays: avail.conflictDays,
coveragePercent: avail.coveragePercent,
estimatedCostCents,
}]);
setPlanned((prev) => [
...prev,
{
resourceId: selectedResource.id,
resourceName: selectedResource.displayName,
eid: selectedResource.eid,
hoursPerDay,
availableHours: avail.totalAvailableHours,
availableDays: avail.availableDays,
conflictDays: avail.conflictDays,
coveragePercent: avail.coveragePercent,
estimatedCostCents,
},
]);
// Reset for next resource
setResourceId("");
@@ -160,7 +167,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
status: AllocationStatus.PROPOSED,
});
} catch (err) {
setServerError(`Failed to assign ${p.resourceName}: ${err instanceof Error ? err.message : String(err)}`);
setServerError(
`Failed to assign ${p.resourceName}: ${err instanceof Error ? err.message : String(err)}`,
);
setSubmitting(false);
return;
}
@@ -177,12 +186,16 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
return (
<div
className="fixed inset-0 bg-black/50 z-50 flex items-start justify-center overflow-y-auto py-8"
onClick={(e) => { if (e.target === e.currentTarget && !submitting) onClose(); }}
onClick={(e) => {
if (e.target === e.currentTarget && !submitting) onClose();
}}
>
<div
ref={panelRef}
className="bg-white dark:bg-gray-800 rounded-xl shadow-2xl w-full max-w-lg mx-4"
onKeyDown={(e) => { if (e.key === "Escape" && !submitting) onClose(); }}
onKeyDown={(e) => {
if (e.key === "Escape" && !submitting) onClose();
}}
>
{/* Header */}
<div className="flex items-center justify-between px-6 py-4 border-b border-gray-200 dark:border-gray-700">
@@ -190,21 +203,34 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{phase === "plan" ? "Plan Demand Assignment" : "Confirm Assignments"}
<InfoTooltip content="Fill an open demand by assigning one or more real resources to a placeholder staffing requirement. Each assignment creates a new allocation." />
</h2>
<button type="button" onClick={onClose} disabled={submitting} className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none disabled:opacity-30">&times;</button>
<button
type="button"
onClick={onClose}
disabled={submitting}
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 text-xl leading-none disabled:opacity-30"
>
&times;
</button>
</div>
<div className="px-6 pt-4 pb-2 space-y-3">
{/* Demand summary */}
<div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3 flex items-start gap-3">
<div className="w-3 h-3 rounded-full mt-1 flex-shrink-0" style={{ backgroundColor: roleColor }} />
<div
className="w-3 h-3 rounded-full mt-1 flex-shrink-0"
style={{ backgroundColor: roleColor }}
/>
<div className="flex-1">
<div className="font-medium text-gray-900 dark:text-gray-100">{roleName}</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
{allocation.project?.name} · {formatDateMedium(allocation.startDate)} – {formatDateMedium(allocation.endDate)}
{allocation.project?.name} · {formatDateMedium(allocation.startDate)} –{" "}
{formatDateMedium(allocation.endDate)}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400">
{allocation.hoursPerDay}h/day · {totalDemandHours.toLocaleString()}h total
{allocation.budgetCents && allocation.budgetCents > 0 ? ` · Budget: ${formatCents(allocation.budgetCents)} EUR` : ""}
{allocation.budgetCents && allocation.budgetCents > 0
? ` · Budget: ${formatCents(allocation.budgetCents)} EUR`
: ""}
</div>
</div>
</div>
@@ -213,7 +239,10 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
<div className="bg-gray-50 dark:bg-gray-900 rounded-lg p-3">
<div className="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1.5">
<span>Demand coverage</span>
<span>{Math.round(consumedHours)}h / {totalDemandHours}h ({totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%)</span>
<span>
{Math.round(consumedHours)}h / {totalDemandHours}h (
{totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%)
</span>
</div>
<div className="w-full h-2.5 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden flex">
{planned.map((r, i) => (
@@ -234,11 +263,18 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
<div className="mt-2 space-y-1">
{planned.map((r, i) => (
<div key={r.resourceId} className="flex items-center gap-2 text-xs group">
<div className="w-2 h-2 rounded-full flex-shrink-0" style={{ backgroundColor: `hsl(${(i * 60 + 200) % 360}, 60%, 55%)` }} />
<span className="text-gray-700 dark:text-gray-300 font-medium">{r.resourceName}</span>
<div
className="w-2 h-2 rounded-full flex-shrink-0"
style={{ backgroundColor: `hsl(${(i * 60 + 200) % 360}, 60%, 55%)` }}
/>
<span className="text-gray-700 dark:text-gray-300 font-medium">
{r.resourceName}
</span>
<span className="text-gray-400">({r.eid})</span>
<span className="text-gray-500">{r.hoursPerDay}h/day</span>
<span className="ml-auto text-gray-500">{Math.round(r.availableHours)}h · {r.coveragePercent}%</span>
<span className="ml-auto text-gray-500">
{Math.round(r.availableHours)}h · {r.coveragePercent}%
</span>
{phase === "plan" && (
<button
type="button"
@@ -254,7 +290,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{remainingHours > 0 && (
<div className="flex items-center gap-2 text-xs">
<div className="w-2 h-2 rounded-full bg-gray-300 dark:bg-gray-600 flex-shrink-0" />
<span className="text-amber-600 dark:text-amber-400 font-medium">Remaining: {Math.round(remainingHours)}h</span>
<span className="text-amber-600 dark:text-amber-400 font-medium">
Remaining: {Math.round(remainingHours)}h
</span>
</div>
)}
</div>
@@ -266,7 +304,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{phase === "plan" && (
<div className="px-6 pb-5 space-y-4">
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Search Resource</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Search Resource
</label>
<input
type="text"
placeholder="Search by name or EID..."
@@ -277,7 +317,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Select Resource</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Select Resource
</label>
<select
value={resourceId}
onChange={(e) => setResourceId(e.target.value)}
@@ -297,7 +339,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
</div>
<div>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Hours / Day</label>
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
Hours / Day
</label>
<input
type="number"
value={hoursPerDay}
@@ -311,41 +355,53 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{/* Availability preview */}
{resourceId && avail && (
<div className={`rounded-lg p-3 border text-sm ${
avail.coveragePercent >= 100
? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800"
: avail.coveragePercent >= 50
? "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800"
: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"
}`}>
<div
className={`rounded-lg p-3 border text-sm ${
avail.coveragePercent >= 100
? "bg-green-50 border-green-200 dark:bg-green-900/20 dark:border-green-800"
: avail.coveragePercent >= 50
? "bg-amber-50 border-amber-200 dark:bg-amber-900/20 dark:border-amber-800"
: "bg-red-50 border-red-200 dark:bg-red-900/20 dark:border-red-800"
}`}
>
<div className="font-medium text-gray-900 dark:text-gray-100 mb-1.5">
Availability: {avail.resource.name}
</div>
<div className="grid grid-cols-3 gap-2 text-xs">
<div>
<span className="text-gray-500 dark:text-gray-400">Available</span>
<div className="font-semibold text-green-700 dark:text-green-400">{avail.availableDays} days</div>
<div className="font-semibold text-green-700 dark:text-green-400">
{avail.availableDays} days
</div>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400">Conflicts</span>
<div className="font-semibold text-red-700 dark:text-red-400">{avail.conflictDays} days</div>
<div className="font-semibold text-red-700 dark:text-red-400">
{avail.conflictDays} days
</div>
</div>
<div>
<span className="text-gray-500 dark:text-gray-400">Hours</span>
<div className="font-semibold text-gray-900 dark:text-gray-100">{avail.totalAvailableHours}h / {avail.totalRequestedHours}h</div>
<div className="font-semibold text-gray-900 dark:text-gray-100">
{avail.totalAvailableHours}h / {avail.totalRequestedHours}h
</div>
</div>
</div>
{avail.existingAssignments.length > 0 && (
<div className="mt-2 pt-2 border-t border-gray-200 dark:border-gray-700">
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">Existing bookings:</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mb-1">
Existing bookings:
</div>
{avail.existingAssignments.slice(0, 4).map((a, i) => (
<div key={i} className="text-xs text-gray-600 dark:text-gray-300">
{a.code} · {a.hoursPerDay}h/day · {a.start} – {a.end}
</div>
))}
{avail.existingAssignments.length > 4 && (
<div className="text-xs text-gray-400">+{avail.existingAssignments.length - 4} more</div>
<div className="text-xs text-gray-400">
+{avail.existingAssignments.length - 4} more
</div>
)}
</div>
)}
@@ -353,12 +409,18 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
)}
{resourceId && availabilityQuery.isLoading && (
<div className="text-xs text-gray-400 dark:text-gray-500 animate-pulse">Checking availability...</div>
<div className="text-xs text-gray-400 dark:text-gray-500 animate-pulse">
Checking availability...
</div>
)}
{/* Action buttons */}
<div className="flex items-center justify-between gap-3 pt-2">
<button type="button" onClick={onClose} className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100">
<button
type="button"
onClick={onClose}
className="px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100"
>
Cancel
</button>
<div className="flex items-center gap-2">
@@ -391,11 +453,27 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
<table className="w-full text-sm">
<thead className="bg-gray-50 dark:bg-gray-900">
<tr>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">Resource</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">h/day</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">Hours</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Est. Cost<InfoTooltip content="Estimated cost = resource LCR x available hours in the demand period." /></span></th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400"><span className="inline-flex items-center justify-end gap-0.5">Coverage<InfoTooltip content="Percentage of the demand period this resource can cover, accounting for existing bookings." /></span></th>
<th className="px-3 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-400">
Resource
</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
h/day
</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
Hours
</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
<span className="inline-flex items-center justify-end gap-0.5">
Est. Cost
<InfoTooltip content="Estimated cost = resource LCR x available hours in the demand period." />
</span>
</th>
<th className="px-3 py-2 text-right text-xs font-medium text-gray-500 dark:text-gray-400">
<span className="inline-flex items-center justify-end gap-0.5">
Coverage
<InfoTooltip content="Percentage of the demand period this resource can cover, accounting for existing bookings." />
</span>
</th>
</tr>
</thead>
<tbody className="divide-y divide-gray-100 dark:divide-gray-800">
@@ -405,11 +483,19 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{r.resourceName}
<span className="ml-1 text-xs text-gray-400 font-mono">{r.eid}</span>
</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{r.hoursPerDay}h</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{Math.round(r.availableHours)}h</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">{formatCents(r.estimatedCostCents)} EUR</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
{r.hoursPerDay}h
</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
{Math.round(r.availableHours)}h
</td>
<td className="px-3 py-2 text-right text-gray-600 dark:text-gray-300">
{formatCents(r.estimatedCostCents)} EUR
</td>
<td className="px-3 py-2 text-right">
<span className={`font-medium ${r.coveragePercent >= 100 ? "text-green-600" : r.coveragePercent >= 50 ? "text-amber-600" : "text-red-600"}`}>
<span
className={`font-medium ${r.coveragePercent >= 100 ? "text-green-600" : r.coveragePercent >= 50 ? "text-amber-600" : "text-red-600"}`}
>
{r.coveragePercent}%
</span>
</td>
@@ -418,7 +504,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
</tbody>
<tfoot className="bg-gray-50 dark:bg-gray-900">
<tr>
<td className="px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-300">Total</td>
<td className="px-3 py-2 text-xs font-semibold text-gray-700 dark:text-gray-300">
Total
</td>
<td className="px-3 py-2" />
<td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
{Math.round(consumedHours)}h / {totalDemandHours}h
@@ -427,12 +515,20 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{formatCents(planned.reduce((s, r) => s + r.estimatedCostCents, 0))} EUR
</td>
<td className="px-3 py-2 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
{totalDemandHours > 0 ? Math.round((consumedHours / totalDemandHours) * 100) : 0}%
{totalDemandHours > 0
? Math.round((consumedHours / totalDemandHours) * 100)
: 0}
%
</td>
</tr>
{allocation.budgetCents && allocation.budgetCents > 0 && (
<tr>
<td colSpan={3} className="px-3 py-1.5 text-right text-xs text-gray-500 dark:text-gray-400">Role Budget:</td>
<td
colSpan={3}
className="px-3 py-1.5 text-right text-xs text-gray-500 dark:text-gray-400"
>
Role Budget:
</td>
<td className="px-3 py-1.5 text-right text-xs font-semibold text-gray-700 dark:text-gray-300">
{formatCents(allocation.budgetCents)} EUR
</td>
@@ -441,8 +537,12 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
const totalCost = planned.reduce((s, r) => s + r.estimatedCostCents, 0);
const remain = allocation.budgetCents! - totalCost;
return (
<span className={remain < 0 ? "text-red-600 font-medium" : "text-green-600"}>
{remain < 0 ? `${formatCents(Math.abs(remain))} over` : `${formatCents(remain)} left`}
<span
className={remain < 0 ? "text-red-600 font-medium" : "text-green-600"}
>
{remain < 0
? `${formatCents(Math.abs(remain))} over`
: `${formatCents(remain)} left`}
</span>
);
})()}
@@ -455,7 +555,8 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
{remainingHours > 0 && (
<div className="text-xs text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-900/20 rounded-lg px-3 py-2 border border-amber-200 dark:border-amber-800">
{Math.round(remainingHours)}h remain uncovered. You can add more resources or assign partially.
{Math.round(remainingHours)}h remain uncovered. You can add more resources or assign
partially.
</div>
)}
@@ -486,7 +587,9 @@ export function FillOpenDemandModal({ allocation, onClose, onSuccess }: FillOpen
disabled={submitting || planned.length === 0}
className="px-5 py-2 bg-brand-600 text-white rounded-lg hover:bg-brand-700 text-sm font-semibold disabled:opacity-50"
>
{submitting ? `Assigning ${submitProgress}/${planned.length}...` : `Confirm & Assign ${planned.length} Resource${planned.length !== 1 ? "s" : ""}`}
{submitting
? `Assigning ${submitProgress}/${planned.length}...`
: `Confirm & Assign ${planned.length} Resource${planned.length !== 1 ? "s" : ""}`}
</button>
</div>
</div>
apps/web/src/components/allocations/OpenDemandsPanel.tsx
+1 -1
View File
@@ -1,4 +1,4 @@
import type { AllocationWithDetails } from "@capakraken/shared";
import type { AllocationWithDetails } from "@nexus/shared";
type DemandRow = AllocationWithDetails & {
sourceAllocationId?: string;
apps/web/src/components/allocations/RecurrenceEditor.tsx
+18 -9
View File
@@ -1,7 +1,7 @@
"use client";
import { RecurrenceFrequency } from "@capakraken/shared";
import type { RecurrencePattern } from "@capakraken/shared";
import { RecurrenceFrequency } from "@nexus/shared";
import type { RecurrencePattern } from "@nexus/shared";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
const WEEKDAY_LABELS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
@@ -39,7 +39,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
<div className="space-y-3 p-3 bg-gray-50 dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-700">
{/* Frequency selector */}
<div>
<span className={labelClass}>Frequency<InfoTooltip content="How often the allocation repeats: weekly, biweekly, monthly, or a custom pattern." /></span>
<span className={labelClass}>
Frequency
<InfoTooltip content="How often the allocation repeats: weekly, biweekly, monthly, or a custom pattern." />
</span>
<div className="flex gap-2 flex-wrap">
{Object.values(RecurrenceFrequency).map((f) => (
<button
@@ -55,10 +58,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
{f === RecurrenceFrequency.WEEKLY
? "Weekly"
: f === RecurrenceFrequency.BIWEEKLY
? "Biweekly"
: f === RecurrenceFrequency.MONTHLY
? "Monthly"
: "Custom"}
? "Biweekly"
: f === RecurrenceFrequency.MONTHLY
? "Monthly"
: "Custom"}
</button>
))}
</div>
@@ -67,7 +70,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
{/* Weekday picker — WEEKLY and BIWEEKLY */}
{(freq === RecurrenceFrequency.WEEKLY || freq === RecurrenceFrequency.BIWEEKLY) && (
<div>
<span className={labelClass}>Days of week<InfoTooltip content="Select which days of the week this allocation is active. Hours per day applies only on selected days." /></span>
<span className={labelClass}>
Days of week
<InfoTooltip content="Select which days of the week this allocation is active. Hours per day applies only on selected days." />
</span>
<div className="flex gap-1">
{WEEKDAY_LABELS.map((label, dow) => {
const selected = (value?.weekdays ?? []).includes(dow);
@@ -139,7 +145,10 @@ export function RecurrenceEditor({ value, onChange }: RecurrenceEditorProps) {
{/* Optional hours override for WEEKLY/BIWEEKLY/MONTHLY */}
{freq !== RecurrenceFrequency.CUSTOM && (
<div>
<label className={labelClass}>Hours per recurring day (optional override)<InfoTooltip content="Override the allocation's default hours for recurring days only. Leave empty to use the allocation's hours/day." /></label>
<label className={labelClass}>
Hours per recurring day (optional override)
<InfoTooltip content="Override the allocation's default hours for recurring days only. Leave empty to use the allocation's hours/day." />
</label>
<input
type="number"
min={0.5}
apps/web/src/components/assistant/ChatPanel.tsx
+2 -2
View File
@@ -71,8 +71,8 @@ interface AssistantInsight {
sections?: AssistantInsightSection[];
}
const STORAGE_KEY = "capakraken-chat-messages";
const CONVERSATION_ID_KEY = "capakraken-chat-conversation-id";
const STORAGE_KEY = "nexus-chat-messages";
const CONVERSATION_ID_KEY = "nexus-chat-conversation-id";
function isAssistantApproval(value: unknown): value is AssistantApproval {
if (!value || typeof value !== "object") return false;
apps/web/src/components/blueprints/BlueprintFieldCatalog.tsx
+35 -78
View File
@@ -1,8 +1,8 @@
"use client";
import { useState, useMemo, useCallback } from "react";
import { FieldType } from "@capakraken/shared";
import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@capakraken/shared";
import { FieldType } from "@nexus/shared";
import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { RolePresetsEditor } from "./RolePresetsEditor.js";
import { FieldCard } from "./FieldCard.js";
@@ -48,10 +48,7 @@ interface FieldState {
// Helpers: Convert between FieldState and BlueprintFieldDefinition
// ---------------------------------------------------------------------------
function fieldDefToState(
def: BlueprintFieldDefinition,
target: BlueprintTargetValue,
): FieldState {
function fieldDefToState(def: BlueprintFieldDefinition, target: BlueprintTargetValue): FieldState {
const catalogField = findCatalogField(target, def.key);
if (catalogField) {
return {
@@ -186,9 +183,7 @@ export function BlueprintFieldCatalog({
// Build initial state from existing fieldDefs + catalog
// ---------------------------------------------------------------------------
const [catalogOverrides, setCatalogOverrides] = useState<
Record<string, FieldOverrides>
>(() => {
const [catalogOverrides, setCatalogOverrides] = useState<Record<string, FieldOverrides>>(() => {
const map: Record<string, FieldOverrides> = {};
// Start with all catalog fields disabled
for (const cf of catalog) {
@@ -269,21 +264,13 @@ export function BlueprintFieldCatalog({
// Handlers
// ---------------------------------------------------------------------------
const handleCatalogFieldChange = useCallback(
(key: string, overrides: FieldOverrides) => {
setCatalogOverrides((prev) => ({ ...prev, [key]: overrides }));
},
[],
);
const handleCatalogFieldChange = useCallback((key: string, overrides: FieldOverrides) => {
setCatalogOverrides((prev) => ({ ...prev, [key]: overrides }));
}, []);
const handleCustomFieldChange = useCallback(
(idx: number, overrides: FieldOverrides) => {
setCustomFields((prev) =>
prev.map((f, i) => (i === idx ? { ...f, overrides } : f)),
);
},
[],
);
const handleCustomFieldChange = useCallback((idx: number, overrides: FieldOverrides) => {
setCustomFields((prev) => prev.map((f, i) => (i === idx ? { ...f, overrides } : f)));
}, []);
function removeCustomField(idx: number) {
setCustomFields((prev) => prev.filter((_, i) => i !== idx));
@@ -370,9 +357,7 @@ export function BlueprintFieldCatalog({
// Collapsed categories
// ---------------------------------------------------------------------------
const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(
new Set(),
);
const [collapsedCategories, setCollapsedCategories] = useState<Set<string>>(new Set());
function toggleCategory(name: string) {
setCollapsedCategories((prev) => {
@@ -502,15 +487,16 @@ export function BlueprintFieldCatalog({
{/* Field cards */}
<div className="flex-1 overflow-y-auto px-4 py-4 space-y-6">
{categories
.filter(
(cat) =>
activeCategory === null ||
activeCategory === cat.name,
)
.filter((cat) => activeCategory === null || activeCategory === cat.name)
.map((cat) => {
const fields = fieldsByCategory.get(cat.name) ?? [];
if (fields.length === 0 && searchQuery.trim()) return null;
if (fields.length === 0 && activeCategory !== null && activeCategory !== cat.name) return null;
if (
fields.length === 0 &&
activeCategory !== null &&
activeCategory !== cat.name
)
return null;
const isCollapsed = collapsedCategories.has(cat.name);
@@ -527,9 +513,7 @@ export function BlueprintFieldCatalog({
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
{cat.name}
</h3>
<span className="text-xs text-gray-400">
{cat.description}
</span>
<span className="text-xs text-gray-400">{cat.description}</span>
</button>
{!isCollapsed && (
<div className="grid grid-cols-1 gap-2">
@@ -538,9 +522,7 @@ export function BlueprintFieldCatalog({
key={field.key}
field={field}
overrides={catalogOverrides[field.key]!}
onChange={(ov) =>
handleCatalogFieldChange(field.key, ov)
}
onChange={(ov) => handleCatalogFieldChange(field.key, ov)}
/>
))}
{fields.length === 0 && (
@@ -555,8 +537,7 @@ export function BlueprintFieldCatalog({
})}
{/* Custom Fields section */}
{(activeCategory === null ||
activeCategory === "Custom Fields") && (
{(activeCategory === null || activeCategory === "Custom Fields") && (
<div>
<button
type="button"
@@ -564,9 +545,7 @@ export function BlueprintFieldCatalog({
className="flex items-center gap-2 mb-3 w-full text-left group"
>
<span className="text-xs text-gray-400 transition-transform group-hover:text-gray-600">
{collapsedCategories.has("Custom Fields")
? "\u25B6"
: "\u25BC"}
{collapsedCategories.has("Custom Fields") ? "\u25B6" : "\u25BC"}
</span>
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wider">
Custom Fields
@@ -585,8 +564,7 @@ export function BlueprintFieldCatalog({
label: cf.custom.label,
type: cf.custom.type,
category: "Custom Fields",
description:
cf.overrides.description || "Custom field",
description: cf.overrides.description || "Custom field",
...(cf.custom.options.length > 0
? { options: cf.custom.options }
: {}),
@@ -597,9 +575,7 @@ export function BlueprintFieldCatalog({
<FieldCard
field={pseudoCatalog}
overrides={cf.overrides}
onChange={(ov) =>
handleCustomFieldChange(idx, ov)
}
onChange={(ov) => handleCustomFieldChange(idx, ov)}
/>
<button
type="button"
@@ -619,19 +595,13 @@ export function BlueprintFieldCatalog({
<div className="grid grid-cols-1 sm:grid-cols-3 gap-3">
<div className="flex flex-col gap-1">
<label className="text-xs font-medium text-gray-600">
Key{" "}
<span className="text-red-500">*</span>
Key <span className="text-red-500">*</span>
</label>
<input
type="text"
value={customKey}
onChange={(e) =>
setCustomKey(
e.target.value.replace(
/[^a-zA-Z0-9_]/g,
"",
),
)
setCustomKey(e.target.value.replace(/[^a-zA-Z0-9_]/g, ""))
}
placeholder="field_key"
className="app-input font-mono"
@@ -639,30 +609,21 @@ export function BlueprintFieldCatalog({
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-medium text-gray-600">
Label{" "}
<span className="text-red-500">*</span>
Label <span className="text-red-500">*</span>
</label>
<input
type="text"
value={customLabel}
onChange={(e) =>
setCustomLabel(e.target.value)
}
onChange={(e) => setCustomLabel(e.target.value)}
placeholder="Display Label"
className="app-input"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs font-medium text-gray-600">
Type
</label>
<label className="text-xs font-medium text-gray-600">Type</label>
<select
value={customType}
onChange={(e) =>
setCustomType(
e.target.value as FieldType,
)
}
onChange={(e) => setCustomType(e.target.value as FieldType)}
className="app-input"
>
{FIELD_TYPES.map((ft) => (
@@ -677,9 +638,7 @@ export function BlueprintFieldCatalog({
<button
type="button"
onClick={addCustomField}
disabled={
!customKey.trim() || !customLabel.trim()
}
disabled={!customKey.trim() || !customLabel.trim()}
className={BTN_PRIMARY}
>
Add
@@ -704,8 +663,7 @@ export function BlueprintFieldCatalog({
onClick={() => setShowCustomForm(true)}
className="flex items-center gap-1.5 text-sm text-brand-600 hover:text-brand-800 font-medium py-2"
>
<span className="text-lg leading-none">+</span>{" "}
Add Custom Field
<span className="text-lg leading-none">+</span> Add Custom Field
</button>
)}
</div>
@@ -726,8 +684,7 @@ export function BlueprintFieldCatalog({
{/* Footer */}
<div className="flex items-center justify-between gap-3 px-6 py-4 border-t border-gray-200 dark:border-gray-700 shrink-0">
<span className="text-xs text-gray-400">
{enabledCount} field{enabledCount !== 1 ? "s" : ""} will be
saved
{enabledCount} field{enabledCount !== 1 ? "s" : ""} will be saved
</span>
<div className="flex items-center gap-3">
<button type="button" onClick={onClose} className={BTN_SECONDARY}>
@@ -747,8 +704,8 @@ export function BlueprintFieldCatalog({
) : (
<div className="px-6 py-4 overflow-y-auto">
<p className="text-xs text-gray-500 mb-4">
Role presets are auto-loaded in Step 3 of the Project Creation
Wizard when this blueprint is selected.
Role presets are auto-loaded in Step 3 of the Project Creation Wizard when this
blueprint is selected.
</p>
<RolePresetsEditor
initialPresets={initialRolePresets}
apps/web/src/components/blueprints/BlueprintFieldEditor.tsx
+17 -37
View File
@@ -1,8 +1,8 @@
"use client";
import { useState } from "react";
import { FieldType } from "@capakraken/shared";
import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@capakraken/shared";
import { FieldType } from "@nexus/shared";
import type { BlueprintFieldDefinition, FieldOption, StaffingRequirement } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { RolePresetsEditor } from "./RolePresetsEditor.js";
@@ -53,9 +53,7 @@ function OptionsEditor({ options, onChange }: OptionsEditorProps) {
}
function updateOption(idx: number, field: "value" | "label", val: string) {
const next = options.map((o, i) =>
i === idx ? { ...o, [field]: val } : o,
);
const next = options.map((o, i) => (i === idx ? { ...o, [field]: val } : o));
onChange(next);
}
@@ -111,8 +109,7 @@ interface FieldRowProps {
function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
const [expanded, setExpanded] = useState(false);
const needsOptions =
field.type === FieldType.SELECT || field.type === FieldType.MULTI_SELECT;
const needsOptions = field.type === FieldType.SELECT || field.type === FieldType.MULTI_SELECT;
function update<K extends keyof BlueprintFieldDefinition>(
key: K,
@@ -126,9 +123,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
{/* Main row */}
<div className="flex flex-wrap items-center gap-2">
{/* Drag handle placeholder */}
<span className="text-gray-300 cursor-grab select-none text-lg leading-none">
☰
</span>
<span className="text-gray-300 cursor-grab select-none text-lg leading-none">☰</span>
{/* Key */}
<input
@@ -158,7 +153,7 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
// Clear options when switching away from select types
const clearedOptions =
t === FieldType.SELECT || t === FieldType.MULTI_SELECT
? field.options ?? []
? (field.options ?? [])
: undefined;
onChange({ ...field, type: t, options: clearedOptions } as BlueprintFieldDefinition);
}}
@@ -218,29 +213,21 @@ function FieldRow({ field, onChange, onDelete }: FieldRowProps) {
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-500 font-medium">
Placeholder
</label>
<label className="text-xs text-gray-500 font-medium">Placeholder</label>
<input
type="text"
value={field.placeholder ?? ""}
onChange={(e) =>
update("placeholder", e.target.value || undefined)
}
onChange={(e) => update("placeholder", e.target.value || undefined)}
placeholder="Placeholder text"
className="app-input"
/>
</div>
<div className="flex flex-col gap-1">
<label className="text-xs text-gray-500 font-medium">
Description
</label>
<label className="text-xs text-gray-500 font-medium">Description</label>
<input
type="text"
value={field.description ?? ""}
onChange={(e) =>
update("description", e.target.value || undefined)
}
onChange={(e) => update("description", e.target.value || undefined)}
placeholder="Helper text"
className="app-input"
/>
@@ -311,9 +298,8 @@ export function BlueprintFieldEditor({
const utils = trpc.useUtils();
const [activeTab, setActiveTab] = useState<"fields" | "presets">(initialTab);
const [fields, setFields] = useState<BlueprintFieldDefinition[]>(
() =>
[...initialFieldDefs].sort((a, b) => a.order - b.order),
const [fields, setFields] = useState<BlueprintFieldDefinition[]>(() =>
[...initialFieldDefs].sort((a, b) => a.order - b.order),
);
const [saveError, setSaveError] = useState<string | null>(null);
const [presetSaveError, setPresetSaveError] = useState<string | null>(null);
@@ -327,17 +313,11 @@ export function BlueprintFieldEditor({
}
function removeField(idx: number) {
setFields((prev) =>
prev
.filter((_, i) => i !== idx)
.map((f, i) => ({ ...f, order: i })),
);
setFields((prev) => prev.filter((_, i) => i !== idx).map((f, i) => ({ ...f, order: i })));
}
function updateField(idx: number, updated: BlueprintFieldDefinition) {
setFields((prev) =>
prev.map((f, i) => (i === idx ? updated : f)),
);
setFields((prev) => prev.map((f, i) => (i === idx ? updated : f)));
}
function handleSave() {
@@ -375,8 +355,7 @@ export function BlueprintFieldEditor({
{/* Header */}
<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">
Edit Fields:{" "}
<span className="text-gray-600 font-normal">{blueprintName}</span>
Edit Fields: <span className="text-gray-600 font-normal">{blueprintName}</span>
</h2>
<button
type="button"
@@ -461,7 +440,8 @@ export function BlueprintFieldEditor({
) : (
<div className="px-6 py-4">
<p className="text-xs text-gray-500 mb-4">
Role presets are auto-loaded in Step 3 of the Project Creation Wizard when this blueprint is selected.
Role presets are auto-loaded in Step 3 of the Project Creation Wizard when this
blueprint is selected.
</p>
<RolePresetsEditor
initialPresets={initialRolePresets}
apps/web/src/components/blueprints/BlueprintsClient.tsx
+3 -3
View File
@@ -2,8 +2,8 @@
import { useState, useEffect } from "react";
import type { FormEvent } from "react";
import type { BlueprintTarget } from "@capakraken/shared";
import type { BlueprintFieldDefinition } from "@capakraken/shared";
import type { BlueprintTarget } from "@nexus/shared";
import type { BlueprintFieldDefinition } from "@nexus/shared";
import { trpc } from "~/lib/trpc/client.js";
import { BlueprintFieldCatalog } from "./BlueprintFieldCatalog.js";
import { useSelection } from "~/hooks/useSelection.js";
@@ -637,7 +637,7 @@ export function BlueprintsClient() {
}
initialRolePresets={
Array.isArray(editingBlueprint.rolePresets)
? (editingBlueprint.rolePresets as import("@capakraken/shared").StaffingRequirement[])
? (editingBlueprint.rolePresets as import("@nexus/shared").StaffingRequirement[])
: []
}
initialTab={editingTab}
apps/web/src/components/blueprints/FieldCard.tsx
+9 -23
View File
@@ -1,8 +1,8 @@
"use client";
import { useState } from "react";
import { FieldType } from "@capakraken/shared";
import type { FieldOption } from "@capakraken/shared";
import { FieldType } from "@nexus/shared";
import type { FieldOption } from "@nexus/shared";
import type { CatalogField } from "~/lib/blueprint-field-catalog.js";
// ---------------------------------------------------------------------------
@@ -234,9 +234,7 @@ function DefaultValueInput({
<input
type="number"
value={value != null ? String(value) : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : Number(e.target.value))
}
onChange={(e) => onChange(e.target.value === "" ? undefined : Number(e.target.value))}
placeholder="No default"
className="app-input"
/>
@@ -247,9 +245,7 @@ function DefaultValueInput({
<input
type="date"
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
className="app-input"
/>
);
@@ -258,9 +254,7 @@ function DefaultValueInput({
return (
<select
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
className="app-input"
>
<option value="">No default</option>
@@ -286,9 +280,7 @@ function DefaultValueInput({
<input
type="url"
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
placeholder="https://..."
className="app-input"
/>
@@ -299,9 +291,7 @@ function DefaultValueInput({
<input
type="email"
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
placeholder="name@example.com"
className="app-input"
/>
@@ -311,9 +301,7 @@ function DefaultValueInput({
return (
<textarea
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
placeholder="No default"
className="app-input resize-none"
rows={2}
@@ -325,9 +313,7 @@ function DefaultValueInput({
<input
type="text"
value={typeof value === "string" ? value : ""}
onChange={(e) =>
onChange(e.target.value === "" ? undefined : e.target.value)
}
onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
placeholder="No default"
className="app-input"
/>
apps/web/src/components/blueprints/RolePresetsEditor.tsx
+1 -1
View File
@@ -1,7 +1,7 @@
"use client";
import { useState } from "react";
import type { StaffingRequirement } from "@capakraken/shared";
import type { StaffingRequirement } from "@nexus/shared";
import { uuid } from "~/lib/uuid.js";
function makeEmptyPreset(): StaffingRequirement {
apps/web/src/components/comments/CommentInput.tsx
+30 -37
View File
@@ -1,6 +1,6 @@
"use client";
import type { CommentEntityType } from "@capakraken/shared";
import type { CommentEntityType } from "@nexus/shared";
import { createPortal } from "react-dom";
import { useCallback, useEffect, useRef, useState } from "react";
import { trpc } from "~/lib/trpc/client.js";
@@ -39,14 +39,17 @@ export function CommentInput({
const [cursorPosition, setCursorPosition] = useState(0);
const textareaRef = useRef<HTMLTextAreaElement>(null);
const usersQuery = trpc.comment.listMentionCandidates.useQuery({
entityType,
entityId,
...(mentionQuery && mentionQuery.length > 0 ? { query: mentionQuery } : {}),
}, {
enabled: mentionQuery !== null,
staleTime: 60_000,
});
const usersQuery = trpc.comment.listMentionCandidates.useQuery(
{
entityType,
entityId,
...(mentionQuery && mentionQuery.length > 0 ? { query: mentionQuery } : {}),
},
{
enabled: mentionQuery !== null,
staleTime: 60_000,
},
);
const filteredUsers: MentionCandidate[] =
mentionQuery !== null ? (usersQuery.data ?? []).slice(0, 8) : [];
@@ -63,25 +66,22 @@ export function CommentInput({
setMentionIndex(0);
}, [mentionQuery]);
const handleChange = useCallback(
(e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const cursor = e.target.selectionStart ?? value.length;
setBody(value);
setCursorPosition(cursor);
const handleChange = useCallback((e: React.ChangeEvent<HTMLTextAreaElement>) => {
const value = e.target.value;
const cursor = e.target.selectionStart ?? value.length;
setBody(value);
setCursorPosition(cursor);
// Detect if we are in a @mention context
const textBeforeCursor = value.slice(0, cursor);
const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
// Detect if we are in a @mention context
const textBeforeCursor = value.slice(0, cursor);
const atMatch = textBeforeCursor.match(/@([^\s@]*)$/);
if (atMatch) {
setMentionQuery(atMatch[1]!);
} else {
setMentionQuery(null);
}
},
[],
);
if (atMatch) {
setMentionQuery(atMatch[1]!);
} else {
setMentionQuery(null);
}
}, []);
const insertMention = useCallback(
(user: MentionCandidate) => {
@@ -96,8 +96,7 @@ export function CommentInput({
const displayName = user.name ?? user.email;
const mentionText = `@[${displayName}](${user.id}) `;
const newBody =
textBeforeCursor.slice(0, atStart) + mentionText + textAfterCursor;
const newBody = textBeforeCursor.slice(0, atStart) + mentionText + textAfterCursor;
setBody(newBody);
setMentionQuery(null);
@@ -121,16 +120,12 @@ export function CommentInput({
if (mentionQuery !== null && filteredUsers.length > 0) {
if (e.key === "ArrowDown") {
e.preventDefault();
setMentionIndex((prev) =>
prev < filteredUsers.length - 1 ? prev + 1 : 0,
);
setMentionIndex((prev) => (prev < filteredUsers.length - 1 ? prev + 1 : 0));
return;
}
if (e.key === "ArrowUp") {
e.preventDefault();
setMentionIndex((prev) =>
prev > 0 ? prev - 1 : filteredUsers.length - 1,
);
setMentionIndex((prev) => (prev > 0 ? prev - 1 : filteredUsers.length - 1));
return;
}
if (e.key === "Enter" || e.key === "Tab") {
@@ -218,9 +213,7 @@ export function CommentInput({
: null}
<div className="mt-2 flex items-center justify-between">
<span className="text-xs text-gray-400">
Ctrl+Enter to submit
</span>
<span className="text-xs text-gray-400">Ctrl+Enter to submit</span>
<div className="flex gap-2">
{onCancel && (
<button
apps/web/src/components/comments/CommentThread.tsx
+22 -37
View File
@@ -1,6 +1,6 @@
"use client";
import type { CommentEntityType } from "@capakraken/shared";
import type { CommentEntityType } from "@nexus/shared";
import { useState } from "react";
import { clsx } from "clsx";
import { trpc } from "~/lib/trpc/client.js";
@@ -150,12 +150,7 @@ function SingleComment({
const isResolved = comment.resolved;
return (
<div
className={clsx(
"group relative",
isResolved && "opacity-60",
)}
>
<div className={clsx("group relative", isResolved && "opacity-60")}>
<div className={clsx("flex gap-3", isReply && "ml-10")}>
<AuthorAvatar author={comment.author} />
<div className="min-w-0 flex-1">
@@ -163,9 +158,7 @@ function SingleComment({
<span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
{comment.author.name ?? comment.author.email}
</span>
<span className="text-xs text-gray-400">
{formatRelativeTime(comment.createdAt)}
</span>
<span className="text-xs text-gray-400">{formatRelativeTime(comment.createdAt)}</span>
{isResolved && (
<span className="rounded-full bg-emerald-100 dark:bg-emerald-900/50 px-2 py-0.5 text-xs font-medium text-emerald-700 dark:text-emerald-300">
Resolved
@@ -173,7 +166,11 @@ function SingleComment({
)}
</div>
<div className={clsx(isResolved && "line-through decoration-gray-300 dark:decoration-gray-600")}>
<div
className={clsx(
isResolved && "line-through decoration-gray-300 dark:decoration-gray-600",
)}
>
<CommentBody body={comment.body} />
</div>
@@ -216,17 +213,17 @@ function SingleComment({
{/* Inline reply input */}
{showReplyInput && (
<div className="mt-3">
<CommentInput
entityType={commentTarget.entityType}
entityId={commentTarget.entityId}
parentId={comment.id}
onSubmit={(replyBody) => {
createMutation.mutate({
entityType: commentTarget.entityType,
entityId: commentTarget.entityId,
parentId: comment.id,
body: replyBody,
});
<CommentInput
entityType={commentTarget.entityType}
entityId={commentTarget.entityId}
parentId={comment.id}
onSubmit={(replyBody) => {
createMutation.mutate({
entityType: commentTarget.entityType,
entityId: commentTarget.entityId,
parentId: comment.id,
body: replyBody,
});
}}
onCancel={() => setShowReplyInput(false)}
isSubmitting={createMutation.isPending}
@@ -256,12 +253,7 @@ function SingleComment({
{"replies" in comment && comment.replies.length > 0 && (
<div className="mt-3 space-y-3 border-l-2 border-gray-100 dark:border-gray-700 pl-2">
{comment.replies.map((reply) => (
<SingleComment
key={reply.id}
comment={reply}
commentTarget={commentTarget}
isReply
/>
<SingleComment key={reply.id} comment={reply} commentTarget={commentTarget} isReply />
))}
</div>
)}
@@ -272,10 +264,7 @@ function SingleComment({
export function CommentThread({ commentTarget }: CommentThreadProps) {
const utils = trpc.useUtils();
const commentsQuery = trpc.comment.list.useQuery(
commentTarget,
{ staleTime: 10_000 },
);
const commentsQuery = trpc.comment.list.useQuery(commentTarget, { staleTime: 10_000 });
const createMutation = trpc.comment.create.useMutation({
onSuccess: () => {
@@ -308,11 +297,7 @@ export function CommentThread({ commentTarget }: CommentThreadProps) {
) : (
<div className="space-y-5">
{comments.map((comment) => (
<SingleComment
key={comment.id}
comment={comment}
commentTarget={commentTarget}
/>
<SingleComment key={comment.id} comment={comment} commentTarget={commentTarget} />
))}
</div>
)}
apps/web/src/components/dashboard/AddWidgetModal.tsx
+7 -3
View File
@@ -1,6 +1,6 @@
"use client";
import type { DashboardWidgetType } from "@capakraken/shared/types";
import type { DashboardWidgetType } from "@nexus/shared/types";
import { WIDGET_CATALOG } from "./widget-registry.js";
interface AddWidgetModalProps {
@@ -44,8 +44,12 @@ export function AddWidgetModal({ onAdd, onClose }: AddWidgetModalProps) {
>
<span className="text-3xl shrink-0">{def.icon}</span>
<div>
<div className="font-semibold text-gray-900 dark:text-gray-100 text-sm">{def.label}</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">{def.description}</div>
<div className="font-semibold text-gray-900 dark:text-gray-100 text-sm">
{def.label}
</div>
<div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
{def.description}
</div>
<div className="text-xs text-gray-400 dark:text-gray-500 mt-1">
Default: {def.defaultSize.w}×{def.defaultSize.h} grid units
</div>
apps/web/src/components/dashboard/DashboardClient.tsx
+16 -4
View File
@@ -1,6 +1,6 @@
"use client";
import type { DashboardWidgetConfig, DashboardWidgetType } from "@capakraken/shared/types";
import type { DashboardWidgetConfig, DashboardWidgetType } from "@nexus/shared/types";
import { verticalCompactor, horizontalCompactor, type Compactor } from "react-grid-layout";
// Runs vertical compaction first (float up), then horizontal (float left).
@@ -152,13 +152,25 @@ function DeferredWidgetBody({
};
}, [activationRank, isActive, isPriority]);
return <div ref={containerRef} className="h-full">{isActive ? renderWidget(type, config, onConfigChange) : <DeferredWidgetFallback />}</div>;
return (
<div ref={containerRef} className="h-full">
{isActive ? renderWidget(type, config, onConfigChange) : <DeferredWidgetFallback />}
</div>
);
}
export function DashboardClient() {
const [addModalOpen, setAddModalOpen] = useState(false);
const { config, isHydrated, saveStatus, addWidget, removeWidget, updateWidgetConfig, onLayoutChange, resetLayout } =
useDashboardLayout();
const {
config,
isHydrated,
saveStatus,
addWidget,
removeWidget,
updateWidgetConfig,
onLayoutChange,
resetLayout,
} = useDashboardLayout();
// Measure grid container width so Responsive knows the column size.
// We can't use WidthProvider (uses findDOMNode, deprecated in React 18).
apps/web/src/components/dashboard/widget-registry.ts
+36 -12
View File
@@ -2,7 +2,7 @@ import {
DASHBOARD_WIDGET_CATALOG,
type DashboardWidgetCatalogEntry,
type DashboardWidgetType,
} from "@capakraken/shared/types";
} from "@nexus/shared/types";
import { lazy, type ComponentType, type LazyExoticComponent } from "react";
type WidgetUpdate = Record<string, unknown>;
@@ -23,47 +23,71 @@ export const WIDGET_CATALOG = DASHBOARD_WIDGET_CATALOG;
export const WIDGET_REGISTRY: Record<DashboardWidgetType, WidgetDefinition> = {
"stat-cards": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "stat-cards")!,
component: lazy(() => import("./widgets/StatCardsWidget.js").then((m) => ({ default: m.StatCardsWidget }))),
component: lazy(() =>
import("./widgets/StatCardsWidget.js").then((m) => ({ default: m.StatCardsWidget })),
),
},
"resource-table": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "resource-table")!,
component: lazy(() => import("./widgets/ResourceTableWidget.js").then((m) => ({ default: m.ResourceTableWidget }))),
component: lazy(() =>
import("./widgets/ResourceTableWidget.js").then((m) => ({ default: m.ResourceTableWidget })),
),
},
"project-table": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "project-table")!,
component: lazy(() => import("./widgets/ProjectTableWidget.js").then((m) => ({ default: m.ProjectTableWidget }))),
component: lazy(() =>
import("./widgets/ProjectTableWidget.js").then((m) => ({ default: m.ProjectTableWidget })),
),
},
"peak-times-chart": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "peak-times-chart")!,
component: lazy(() => import("./widgets/PeakTimesWidget.js").then((m) => ({ default: m.PeakTimesWidget }))),
component: lazy(() =>
import("./widgets/PeakTimesWidget.js").then((m) => ({ default: m.PeakTimesWidget })),
),
},
"demand-view": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "demand-view")!,
component: lazy(() => import("./widgets/DemandWidget.js").then((m) => ({ default: m.DemandWidget }))),
component: lazy(() =>
import("./widgets/DemandWidget.js").then((m) => ({ default: m.DemandWidget })),
),
},
"top-value-resources": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "top-value-resources")!,
component: lazy(() => import("./widgets/TopValueWidget.js").then((m) => ({ default: m.TopValueWidget }))),
component: lazy(() =>
import("./widgets/TopValueWidget.js").then((m) => ({ default: m.TopValueWidget })),
),
},
"chargeability-overview": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "chargeability-overview")!,
component: lazy(() => import("./widgets/ChargeabilityWidget.js").then((m) => ({ default: m.ChargeabilityWidget }))),
component: lazy(() =>
import("./widgets/ChargeabilityWidget.js").then((m) => ({ default: m.ChargeabilityWidget })),
),
},
"my-projects": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "my-projects")!,
component: lazy(() => import("./widgets/MyProjectsWidget.js").then((m) => ({ default: m.MyProjectsWidget }))),
component: lazy(() =>
import("./widgets/MyProjectsWidget.js").then((m) => ({ default: m.MyProjectsWidget })),
),
},
"budget-forecast": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "budget-forecast")!,
component: lazy(() => import("./widgets/BudgetForecastWidget.js").then((m) => ({ default: m.BudgetForecastWidget }))),
component: lazy(() =>
import("./widgets/BudgetForecastWidget.js").then((m) => ({
default: m.BudgetForecastWidget,
})),
),
},
"skill-gap": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "skill-gap")!,
component: lazy(() => import("./widgets/SkillGapWidget.js").then((m) => ({ default: m.SkillGapWidget }))),
component: lazy(() =>
import("./widgets/SkillGapWidget.js").then((m) => ({ default: m.SkillGapWidget })),
),
},
"project-health": {
...DASHBOARD_WIDGET_CATALOG.find((widget) => widget.type === "project-health")!,
component: lazy(() => import("./widgets/ProjectHealthWidget.js").then((m) => ({ default: m.ProjectHealthWidget }))),
component: lazy(() =>
import("./widgets/ProjectHealthWidget.js").then((m) => ({ default: m.ProjectHealthWidget })),
),
},
};
apps/web/src/components/dashboard/widgets/ProjectTableWidget.tsx
+2 -6
View File
@@ -5,7 +5,7 @@ import Link from "next/link";
import { trpc } from "~/lib/trpc/client.js";
import type { WidgetProps } from "~/components/dashboard/widget-registry.js";
import { formatCents, formatMoney } from "~/lib/format.js";
import { ProjectStatus } from "@capakraken/shared/types";
import { ProjectStatus } from "@nexus/shared/types";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { PROJECT_STATUS_BADGE as STATUS_COLORS } from "~/lib/status-styles.js";
import { AnimatedNumber } from "~/components/ui/AnimatedNumber.js";
@@ -37,11 +37,7 @@ export function ProjectTableWidget({ config, onConfigChange }: WidgetProps) {
{/* header row */}
<div className="flex gap-3 px-3 py-2">
{[40, 120, 80, 60, 60].map((w, i) => (
<div
key={i}
className="h-2.5 shimmer-skeleton rounded"
style={{ width: w }}
/>
<div key={i} className="h-2.5 shimmer-skeleton rounded" style={{ width: w }} />
))}
</div>
{/* data rows */}
apps/web/src/components/dynamic-fields/DynamicFieldEditor.tsx
+16 -33
View File
@@ -2,8 +2,8 @@
import { clsx } from "clsx";
import { DateInput } from "~/components/ui/DateInput.js";
import { FieldType } from "@capakraken/shared";
import type { BlueprintFieldDefinition } from "@capakraken/shared";
import { FieldType } from "@nexus/shared";
import type { BlueprintFieldDefinition } from "@nexus/shared";
interface Props {
fieldDefs: BlueprintFieldDefinition[];
@@ -16,7 +16,8 @@ interface Props {
const INPUT_BASE =
"w-full px-3 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-500 transition-colors";
const INPUT_NORMAL = "border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
const INPUT_NORMAL =
"border-gray-300 bg-white text-gray-900 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-100";
const INPUT_ERROR = "border-red-400 bg-red-50 text-gray-900 dark:border-red-500 dark:text-gray-100";
function inputClass(hasError: boolean) {
@@ -39,7 +40,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
<input
type="text"
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
placeholder={placeholder}
maxLength={validation?.maxLength}
minLength={validation?.minLength}
@@ -52,7 +53,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
return (
<textarea
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
placeholder={placeholder}
maxLength={validation?.maxLength}
onChange={(e) => onChange(key, e.target.value)}
@@ -70,9 +71,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
placeholder={placeholder}
min={validation?.min}
max={validation?.max}
onChange={(e) =>
onChange(key, e.target.value === "" ? "" : Number(e.target.value))
}
onChange={(e) => onChange(key, e.target.value === "" ? "" : Number(e.target.value))}
className={inputClass(hasError)}
/>
);
@@ -88,9 +87,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
onChange={(e) => onChange(key, e.target.checked)}
className="w-4 h-4 rounded border-gray-300 text-brand-600 focus:ring-brand-500"
/>
<span className="text-sm text-gray-700">
{checked ? "Yes" : "No"}
</span>
<span className="text-sm text-gray-700">{checked ? "Yes" : "No"}</span>
</label>
);
}
@@ -99,7 +96,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
return (
<DateInput
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
onChange={(v) => onChange(key, v)}
className={inputClass(hasError)}
/>
@@ -109,7 +106,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
return (
<select
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
onChange={(e) => onChange(key, e.target.value)}
className={inputClass(hasError)}
>
@@ -155,7 +152,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
<input
type="url"
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
placeholder={placeholder ?? "https://"}
onChange={(e) => onChange(key, e.target.value)}
className={inputClass(hasError)}
@@ -167,7 +164,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
<input
type="email"
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
placeholder={placeholder ?? "email@example.com"}
onChange={(e) => onChange(key, e.target.value)}
className={inputClass(hasError)}
@@ -179,7 +176,7 @@ function FieldInput({ fieldDef, value, onChange, hasError }: FieldInputProps) {
<input
type="text"
id={key}
value={typeof value === "string" ? value : (value ?? "") as string}
value={typeof value === "string" ? value : ((value ?? "") as string)}
placeholder={placeholder}
onChange={(e) => onChange(key, e.target.value)}
className={inputClass(hasError)}
@@ -199,10 +196,7 @@ function FieldWrapper({ fieldDef, value, onChange, error }: FieldWrapperProps) {
const hasError = Boolean(error);
return (
<div className="flex flex-col gap-1">
<label
htmlFor={fieldDef.key}
className="text-sm font-medium text-gray-700"
>
<label htmlFor={fieldDef.key} className="text-sm font-medium text-gray-700">
{fieldDef.label}
{fieldDef.required && (
<span className="ml-0.5 text-red-500" aria-hidden="true">
@@ -211,12 +205,7 @@ function FieldWrapper({ fieldDef, value, onChange, error }: FieldWrapperProps) {
)}
</label>
<FieldInput
fieldDef={fieldDef}
value={value}
onChange={onChange}
hasError={hasError}
/>
<FieldInput fieldDef={fieldDef} value={value} onChange={onChange} hasError={hasError} />
{fieldDef.description && !error && (
<p className="text-xs text-gray-400">{fieldDef.description}</p>
@@ -262,13 +251,7 @@ function FieldGroup({
);
}
export function DynamicFieldEditor({
fieldDefs,
values,
onChange,
errors,
className,
}: Props) {
export function DynamicFieldEditor({ fieldDefs, values, onChange, errors, className }: Props) {
const sorted = [...fieldDefs].sort((a, b) => a.order - b.order);
const ungrouped = sorted.filter((f) => !f.group);
apps/web/src/components/dynamic-fields/DynamicFieldRenderer.tsx
+2 -2
View File
@@ -1,7 +1,7 @@
import { clsx } from "clsx";
import { formatDateLong } from "~/lib/format.js";
import { FieldType } from "@capakraken/shared";
import type { BlueprintFieldDefinition } from "@capakraken/shared";
import { FieldType } from "@nexus/shared";
import type { BlueprintFieldDefinition } from "@nexus/shared";
interface Props {
fieldDefs: BlueprintFieldDefinition[];
apps/web/src/components/estimates/CommercialTermsEditor.tsx
+39 -65
View File
@@ -1,12 +1,12 @@
"use client";
import { useEffect, useState } from "react";
import type { CommercialTerms, PaymentMilestone, PricingModel } from "@capakraken/shared";
import type { CommercialTerms, PaymentMilestone, PricingModel } from "@nexus/shared";
import {
computeCommercialTermsSummary,
computeMilestoneAmounts,
validatePaymentMilestones,
} from "@capakraken/engine";
} from "@nexus/engine";
import { clsx } from "clsx";
import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
import { formatMoney } from "~/lib/format.js";
@@ -100,7 +100,8 @@ export function CommercialTermsEditor({
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<p className="text-xs uppercase tracking-wide text-gray-400">
Adjusted Cost <InfoTooltip content="Base cost + contingency. Adjusted cost = base cost x (1 + contingency %)." />
Adjusted Cost{" "}
<InfoTooltip content="Base cost + contingency. Adjusted cost = base cost x (1 + contingency %)." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{formatMoney(summary.adjustedCostCents, baseCurrency)}
@@ -113,7 +114,8 @@ export function CommercialTermsEditor({
</div>
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<p className="text-xs uppercase tracking-wide text-gray-400">
Adjusted Price <InfoTooltip content="Base price minus discount. Adjusted price = base price x (1 - discount %)." />
Adjusted Price{" "}
<InfoTooltip content="Base price minus discount. Adjusted price = base price x (1 - discount %)." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{formatMoney(summary.adjustedPriceCents, baseCurrency)}
@@ -126,14 +128,13 @@ export function CommercialTermsEditor({
</div>
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<p className="text-xs uppercase tracking-wide text-gray-400">
Adjusted Margin <InfoTooltip content="Adjusted margin = adjusted price - adjusted cost. Margin % = margin / adjusted price x 100." />
Adjusted Margin{" "}
<InfoTooltip content="Adjusted margin = adjusted price - adjusted cost. Margin % = margin / adjusted price x 100." />
</p>
<p
className={clsx(
"mt-2 text-2xl font-semibold",
summary.adjustedMarginCents >= 0
? "text-emerald-700"
: "text-red-700",
summary.adjustedMarginCents >= 0 ? "text-emerald-700" : "text-red-700",
)}
>
{formatMoney(summary.adjustedMarginCents, baseCurrency)}
@@ -144,16 +145,15 @@ export function CommercialTermsEditor({
</div>
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<p className="text-xs uppercase tracking-wide text-gray-400">
Pricing Model <InfoTooltip content="Fixed Price: agreed total. Time & Materials: billed per actual hour. Hybrid: mix of both." />
Pricing Model{" "}
<InfoTooltip content="Fixed Price: agreed total. Time & Materials: billed per actual hour. Hybrid: mix of both." />
</p>
<p className="mt-2 text-lg font-semibold text-gray-900">
{PRICING_MODELS.find((m) => m.value === terms.pricingModel)?.label ??
terms.pricingModel}
</p>
{terms.warrantyMonths > 0 && (
<p className="mt-1 text-xs text-gray-500">
{terms.warrantyMonths} mo warranty
</p>
<p className="mt-1 text-xs text-gray-500">{terms.warrantyMonths} mo warranty</p>
)}
</div>
</div>
@@ -161,9 +161,7 @@ export function CommercialTermsEditor({
{/* Terms editor */}
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<div className="flex items-center justify-between mb-4">
<h3 className="text-base font-semibold text-gray-900">
Commercial Terms
</h3>
<h3 className="text-base font-semibold text-gray-900">Commercial Terms</h3>
{canEdit && dirty && (
<button
type="button"
@@ -184,9 +182,7 @@ export function CommercialTermsEditor({
</label>
<select
value={terms.pricingModel}
onChange={(e) =>
update({ pricingModel: e.target.value as PricingModel })
}
onChange={(e) => update({ pricingModel: e.target.value as PricingModel })}
disabled={!canEdit}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm disabled:bg-gray-50"
>
@@ -201,7 +197,8 @@ export function CommercialTermsEditor({
{/* Contingency % */}
<div>
<label className="block text-xs font-medium text-gray-500 mb-1">
Contingency % <InfoTooltip content="Risk buffer added to the base cost. Adjusted cost = base cost x (1 + contingency %)." />
Contingency %{" "}
<InfoTooltip content="Risk buffer added to the base cost. Adjusted cost = base cost x (1 + contingency %)." />
</label>
<input
type="number"
@@ -209,9 +206,7 @@ export function CommercialTermsEditor({
max={100}
step={0.5}
value={terms.contingencyPercent}
onChange={(e) =>
update({ contingencyPercent: parseFloat(e.target.value) || 0 })
}
onChange={(e) => update({ contingencyPercent: parseFloat(e.target.value) || 0 })}
disabled={!canEdit}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tabular-nums disabled:bg-gray-50"
/>
@@ -220,7 +215,8 @@ export function CommercialTermsEditor({
{/* Discount % */}
<div>
<label className="block text-xs font-medium text-gray-500 mb-1">
Discount % <InfoTooltip content="Client discount applied to the base price. Adjusted price = base price x (1 - discount %)." />
Discount %{" "}
<InfoTooltip content="Client discount applied to the base price. Adjusted price = base price x (1 - discount %)." />
</label>
<input
type="number"
@@ -228,9 +224,7 @@ export function CommercialTermsEditor({
max={100}
step={0.5}
value={terms.discountPercent}
onChange={(e) =>
update({ discountPercent: parseFloat(e.target.value) || 0 })
}
onChange={(e) => update({ discountPercent: parseFloat(e.target.value) || 0 })}
disabled={!canEdit}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tabular-nums disabled:bg-gray-50"
/>
@@ -239,16 +233,15 @@ export function CommercialTermsEditor({
{/* Payment Terms */}
<div>
<label className="block text-xs font-medium text-gray-500 mb-1">
Payment Terms (days) <InfoTooltip content="Number of days after invoice date within which payment is due." />
Payment Terms (days){" "}
<InfoTooltip content="Number of days after invoice date within which payment is due." />
</label>
<input
type="number"
min={0}
max={365}
value={terms.paymentTermDays}
onChange={(e) =>
update({ paymentTermDays: parseInt(e.target.value) || 0 })
}
onChange={(e) => update({ paymentTermDays: parseInt(e.target.value) || 0 })}
disabled={!canEdit}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tabular-nums disabled:bg-gray-50"
/>
@@ -257,16 +250,15 @@ export function CommercialTermsEditor({
{/* Warranty */}
<div>
<label className="block text-xs font-medium text-gray-500 mb-1">
Warranty (months) <InfoTooltip content="Post-delivery warranty period during which defects are covered at no extra cost." />
Warranty (months){" "}
<InfoTooltip content="Post-delivery warranty period during which defects are covered at no extra cost." />
</label>
<input
type="number"
min={0}
max={60}
value={terms.warrantyMonths}
onChange={(e) =>
update({ warrantyMonths: parseInt(e.target.value) || 0 })
}
onChange={(e) => update({ warrantyMonths: parseInt(e.target.value) || 0 })}
disabled={!canEdit}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm tabular-nums disabled:bg-gray-50"
/>
@@ -276,13 +268,12 @@ export function CommercialTermsEditor({
{/* Notes */}
<div className="mt-4">
<label className="block text-xs font-medium text-gray-500 mb-1">
Notes <InfoTooltip content="Free-text notes about the commercial terms, e.g. special conditions or negotiation context." />
Notes{" "}
<InfoTooltip content="Free-text notes about the commercial terms, e.g. special conditions or negotiation context." />
</label>
<textarea
value={terms.notes ?? ""}
onChange={(e) =>
update({ notes: e.target.value || null })
}
onChange={(e) => update({ notes: e.target.value || null })}
disabled={!canEdit}
rows={2}
className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm disabled:bg-gray-50"
@@ -295,17 +286,15 @@ export function CommercialTermsEditor({
<div className="rounded-3xl border border-gray-200 bg-white p-5 shadow-sm">
<div className="flex items-center justify-between mb-4">
<h3 className="text-base font-semibold text-gray-900">
Payment Milestones <InfoTooltip content="Define when payments are due as a percentage of the adjusted price. Milestones should sum to 100%." />
Payment Milestones{" "}
<InfoTooltip content="Define when payments are due as a percentage of the adjusted price. Milestones should sum to 100%." />
</h3>
{canEdit && (
<button
type="button"
onClick={() =>
update({
paymentMilestones: [
...terms.paymentMilestones,
{ label: "", percent: 0 },
],
paymentMilestones: [...terms.paymentMilestones, { label: "", percent: 0 }],
})
}
className="rounded-lg border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50"
@@ -328,9 +317,7 @@ export function CommercialTermsEditor({
)}
{terms.paymentMilestones.length === 0 ? (
<p className="text-sm text-gray-400">
No payment milestones defined.
</p>
<p className="text-sm text-gray-400">No payment milestones defined.</p>
) : (
<div className="overflow-x-auto">
<table className="w-full text-left text-sm">
@@ -340,9 +327,7 @@ export function CommercialTermsEditor({
<th className="px-3 py-2 text-right font-medium w-24">%</th>
<th className="px-3 py-2 text-right font-medium">Amount</th>
<th className="px-3 py-2 font-medium w-36">Due Date</th>
{canEdit && (
<th className="pl-3 py-2 font-medium w-12" />
)}
{canEdit && <th className="pl-3 py-2 font-medium w-12" />}
</tr>
</thead>
<tbody>
@@ -386,15 +371,11 @@ export function CommercialTermsEditor({
className="w-20 rounded border border-gray-200 px-2 py-1 text-right text-sm tabular-nums"
/>
) : (
<span className="tabular-nums text-gray-700">
{ms.percent}%
</span>
<span className="tabular-nums text-gray-700">{ms.percent}%</span>
)}
</td>
<td className="px-3 py-2 text-right tabular-nums text-gray-700">
{amount
? formatMoney(amount.amountCents, baseCurrency)
: "—"}
{amount ? formatMoney(amount.amountCents, baseCurrency) : "—"}
</td>
<td className="px-3 py-2">
{canEdit ? (
@@ -412,9 +393,7 @@ export function CommercialTermsEditor({
className="rounded border border-gray-200 px-2 py-1 text-sm"
/>
) : (
<span className="text-gray-700">
{ms.dueDate ?? "—"}
</span>
<span className="text-gray-700">{ms.dueDate ?? "—"}</span>
)}
</td>
{canEdit && (
@@ -422,9 +401,7 @@ export function CommercialTermsEditor({
<button
type="button"
onClick={() => {
const updated = terms.paymentMilestones.filter(
(_, i) => i !== idx,
);
const updated = terms.paymentMilestones.filter((_, i) => i !== idx);
update({ paymentMilestones: updated });
}}
className="text-red-400 hover:text-red-600 text-xs"
@@ -441,10 +418,7 @@ export function CommercialTermsEditor({
<tr className="border-t-2 border-gray-300 font-semibold">
<td className="py-2 pr-3 text-gray-900">Total</td>
<td className="px-3 py-2 text-right tabular-nums text-gray-900">
{terms.paymentMilestones
.reduce((sum, m) => sum + m.percent, 0)
.toFixed(1)}
%
{terms.paymentMilestones.reduce((sum, m) => sum + m.percent, 0).toFixed(1)}%
</td>
<td className="px-3 py-2 text-right tabular-nums text-gray-900">
{formatMoney(
apps/web/src/components/estimates/EstimateWizard.tsx
+419 -108
View File
@@ -1,8 +1,8 @@
"use client";
import { useEffect, useMemo, useRef, useState } from "react";
import { EstimateStatus } from "@capakraken/shared";
import { computeEvenSpread } from "@capakraken/engine";
import { EstimateStatus } from "@nexus/shared";
import { computeEvenSpread } from "@nexus/engine";
import { isSpreadsheetFile } from "~/lib/excel.js";
import { parseScopeImport } from "~/lib/scopeImportParser.js";
import { clsx } from "clsx";
@@ -189,7 +189,7 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
}));
const selectedProject = projectId
? projects.find((project) => project.id === projectId) ?? null
? (projects.find((project) => project.id === projectId) ?? null)
: null;
const summary = useMemo(() => {
@@ -210,9 +210,8 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
}, [demandLines]);
const marginCents = summary.totalPriceCents - summary.totalCostCents;
const marginPercent = summary.totalPriceCents > 0
? Math.round((marginCents / summary.totalPriceCents) * 100)
: 0;
const marginPercent =
summary.totalPriceCents > 0 ? Math.round((marginCents / summary.totalPriceCents) * 100) : 0;
useEffect(() => {
function handleKeyDown(event: KeyboardEvent) {
@@ -226,27 +225,19 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
}, [onClose]);
function updateAssumption(id: string, patch: Partial<AssumptionRow>) {
setAssumptions((current) =>
current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
);
setAssumptions((current) => current.map((row) => (row.id === id ? { ...row, ...patch } : row)));
}
function updateScopeItem(id: string, patch: Partial<ScopeRow>) {
setScopeItems((current) =>
current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
);
setScopeItems((current) => current.map((row) => (row.id === id ? { ...row, ...patch } : row)));
}
function updateDemandLine(id: string, patch: Partial<DemandRow>) {
setDemandLines((current) =>
current.map((row) => (row.id === id ? { ...row, ...patch } : row)),
);
setDemandLines((current) => current.map((row) => (row.id === id ? { ...row, ...patch } : row)));
}
function applyResource(resourceId: string | null, demandLineId: string) {
const resource = resourceId
? resources.find((item) => item.id === resourceId) ?? null
: null;
const resource = resourceId ? (resources.find((item) => item.id === resourceId) ?? null) : null;
updateDemandLine(demandLineId, {
resourceId,
@@ -342,15 +333,14 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
const normalizedDemandLines = demandLines
.map((line, index) => {
const resource = line.resourceId
? resources.find((item) => item.id === line.resourceId) ?? null
: null;
const role = line.roleId
? roles.find((item) => item.id === line.roleId) ?? null
? (resources.find((item) => item.id === line.resourceId) ?? null)
: null;
const role = line.roleId ? (roles.find((item) => item.id === line.roleId) ?? null) : null;
const hours = toHours(line.hours);
const costRateCents = toCents(line.costRate);
const billRateCents = toCents(line.billRate);
const displayName = line.name.trim() || resource?.displayName || role?.name || `Line ${index + 1}`;
const displayName =
line.name.trim() || resource?.displayName || role?.name || `Line ${index + 1}`;
return {
resourceId: line.resourceId ?? undefined,
@@ -449,14 +439,21 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-950/45 p-4">
<div ref={panelRef} className="flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-[32px] bg-white shadow-2xl">
<div
ref={panelRef}
className="flex max-h-[92vh] w-full max-w-6xl flex-col overflow-hidden rounded-[32px] bg-white shadow-2xl"
>
<div className="border-b border-gray-100 px-6 py-5">
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">Estimate Wizard</p>
<h2 className="mt-2 text-2xl font-semibold text-gray-900">Create a connected estimate</h2>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-brand-600">
Estimate Wizard
</p>
<h2 className="mt-2 text-2xl font-semibold text-gray-900">
Create a connected estimate
</h2>
<p className="mt-1 text-sm text-gray-500">
Rates, resource snapshots, and project linkage are pulled from existing CapaKraken data.
Rates, resource snapshots, and project linkage are pulled from existing Nexus data.
</p>
</div>
<button
@@ -501,20 +498,50 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-5">
<div className="grid gap-5 md:grid-cols-2">
<div>
<label className="app-label">Estimate Name <InfoTooltip content="A descriptive name for this estimate, e.g. project name + scope qualifier." /></label>
<input value={name} onChange={(event) => setName(event.target.value)} className="app-input" placeholder="CGI Breakdown Q2 2026" />
<label className="app-label">
Estimate Name{" "}
<InfoTooltip content="A descriptive name for this estimate, e.g. project name + scope qualifier." />
</label>
<input
value={name}
onChange={(event) => setName(event.target.value)}
className="app-input"
placeholder="CGI Breakdown Q2 2026"
/>
</div>
<div>
<label className="app-label">Linked Project <InfoTooltip content="Link to an existing CapaKraken project. This enables automatic date-based phasing and planning handoff." /></label>
<ProjectCombobox value={projectId} onChange={setProjectId} placeholder="Link to project" />
<label className="app-label">
Linked Project{" "}
<InfoTooltip content="Link to an existing Nexus project. This enables automatic date-based phasing and planning handoff." />
</label>
<ProjectCombobox
value={projectId}
onChange={setProjectId}
placeholder="Link to project"
/>
</div>
<div>
<label className="app-label">Opportunity ID <InfoTooltip content="Optional external reference from your CRM or sales system to track this opportunity." /></label>
<input value={opportunityId} onChange={(event) => setOpportunityId(event.target.value)} className="app-input" placeholder="Optional CRM or sales reference" />
<label className="app-label">
Opportunity ID{" "}
<InfoTooltip content="Optional external reference from your CRM or sales system to track this opportunity." />
</label>
<input
value={opportunityId}
onChange={(event) => setOpportunityId(event.target.value)}
className="app-input"
placeholder="Optional CRM or sales reference"
/>
</div>
<div>
<label className="app-label">Estimate Status <InfoTooltip content="DRAFT: work in progress. IN_REVIEW: submitted for approval. APPROVED: locked and ready for handoff. ARCHIVED: no longer active." /></label>
<select value={status} onChange={(event) => setStatus(event.target.value as EstimateStatus)} className="app-select w-full">
<label className="app-label">
Estimate Status{" "}
<InfoTooltip content="DRAFT: work in progress. IN_REVIEW: submitted for approval. APPROVED: locked and ready for handoff. ARCHIVED: no longer active." />
</label>
<select
value={status}
onChange={(event) => setStatus(event.target.value as EstimateStatus)}
className="app-select w-full"
>
{Object.values(EstimateStatus).map((value) => (
<option key={value} value={value}>
{value.replace("_", " ")}
@@ -523,17 +550,36 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
</select>
</div>
<div>
<label className="app-label">Base Currency <InfoTooltip content="ISO 4217 currency code (e.g. EUR, USD) used for all monetary values in this estimate." /></label>
<input value={baseCurrency} onChange={(event) => setBaseCurrency(event.target.value.toUpperCase())} className="app-input" maxLength={3} />
<label className="app-label">
Base Currency{" "}
<InfoTooltip content="ISO 4217 currency code (e.g. EUR, USD) used for all monetary values in this estimate." />
</label>
<input
value={baseCurrency}
onChange={(event) => setBaseCurrency(event.target.value.toUpperCase())}
className="app-input"
maxLength={3}
/>
</div>
<div>
<label className="app-label">Version Label <InfoTooltip content="A label for the initial version snapshot. Use labels like 'Initial', 'Client revision 2', etc." /></label>
<input value={versionLabel} onChange={(event) => setVersionLabel(event.target.value)} className="app-input" placeholder="Initial" />
<label className="app-label">
Version Label{" "}
<InfoTooltip content="A label for the initial version snapshot. Use labels like 'Initial', 'Client revision 2', etc." />
</label>
<input
value={versionLabel}
onChange={(event) => setVersionLabel(event.target.value)}
className="app-input"
placeholder="Initial"
/>
</div>
</div>
<div>
<label className="app-label">Version Notes <InfoTooltip content="Free-text notes for this version. Document assumptions, exclusions, or client comments." /></label>
<label className="app-label">
Version Notes{" "}
<InfoTooltip content="Free-text notes for this version. Document assumptions, exclusions, or client comments." />
</label>
<textarea
value={versionNotes}
onChange={(event) => setVersionNotes(event.target.value)}
@@ -547,13 +593,19 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<p className="text-sm font-semibold text-gray-900">Live connection preview</p>
<div className="mt-4 grid gap-3 md:grid-cols-2">
<div className="rounded-2xl bg-white px-4 py-3">
<p className="text-xs uppercase tracking-wide text-gray-400">Project source</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Project source
</p>
<p className="mt-1 text-sm text-gray-700">
{selectedProject ? `${selectedProject.shortCode} - ${selectedProject.name}` : "Not linked yet"}
{selectedProject
? `${selectedProject.shortCode} - ${selectedProject.name}`
: "Not linked yet"}
</p>
</div>
<div className="rounded-2xl bg-white px-4 py-3">
<p className="text-xs uppercase tracking-wide text-gray-400">Live catalogs</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Live catalogs
</p>
<p className="mt-1 text-sm text-gray-700">
{roles.length} roles, {resources.length} active resources available
</p>
@@ -567,22 +619,70 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900">Commercial and delivery assumptions <InfoTooltip content="Preconditions that affect the estimate validity. If an assumption changes, the estimate may need revision." /></h3>
<p className="text-sm text-gray-500">These rows replace free-form spreadsheet notes with structured data.</p>
<h3 className="text-lg font-semibold text-gray-900">
Commercial and delivery assumptions{" "}
<InfoTooltip content="Preconditions that affect the estimate validity. If an assumption changes, the estimate may need revision." />
</h3>
<p className="text-sm text-gray-500">
These rows replace free-form spreadsheet notes with structured data.
</p>
</div>
<button type="button" onClick={() => setAssumptions((current) => [...current, makeAssumption()])} className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
<button
type="button"
onClick={() => setAssumptions((current) => [...current, makeAssumption()])}
className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900"
>
Add assumption
</button>
</div>
<div className="space-y-3">
{assumptions.map((row) => (
<div key={row.id} className="grid gap-3 rounded-2xl border border-gray-100 p-4 md:grid-cols-[140px,1fr,1fr,1.2fr,auto]">
<input value={row.category} onChange={(event) => updateAssumption(row.id, { category: event.target.value })} className="app-input" placeholder="Category" />
<input value={row.label} onChange={(event) => updateAssumption(row.id, { label: event.target.value })} className="app-input" placeholder="Label" />
<input value={row.key} onChange={(event) => updateAssumption(row.id, { key: event.target.value })} className="app-input" placeholder="Key (optional)" />
<input value={row.value} onChange={(event) => updateAssumption(row.id, { value: event.target.value })} className="app-input" placeholder="Value" />
<button type="button" onClick={() => setAssumptions((current) => current.filter((item) => item.id !== row.id))} className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50">
<div
key={row.id}
className="grid gap-3 rounded-2xl border border-gray-100 p-4 md:grid-cols-[140px,1fr,1fr,1.2fr,auto]"
>
<input
value={row.category}
onChange={(event) =>
updateAssumption(row.id, { category: event.target.value })
}
className="app-input"
placeholder="Category"
/>
<input
value={row.label}
onChange={(event) =>
updateAssumption(row.id, { label: event.target.value })
}
className="app-input"
placeholder="Label"
/>
<input
value={row.key}
onChange={(event) =>
updateAssumption(row.id, { key: event.target.value })
}
className="app-input"
placeholder="Key (optional)"
/>
<input
value={row.value}
onChange={(event) =>
updateAssumption(row.id, { value: event.target.value })
}
className="app-input"
placeholder="Value"
/>
<button
type="button"
onClick={() =>
setAssumptions((current) =>
current.filter((item) => item.id !== row.id),
)
}
className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50"
>
Remove
</button>
</div>
@@ -595,15 +695,32 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900">Scope breakdown <InfoTooltip content="Deliverables and work packages that define what is included in this estimate." /></h3>
<p className="text-sm text-gray-500">Create structured work packages that can later evolve into versioned estimate scope.</p>
<h3 className="text-lg font-semibold text-gray-900">
Scope breakdown{" "}
<InfoTooltip content="Deliverables and work packages that define what is included in this estimate." />
</h3>
<p className="text-sm text-gray-500">
Create structured work packages that can later evolve into versioned
estimate scope.
</p>
</div>
<div className="flex gap-2">
<label className="cursor-pointer rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
Import XLSX
<input type="file" accept=".xlsx,.csv" onChange={handleScopeImport} className="hidden" />
<input
type="file"
accept=".xlsx,.csv"
onChange={handleScopeImport}
className="hidden"
/>
</label>
<button type="button" onClick={() => setScopeItems((current) => [...current, makeScope(current.length + 1)])} className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
<button
type="button"
onClick={() =>
setScopeItems((current) => [...current, makeScope(current.length + 1)])
}
className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900"
>
Add scope row
</button>
</div>
@@ -619,12 +736,46 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-3">
{scopeItems.map((item, index) => (
<div key={item.id} className="grid gap-3 rounded-2xl border border-gray-100 p-4 md:grid-cols-[90px,120px,1fr,1.2fr,auto]">
<input value={String(index + 1)} readOnly className={clsx("app-input", "bg-gray-50 text-gray-500")} />
<input value={item.scopeType} onChange={(event) => updateScopeItem(item.id, { scopeType: event.target.value })} className="app-input" placeholder="Type" />
<input value={item.name} onChange={(event) => updateScopeItem(item.id, { name: event.target.value })} className="app-input" placeholder="Name" />
<input value={item.description} onChange={(event) => updateScopeItem(item.id, { description: event.target.value })} className="app-input" placeholder="Description" />
<button type="button" onClick={() => setScopeItems((current) => current.filter((row) => row.id !== item.id))} className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50">
<div
key={item.id}
className="grid gap-3 rounded-2xl border border-gray-100 p-4 md:grid-cols-[90px,120px,1fr,1.2fr,auto]"
>
<input
value={String(index + 1)}
readOnly
className={clsx("app-input", "bg-gray-50 text-gray-500")}
/>
<input
value={item.scopeType}
onChange={(event) =>
updateScopeItem(item.id, { scopeType: event.target.value })
}
className="app-input"
placeholder="Type"
/>
<input
value={item.name}
onChange={(event) =>
updateScopeItem(item.id, { name: event.target.value })
}
className="app-input"
placeholder="Name"
/>
<input
value={item.description}
onChange={(event) =>
updateScopeItem(item.id, { description: event.target.value })
}
className="app-input"
placeholder="Description"
/>
<button
type="button"
onClick={() =>
setScopeItems((current) => current.filter((row) => row.id !== item.id))
}
className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50"
>
Remove
</button>
</div>
@@ -637,10 +788,20 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900">Staffing and rate lines <InfoTooltip content="Each line represents a staffing need. Line cost = hours x cost rate. Line price = hours x sell rate." /></h3>
<p className="text-sm text-gray-500">Selecting a resource pre-fills cost rate, sell rate, chapter, and role from live data.</p>
<h3 className="text-lg font-semibold text-gray-900">
Staffing and rate lines{" "}
<InfoTooltip content="Each line represents a staffing need. Line cost = hours x cost rate. Line price = hours x sell rate." />
</h3>
<p className="text-sm text-gray-500">
Selecting a resource pre-fills cost rate, sell rate, chapter, and role from
live data.
</p>
</div>
<button type="button" onClick={() => setDemandLines((current) => [...current, makeDemand()])} className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
<button
type="button"
onClick={() => setDemandLines((current) => [...current, makeDemand()])}
className="rounded-xl border border-gray-200 px-3 py-2 text-sm text-gray-600 transition hover:border-gray-300 hover:text-gray-900"
>
Add staffing line
</button>
</div>
@@ -648,19 +809,35 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-4">
{demandLines.map((line) => {
const resource = line.resourceId
? resources.find((item) => item.id === line.resourceId) ?? null
? (resources.find((item) => item.id === line.resourceId) ?? null)
: null;
return (
<div key={line.id} className="rounded-3xl border border-gray-100 p-4">
<div className="grid gap-4 lg:grid-cols-2">
<div>
<label className="app-label">Resource <InfoTooltip content="Link to a live CapaKraken resource. Auto-fills rates, chapter, and role." /></label>
<ResourceCombobox value={line.resourceId} onChange={(resourceId) => applyResource(resourceId, line.id)} placeholder="Search resource" />
<label className="app-label">
Resource{" "}
<InfoTooltip content="Link to a live Nexus resource. Auto-fills rates, chapter, and role." />
</label>
<ResourceCombobox
value={line.resourceId}
onChange={(resourceId) => applyResource(resourceId, line.id)}
placeholder="Search resource"
/>
</div>
<div>
<label className="app-label">Role <InfoTooltip content="The production role for this demand line (e.g. Compositor, Animator)." /></label>
<select value={line.roleId ?? ""} onChange={(event) => updateDemandLine(line.id, { roleId: event.target.value || null })} className="app-select w-full">
<label className="app-label">
Role{" "}
<InfoTooltip content="The production role for this demand line (e.g. Compositor, Animator)." />
</label>
<select
value={line.roleId ?? ""}
onChange={(event) =>
updateDemandLine(line.id, { roleId: event.target.value || null })
}
className="app-select w-full"
>
<option value="">Unassigned</option>
{roles.map((role) => (
<option key={role.id} value={role.id}>
@@ -670,44 +847,124 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
</select>
</div>
<div>
<label className="app-label">Line Name <InfoTooltip content="Descriptive name for this staffing line, e.g. 'Compositing Lead' or 'PM overhead'." /></label>
<input value={line.name} onChange={(event) => updateDemandLine(line.id, { name: event.target.value })} className="app-input" placeholder="Compositing, lighting, PM, ..." />
<label className="app-label">
Line Name{" "}
<InfoTooltip content="Descriptive name for this staffing line, e.g. 'Compositing Lead' or 'PM overhead'." />
</label>
<input
value={line.name}
onChange={(event) =>
updateDemandLine(line.id, { name: event.target.value })
}
className="app-input"
placeholder="Compositing, lighting, PM, ..."
/>
</div>
<div>
<label className="app-label">Chapter <InfoTooltip content="Department or cost center. Auto-filled when a resource is linked." /></label>
<input value={line.chapter} onChange={(event) => updateDemandLine(line.id, { chapter: event.target.value })} className="app-input" placeholder="Auto-filled from resource when linked" />
<label className="app-label">
Chapter{" "}
<InfoTooltip content="Department or cost center. Auto-filled when a resource is linked." />
</label>
<input
value={line.chapter}
onChange={(event) =>
updateDemandLine(line.id, { chapter: event.target.value })
}
className="app-input"
placeholder="Auto-filled from resource when linked"
/>
</div>
<div>
<label className="app-label">Hours <InfoTooltip content="Total estimated effort in hours. Used to calculate line cost and price." /></label>
<input value={line.hours} onChange={(event) => updateDemandLine(line.id, { hours: event.target.value })} className="app-input" inputMode="decimal" />
<label className="app-label">
Hours{" "}
<InfoTooltip content="Total estimated effort in hours. Used to calculate line cost and price." />
</label>
<input
value={line.hours}
onChange={(event) =>
updateDemandLine(line.id, { hours: event.target.value })
}
className="app-input"
inputMode="decimal"
/>
</div>
<div>
<label className="app-label">Currency <InfoTooltip content="ISO 4217 currency code for this line's rates." /></label>
<input value={line.currency} onChange={(event) => updateDemandLine(line.id, { currency: event.target.value.toUpperCase() })} className="app-input" maxLength={3} />
<label className="app-label">
Currency{" "}
<InfoTooltip content="ISO 4217 currency code for this line's rates." />
</label>
<input
value={line.currency}
onChange={(event) =>
updateDemandLine(line.id, {
currency: event.target.value.toUpperCase(),
})
}
className="app-input"
maxLength={3}
/>
</div>
<div>
<label className="app-label">Cost Rate / h <InfoTooltip content="Internal hourly cost rate in EUR. Line cost = hours x cost rate." /></label>
<input value={line.costRate} onChange={(event) => updateDemandLine(line.id, { costRate: event.target.value })} className="app-input" inputMode="decimal" />
<label className="app-label">
Cost Rate / h{" "}
<InfoTooltip content="Internal hourly cost rate in EUR. Line cost = hours x cost rate." />
</label>
<input
value={line.costRate}
onChange={(event) =>
updateDemandLine(line.id, { costRate: event.target.value })
}
className="app-input"
inputMode="decimal"
/>
</div>
<div>
<label className="app-label">Sell Rate / h <InfoTooltip content="Client-facing hourly rate. Line price = hours x sell rate." /></label>
<input value={line.billRate} onChange={(event) => updateDemandLine(line.id, { billRate: event.target.value })} className="app-input" inputMode="decimal" />
<label className="app-label">
Sell Rate / h{" "}
<InfoTooltip content="Client-facing hourly rate. Line price = hours x sell rate." />
</label>
<input
value={line.billRate}
onChange={(event) =>
updateDemandLine(line.id, { billRate: event.target.value })
}
className="app-input"
inputMode="decimal"
/>
</div>
</div>
<div className="mt-4 flex flex-wrap items-center justify-between gap-3 rounded-2xl bg-gray-50 px-4 py-3">
<div className="text-sm text-gray-600">
{resource ? `Linked to ${resource.displayName} (${resource.eid})` : "Manual line"}
{resource
? `Linked to ${resource.displayName} (${resource.eid})`
: "Manual line"}
</div>
<div className="flex flex-wrap gap-4 text-sm">
<span className="font-medium text-gray-700">
Cost {formatMoney(Math.round(toHours(line.hours) * toCents(line.costRate)), line.currency)}
Cost{" "}
{formatMoney(
Math.round(toHours(line.hours) * toCents(line.costRate)),
line.currency,
)}
</span>
<span className="font-medium text-gray-700">
Price {formatMoney(Math.round(toHours(line.hours) * toCents(line.billRate)), line.currency)}
Price{" "}
{formatMoney(
Math.round(toHours(line.hours) * toCents(line.billRate)),
line.currency,
)}
</span>
</div>
<button type="button" onClick={() => setDemandLines((current) => current.filter((item) => item.id !== line.id))} className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50">
<button
type="button"
onClick={() =>
setDemandLines((current) =>
current.filter((item) => item.id !== line.id),
)
}
className="rounded-xl border border-transparent px-3 py-2 text-sm text-red-500 transition hover:border-red-100 hover:bg-red-50"
>
Remove
</button>
</div>
@@ -722,24 +979,45 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<div className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-gray-900">Review</h3>
<p className="text-sm text-gray-500">The summary metrics below are recalculated from the demand rows and persisted on create.</p>
<p className="text-sm text-gray-500">
The summary metrics below are recalculated from the demand rows and persisted
on create.
</p>
</div>
<div className="grid gap-4 md:grid-cols-2 xl:grid-cols-4">
<div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
<p className="text-xs uppercase tracking-wide text-gray-400">Total Hours <InfoTooltip content="Sum of all demand line hours across the estimate." /></p>
<p className="mt-2 text-2xl font-semibold text-gray-900">{summary.totalHours.toFixed(1)}</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Total Hours{" "}
<InfoTooltip content="Sum of all demand line hours across the estimate." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{summary.totalHours.toFixed(1)}
</p>
</div>
<div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
<p className="text-xs uppercase tracking-wide text-gray-400">Total Cost <InfoTooltip content="Sum of (hours x cost rate) for each demand line. Stored in cents, displayed in EUR." /></p>
<p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(summary.totalCostCents, baseCurrency)}</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Total Cost{" "}
<InfoTooltip content="Sum of (hours x cost rate) for each demand line. Stored in cents, displayed in EUR." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{formatMoney(summary.totalCostCents, baseCurrency)}
</p>
</div>
<div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
<p className="text-xs uppercase tracking-wide text-gray-400">Total Price <InfoTooltip content="Sum of (hours x sell rate) for each demand line. This is the client-facing revenue." /></p>
<p className="mt-2 text-2xl font-semibold text-gray-900">{formatMoney(summary.totalPriceCents, baseCurrency)}</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Total Price{" "}
<InfoTooltip content="Sum of (hours x sell rate) for each demand line. This is the client-facing revenue." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{formatMoney(summary.totalPriceCents, baseCurrency)}
</p>
</div>
<div className="rounded-3xl border border-gray-100 bg-gray-50 px-5 py-4">
<p className="text-xs uppercase tracking-wide text-gray-400">Margin <InfoTooltip content="Margin = Total Price - Total Cost. Margin % = Margin / Total Price x 100." /></p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Margin{" "}
<InfoTooltip content="Margin = Total Price - Total Cost. Margin % = Margin / Total Price x 100." />
</p>
<p className="mt-2 text-2xl font-semibold text-gray-900">
{formatMoney(marginCents, baseCurrency)} ({marginPercent}%)
</p>
@@ -756,7 +1034,9 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
</div>
<div className="flex justify-between gap-4">
<dt>Project</dt>
<dd className="text-right text-gray-900">{selectedProject ? `${selectedProject.shortCode}` : "Standalone"}</dd>
<dd className="text-right text-gray-900">
{selectedProject ? `${selectedProject.shortCode}` : "Standalone"}
</dd>
</div>
<div className="flex justify-between gap-4">
<dt>Status</dt>
@@ -774,19 +1054,27 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
<dl className="mt-4 space-y-2 text-sm text-gray-600">
<div className="flex justify-between gap-4">
<dt>Assumptions</dt>
<dd className="text-right text-gray-900">{assumptions.filter((row) => row.label.trim()).length}</dd>
<dd className="text-right text-gray-900">
{assumptions.filter((row) => row.label.trim()).length}
</dd>
</div>
<div className="flex justify-between gap-4">
<dt>Scope items</dt>
<dd className="text-right text-gray-900">{scopeItems.filter((row) => row.name.trim()).length}</dd>
<dd className="text-right text-gray-900">
{scopeItems.filter((row) => row.name.trim()).length}
</dd>
</div>
<div className="flex justify-between gap-4">
<dt>Demand lines</dt>
<dd className="text-right text-gray-900">{demandLines.filter((row) => toHours(row.hours) > 0).length}</dd>
<dd className="text-right text-gray-900">
{demandLines.filter((row) => toHours(row.hours) > 0).length}
</dd>
</div>
<div className="flex justify-between gap-4">
<dt>Resource snapshots</dt>
<dd className="text-right text-gray-900">{new Set(demandLines.map((row) => row.resourceId).filter(Boolean)).size}</dd>
<dd className="text-right text-gray-900">
{new Set(demandLines.map((row) => row.resourceId).filter(Boolean)).size}
</dd>
</div>
</dl>
</div>
@@ -796,25 +1084,36 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
</div>
<aside className="border-t border-gray-100 bg-gray-50 px-6 py-6 lg:border-l lg:border-t-0">
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-gray-500">Dynamic summary</p>
<p className="text-xs font-semibold uppercase tracking-[0.24em] text-gray-500">
Dynamic summary
</p>
<div className="mt-4 space-y-3">
<div className="rounded-2xl bg-white px-4 py-3">
<p className="text-xs uppercase tracking-wide text-gray-400">Project link</p>
<p className="mt-1 text-sm text-gray-800">
{selectedProject ? `${selectedProject.shortCode} - ${selectedProject.name}` : "No linked project"}
{selectedProject
? `${selectedProject.shortCode} - ${selectedProject.name}`
: "No linked project"}
</p>
</div>
<div className="rounded-2xl bg-white px-4 py-3">
<p className="text-xs uppercase tracking-wide text-gray-400">Resource-linked demand</p>
<p className="text-xs uppercase tracking-wide text-gray-400">
Resource-linked demand
</p>
<p className="mt-1 text-sm text-gray-800">
{demandLines.filter((line) => line.resourceId).length} of {demandLines.length} rows tied to live resources
{demandLines.filter((line) => line.resourceId).length} of {demandLines.length}{" "}
rows tied to live resources
</p>
</div>
<div className="rounded-2xl bg-white px-4 py-3">
<p className="text-xs uppercase tracking-wide text-gray-400">Calculated totals</p>
<p className="mt-1 text-sm text-gray-800">{summary.totalHours.toFixed(1)} h</p>
<p className="mt-1 text-sm text-gray-800">{formatMoney(summary.totalCostCents, baseCurrency)} cost</p>
<p className="mt-1 text-sm text-gray-800">{formatMoney(summary.totalPriceCents, baseCurrency)} price</p>
<p className="mt-1 text-sm text-gray-800">
{formatMoney(summary.totalCostCents, baseCurrency)} cost
</p>
<p className="mt-1 text-sm text-gray-800">
{formatMoney(summary.totalPriceCents, baseCurrency)} price
</p>
</div>
</div>
@@ -827,15 +1126,27 @@ export function EstimateWizard({ onClose }: { onClose: () => void }) {
</div>
<div className="flex items-center justify-between border-t border-gray-100 px-6 py-4">
<button type="button" onClick={step === 0 ? onClose : goBack} className="rounded-xl border border-gray-200 px-4 py-2 text-sm font-medium text-gray-600 transition hover:border-gray-300 hover:text-gray-900">
<button
type="button"
onClick={step === 0 ? onClose : goBack}
className="rounded-xl border border-gray-200 px-4 py-2 text-sm font-medium text-gray-600 transition hover:border-gray-300 hover:text-gray-900"
>
{step === 0 ? "Cancel" : "Back"}
</button>
{step < STEP_LABELS.length - 1 ? (
<button type="button" onClick={goNext} className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700">
<button
type="button"
onClick={goNext}
className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700"
>
Next
</button>
) : (
<button type="submit" disabled={createMutation.isPending} className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60">
<button
type="submit"
disabled={createMutation.isPending}
className="rounded-xl bg-brand-600 px-4 py-2 text-sm font-semibold text-white transition hover:bg-brand-700 disabled:cursor-not-allowed disabled:opacity-60"
>
{createMutation.isPending ? "Creating..." : "Create Estimate"}
</button>
)}
apps/web/src/components/estimates/EstimateWorkspace.calculations.ts
+2 -3
View File
@@ -2,7 +2,7 @@ import type {
EstimateDemandLineCalculationMetadata,
EstimateDemandLineMetadata,
EstimateDemandLineRateMode,
} from "@capakraken/shared";
} from "@nexus/shared";
interface ResourceRateSnapshotLike {
lcrCents: number;
@@ -33,8 +33,7 @@ export function resolveDemandLineCalculationMetadata(options: {
const resourceSnapshot = options.resourceSnapshot;
const parsedMetadata = parseDemandLineMetadata(options.metadata);
const calculation =
typeof parsedMetadata.calculation === "object" &&
parsedMetadata.calculation !== null
typeof parsedMetadata.calculation === "object" && parsedMetadata.calculation !== null
? parsedMetadata.calculation
: undefined;
const costRateMode =
apps/web/src/components/estimates/EstimateWorkspace.types.ts
+1 -1
View File
@@ -7,7 +7,7 @@ import type {
EstimateExportFormat,
EstimateStatus,
EstimateVersionStatus,
} from "@capakraken/shared";
} from "@nexus/shared";
export interface EstimateMetricView {
id: string;
apps/web/src/components/estimates/EstimateWorkspaceClient.tsx
+1 -1
View File
@@ -3,7 +3,7 @@
import { useEffect, useState } from "react";
import Link from "next/link";
import dynamic from "next/dynamic";
import type { EstimateExportFormat } from "@capakraken/shared";
import type { EstimateExportFormat } from "@nexus/shared";
import { clsx } from "clsx";
import { useSession } from "next-auth/react";
import type {

Some files were not shown because too many files have changed in this diff Show More