fix(capacity): stabilize PTO flows and calendar consistency

Make PTO creation immediately approved, add PTO deletion, and ensure cache invalidation updates individual/team/revenue capacity consistently. Harden holiday duplicate handling (422), support PTO-day availability overrides without disabling edits, and align tests plus OpenSpec artifacts with the new behavior.
2026-02-19 22:47:39 -05:00
parent 0a9fdd248b
commit b821713cc7
21 changed files with 1081 additions and 128 deletions
--- a/frontend/src/lib/api/capacity.ts
+++ b/frontend/src/lib/api/capacity.ts
@@ -67,15 +67,20 @@ export async function getIndividualCapacity(
 export async function getTeamCapacity(month: string): Promise<TeamCapacity> {
  const response = await api.get<{
    month: string;
-    total_person_days: number;
-    total_hours: number;
+    total_person_days?: number;
+    total_hours?: number;
+    person_days?: number;
+    hours?: number;
    members: Array<{ id: string; name: string; person_days: number; hours: number }>;
  }>(`/capacity/team?month=${month}`);

+  const totalPersonDays = response.total_person_days ?? response.person_days ?? 0;
+  const totalHours = response.total_hours ?? response.hours ?? 0;
+
  return {
    month: response.month,
-    total_person_days: response.total_person_days,
-    total_hours: response.total_hours,
+    total_person_days: totalPersonDays,
+    total_hours: totalHours,
    member_capacities: response.members.map((member) => ({
      team_member_id: member.id,
      team_member_name: member.name,
@@ -141,6 +146,10 @@ export async function approvePTO(id: string): Promise<PTO> {
  return api.put<PTO>(`/ptos/${id}/approve`);
 }

+export async function deletePTO(id: string): Promise<void> {
+  return api.delete<void>(`/ptos/${id}`);
+}
+
 export interface SaveAvailabilityPayload {
  team_member_id: string;
  date: string;
--- a/frontend/src/lib/components/capacity/CapacityCalendar.svelte
+++ b/frontend/src/lib/components/capacity/CapacityCalendar.svelte
@@ -71,23 +71,28 @@ import type { Capacity, Holiday, PTO } from '$lib/types/capacity';
          const iso = toIso(current);
          const dayOfWeek = current.getDay();
          const detail = detailsMap.get(iso);
-          const defaultAvailability = detail?.availability ?? (dayOfWeek % 6 === 0 ? 0 : 1);
-          const availability = overrides[iso] ?? defaultAvailability;
-          const effectiveHours = Math.round(availability * 8 * 10) / 10;
+          const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
          const isHoliday = holidayMap.has(iso);
          const holidayName = holidayMap.get(iso);
+          const isPto = ptoDates.has(iso) || !!detail?.is_pto;
+          const isBlocked = isWeekend || isHoliday;
+          const fallbackAvailability = isWeekend ? 0 : isPto ? 0 : 1;
+          const sourceAvailability = overrides[iso] ?? detail?.availability ?? fallbackAvailability;
+          const availability = isPto ? sourceAvailability : (isBlocked ? 0 : sourceAvailability);
+          const effectiveHours = Math.round(availability * 8 * 10) / 10;

          return {
            iso,
            day: i + 1,
            dayName: weekdayLabels[dayOfWeek],
-            isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
+            isWeekend,
            isHoliday,
            holidayName,
-            isPto: ptoDates.has(iso) || detail?.is_pto,
+            isPto,
+            isBlocked,
            availability,
            effectiveHours,
-            defaultAvailability
+            defaultAvailability: fallbackAvailability
          };
        });

@@ -147,12 +152,12 @@ import type { Capacity, Holiday, PTO } from '$lib/types/capacity';
        <select
          class="select select-sm mt-3"
          aria-label={`Availability for ${day.iso}`}
-          value={day.availability}
+          disabled={day.isWeekend || day.isHoliday}
          on:change={(event) => handleAvailabilityChange(day.iso, Number(event.currentTarget.value))}
        >
-          <option value="1">Full day (1.0)</option>
-          <option value="0.5">Half day (0.5)</option>
-          <option value="0">Off (0.0)</option>
+          <option value="1" selected={day.availability === 1}>Full day (1.0)</option>
+          <option value="0.5" selected={day.availability === 0.5}>Half day (0.5)</option>
+          <option value="0" selected={day.availability === 0}>Off (0.0)</option>
        </select>
      </div>
    {/each}
--- a/frontend/src/lib/components/capacity/CapacitySummary.svelte
+++ b/frontend/src/lib/components/capacity/CapacitySummary.svelte
@@ -6,17 +6,35 @@
  export let revenue: Revenue | null = null;
  export let teamMembers: TeamMember[] = [];

+  type MemberRow = TeamCapacity['member_capacities'][number] & {
+    role_label: string;
+    hourly_rate_label: string;
+    hourly_rate: number;
+  };
+
+  type RoleRow = {
+    role: string;
+    person_days: number;
+    hours: number;
+    hourly_rate: number;
+  };
+
  const currencyFormatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD'
  });

-  function formatCurrency(value) {
-    return currencyFormatter.format(value);
+  function toNumber(value: unknown): number {
+    const parsed = Number(value);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+
+  function formatCurrency(value: unknown): string {
+    return currencyFormatter.format(toNumber(value));
  }

  $: memberMap = new Map(teamMembers.map((member) => [member.id, member]));
-  $: memberRows = (teamCapacity?.member_capacities ?? []).map((member) => {
+  $: memberRows = (teamCapacity?.member_capacities ?? []).map((member): MemberRow => {
    const details = memberMap.get(member.team_member_id);
    const hourlyRate = details ? Number(details.hourly_rate) : member.hourly_rate;
    const roleName = details?.role?.name ?? member.role;
@@ -29,7 +47,7 @@
    };
  });

-  $: roleRows = memberRows.reduce((acc, member) => {
+  $: roleRows = memberRows.reduce<Record<string, RoleRow>>((acc, member) => {
    const roleKey = member.role_label || 'Unknown';

    if (!acc[roleKey]) {
@@ -52,9 +70,9 @@
    <div class="rounded-2xl border border-base-300 bg-base-100 p-4 shadow-sm" data-testid="team-capacity-card">
      <p class="text-xs uppercase tracking-wider text-base-content/50">Team capacity</p>
      <p class="text-3xl font-semibold">
-        {teamCapacity ? teamCapacity.total_person_days.toFixed(1) : '0.0'}d
+        {toNumber(teamCapacity?.total_person_days).toFixed(1)}d
      </p>
-      <p class="text-sm text-base-content/60">{teamCapacity ? teamCapacity.total_hours : 0} hrs</p>
+      <p class="text-sm text-base-content/60">{toNumber(teamCapacity?.total_hours)} hrs</p>
    </div>
    <div class="rounded-2xl border border-base-300 bg-base-100 p-4 shadow-sm" data-testid="possible-revenue-card">
      <p class="text-xs uppercase tracking-wider text-base-content/50">Possible revenue</p>
--- a/frontend/src/lib/components/capacity/PTOManager.svelte
+++ b/frontend/src/lib/components/capacity/PTOManager.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-  import { userRole } from '$lib/stores/auth';
-  import { approvePTO, createPTO, getPTOs } from '$lib/api/capacity';
+  import { createPTO, deletePTO, getPTOs } from '$lib/api/capacity';
  import type { PTO } from '$lib/types/capacity';
  import type { TeamMember } from '$lib/services/teamMemberService';

@@ -8,9 +7,8 @@
  export let month: string;
  export let selectedMemberId = '';
  let submitting = false;
-  let actionLoadingId: string | null = null;
+  let deletingId: string | null = null;
  let error: string | null = null;
-  let rejected = new Set<string>();
  let ptos: PTO[] = [];
  let form = {
    team_member_id: '',
@@ -19,7 +17,6 @@
    reason: ''
  };

-  $: canManage = ['superuser', 'manager'].includes($userRole ?? '');
  $: if (!selectedMemberId && teamMembers.length) {
    selectedMemberId = teamMembers[0].id;
  }
@@ -27,10 +24,6 @@
    refreshList(selectedMemberId);
  }

-  function displayStatus(pto: PTO): string {
-    return rejected.has(pto.id) ? 'rejected' : pto.status;
-  }
-
  async function refreshList(memberId: string) {
    try {
      ptos = await getPTOs({ team_member_id: memberId, month });
@@ -65,28 +58,24 @@
    }
  }

-  async function handleApprove(pto: PTO) {
-    actionLoadingId = pto.id;
+  async function handleDelete(pto: PTO) {
+    deletingId = pto.id;
    error = null;

    try {
-      await approvePTO(pto.id);
+      await deletePTO(pto.id);
+
      if (selectedMemberId && month) {
        await refreshList(selectedMemberId);
      }
    } catch (err) {
      console.error(err);
-      error = 'Unable to approve PTO.';
+      error = 'Unable to delete PTO.';
    } finally {
-      actionLoadingId = null;
+      deletingId = null;
    }
  }

-  function handleReject(pto: PTO) {
-    rejected = new Set(rejected);
-    rejected.add(pto.id);
-  }
-
  function getMemberName(pto: PTO): string {
    return teamMembers.find((member) => member.id === pto.team_member_id)?.name ?? pto.team_member_name ?? 'Team member';
  }
@@ -127,30 +116,21 @@
                {new Date(pto.end_date).toLocaleDateString('en-US')}
              </p>
            </div>
-            <span class="badge badge-outline badge-sm">{displayStatus(pto)}</span>
+            <span class="badge badge-outline badge-sm">{pto.status}</span>
          </div>
          {#if pto.reason}
            <p class="text-xs text-base-content/70 mt-1">{pto.reason}</p>
          {/if}
-          {#if canManage && displayStatus(pto) === 'pending'}
-            <div class="mt-3 flex flex-wrap gap-2">
-              <button
-                class="btn btn-sm btn-primary"
-                type="button"
-                disabled={actionLoadingId === pto.id}
-                on:click={() => handleApprove(pto)}
-              >
-                Approve
-              </button>
-              <button
-                class="btn btn-sm btn-ghost"
-                type="button"
-                on:click={() => handleReject(pto)}
-              >
-                Reject
-              </button>
-            </div>
-          {/if}
+          <div class="mt-3 flex flex-wrap gap-2">
+            <button
+              class="btn btn-sm btn-ghost text-error"
+              type="button"
+              disabled={deletingId === pto.id}
+              on:click={() => handleDelete(pto)}
+            >
+              Delete
+            </button>
+          </div>
        </div>
      {/each}
    {/if}
--- a/frontend/src/lib/services/api.ts
+++ b/frontend/src/lib/services/api.ts
@@ -8,6 +8,7 @@
 import { unwrapResponse } from '$lib/api/client';

 const API_BASE_URL = import.meta.env.VITE_API_URL ?? '/api';
+export const GENERIC_SERVER_ERROR_MESSAGE = 'An unexpected server error occurred. Please try again.';

 // Token storage keys
 const ACCESS_TOKEN_KEY = 'headroom_access_token';
@@ -76,6 +77,22 @@ export class ApiError extends Error {
  }
 }

+export function sanitizeApiErrorMessage(message?: string): string {
+  if (!message) {
+    return GENERIC_SERVER_ERROR_MESSAGE;
+  }
+
+  const normalized = message.toLowerCase();
+  const containsHtml = ['<!doctype', '<html', '<body', '<head'].some((fragment) =>
+    normalized.includes(fragment)
+  );
+  const containsSql = ['sqlstate', 'illuminate\\', 'stack trace'].some((fragment) =>
+    normalized.includes(fragment)
+  );
+
+  return containsHtml || containsSql ? GENERIC_SERVER_ERROR_MESSAGE : message;
+}
+
 // Queue for requests waiting for token refresh
 let isRefreshing = false;
 let refreshSubscribers: Array<(token: string) => void> = [];
@@ -131,6 +148,7 @@ export async function apiRequest<T>(endpoint: string, options: ApiRequestOptions
  
  // Prepare headers
  const headers: Record<string, string> = {
+    Accept: 'application/json',
    'Content-Type': 'application/json',
    ...options.headers,
  };
@@ -229,7 +247,8 @@ async function handleResponse(response: Response): Promise<Response> {
    const payloadResponse = response.clone();
    const data = isJson ? await payloadResponse.json() : await payloadResponse.text();
    const errorData = typeof data === 'object' ? data : { message: data };
-    const message = (errorData as { message?: string }).message || 'API request failed';
+    const rawMessage = (errorData as { message?: string }).message || 'API request failed';
+    const message = sanitizeApiErrorMessage(rawMessage);
    console.error('API error', {
      url: response.url,
      status: response.status,
--- a/frontend/src/routes/capacity/+page.svelte
+++ b/frontend/src/routes/capacity/+page.svelte
@@ -19,7 +19,7 @@
  } from '$lib/stores/capacity';
  import { teamMembersStore } from '$lib/stores/teamMembers';
  import { getIndividualCapacity, saveAvailability } from '$lib/api/capacity';
-  import { ApiError } from '$lib/services/api';
+  import { ApiError, GENERIC_SERVER_ERROR_MESSAGE, sanitizeApiErrorMessage } from '$lib/services/api';
  import type { Capacity } from '$lib/types/capacity';

  type TabKey = 'calendar' | 'summary' | 'holidays' | 'pto';
@@ -49,16 +49,19 @@

  function mapError(error: unknown, fallback: string) {
    if (error instanceof ApiError) {
-      return error.message;
+      const sanitized = sanitizeApiErrorMessage(error.message);
+      return sanitized === GENERIC_SERVER_ERROR_MESSAGE ? fallback : sanitized;
    }
    if (error instanceof Error && error.message) {
-      return error.message;
+      const sanitized = sanitizeApiErrorMessage(error.message);
+      return sanitized === GENERIC_SERVER_ERROR_MESSAGE ? fallback : sanitized;
    }
    return fallback;
  }

-  async function refreshIndividualCapacity(memberId: string, period: string) {
+  async function refreshIndividualCapacity(memberId: string, period: string, force = false) {
    if (
+      !force &&
      individualCapacity &&
      individualCapacity.team_member_id === memberId &&
      individualCapacity.month === period
@@ -80,6 +83,39 @@
    }
  }

+  function applyAvailabilityLocally(date: string, availability: number) {
+    if (!individualCapacity) {
+      return;
+    }
+
+    let changed = false;
+    const nextDetails = individualCapacity.details.map((detail) => {
+      if (detail.date !== date) {
+        return detail;
+      }
+
+      changed = true;
+      return {
+        ...detail,
+        availability,
+        effective_hours: Math.round(availability * 8 * 10) / 10
+      };
+    });
+
+    if (!changed) {
+      return;
+    }
+
+    const personDays = nextDetails.reduce((sum, detail) => sum + detail.availability, 0);
+
+    individualCapacity = {
+      ...individualCapacity,
+      details: nextDetails,
+      person_days: Math.round(personDays * 100) / 100,
+      hours: Math.round(personDays * 8)
+    };
+  }
+
  $: if ($teamMembersStore.length) {
    const exists = $teamMembersStore.some((member) => member.id === selectedMemberId);
    if (!selectedMemberId || !exists) {
@@ -87,7 +123,7 @@
    }
  }

-  async function handleAvailabilityChange(event: CustomEvent<{ date: string; availability: number }>) {
+  async function handleAvailabilityChange(event: CustomEvent<{ date: string; availability: 0 | 0.5 | 1 }>) {
    const { date, availability } = event.detail;
    const period = $selectedPeriod;

@@ -105,8 +141,9 @@
        availability
      });

+      applyAvailabilityLocally(date, availability);
+
      await Promise.all([
-        refreshIndividualCapacity(selectedMemberId, period),
        loadTeamCapacity(period),
        loadRevenue(period)
      ]);
@@ -118,6 +155,34 @@
    }
  }

+  function handleTabChange(tabId: TabKey) {
+    activeTab = tabId;
+
+    const period = $selectedPeriod;
+    if (!period) {
+      return;
+    }
+
+    if (tabId === 'summary') {
+      void Promise.all([loadTeamCapacity(period), loadRevenue(period)]);
+      return;
+    }
+
+    if (tabId === 'holidays') {
+      void loadHolidays(period);
+      return;
+    }
+
+    if (tabId === 'pto' && selectedMemberId) {
+      void loadPTOs(period, selectedMemberId);
+      return;
+    }
+
+    if (tabId === 'calendar' && selectedMemberId) {
+      void refreshIndividualCapacity(selectedMemberId, period, true);
+    }
+  }
+
  $: if ($selectedPeriod) {
    loadTeamCapacity($selectedPeriod);
    loadRevenue($selectedPeriod);
@@ -135,18 +200,27 @@
 </svelte:head>

 <section class="space-y-6">
+  {#if availabilitySaving}
+    <div class="toast toast-top toast-center z-50">
+      <div class="alert alert-info shadow-lg text-sm">
+        <span class="loading loading-spinner loading-xs"></span>
+        <span>Saving availability...</span>
+      </div>
+    </div>
+  {/if}
+
  <PageHeader title="Capacity Planning" description="Understand availability and possible revenue">
    {#snippet children()}
      <MonthSelector />
    {/snippet}
  </PageHeader>

-  <div class="tabs" data-testid="capacity-tabs">
+  <div class="tabs relative z-40" data-testid="capacity-tabs">
    {#each tabs as tab}
      <button
        class={`tab tab-lg ${tab.id === activeTab ? 'tab-active' : ''}`}
        type="button"
-        on:click={() => (activeTab = tab.id)}
+        on:click={() => handleTabChange(tab.id)}
      >
        {tab.label}
      </button>
@@ -177,13 +251,6 @@
          <div class="alert alert-error text-sm">{availabilityError}</div>
        {/if}

-        {#if availabilitySaving}
-          <div class="flex items-center gap-2 text-sm text-base-content/60">
-            <span class="loading loading-spinner loading-xs"></span>
-            Saving availability...
-          </div>
-        {/if}
-
        {#if !selectedMemberId}
          <p class="text-sm text-base-content/60">Select a team member to view the calendar.</p>
        {:else if loadingIndividual}
--- a/frontend/tests/e2e/capacity-calendar.spec.ts
+++ b/frontend/tests/e2e/capacity-calendar.spec.ts
@@ -2,6 +2,16 @@ import { test, expect, type Page } from '@playwright/test';

 const API_BASE = 'http://localhost:3000';

+function unwrapData<T>(payload: unknown): T {
+  let current: unknown = payload;
+
+  while (current && typeof current === 'object' && 'data' in current) {
+    current = (current as { data: unknown }).data;
+  }
+
+  return current as T;
+}
+
 async function login(page: Page) {
  await page.goto('/login');
  await page.fill('input[type="email"]', 'superuser@headroom.test');
@@ -24,8 +34,28 @@ async function createTeamMember(page: Page, token: string) {
    }
  });

-  const body = await response.json();
-  return body.id as string;
+  const body = unwrapData<{ id: string }>(await response.json());
+  return body.id;
+}
+
+async function createPto(page: Page, token: string, memberId: string, date: string) {
+  await page.request.post(`${API_BASE}/api/ptos`, {
+    headers: {
+      Authorization: `Bearer ${token}`,
+      'Content-Type': 'application/json'
+    },
+    data: {
+      team_member_id: memberId,
+      start_date: date,
+      end_date: date,
+      reason: 'Capacity calendar PTO test'
+    }
+  });
+}
+
+async function expectNoRawErrorAlerts(page: Page) {
+  await expect(page.locator('.alert.alert-error:has-text("<!DOCTYPE")')).toHaveCount(0);
+  await expect(page.locator('.alert.alert-error:has-text("SQLSTATE")')).toHaveCount(0);
 }

 test.describe('Capacity Calendar', () => {
@@ -54,6 +84,7 @@ test.describe('Capacity Calendar', () => {

  test('should save availability change with success message', async ({ page }) => {
    await expect(page.locator('select[aria-label="Select team member"]')).toBeVisible({ timeout: 10000 });
+    await expectNoRawErrorAlerts(page);

    const teamMemberSelect = page.locator('select[aria-label="Select team member"]');
    if (memberId) {
@@ -64,6 +95,7 @@ test.describe('Capacity Calendar', () => {

    const availabilitySelects = page
      .locator('select[aria-label^="Availability for"]')
+      .locator(':scope:not([disabled])')
      .filter({ has: page.locator('option[value="1"]') });

    await expect(availabilitySelects.first()).toBeVisible({ timeout: 5000 });
@@ -77,21 +109,57 @@ test.describe('Capacity Calendar', () => {

    await expect(page.locator('text=Saving availability...')).toBeVisible({ timeout: 5000 });
    await expect(page.locator('text=Saving availability...')).not.toBeVisible({ timeout: 10000 });
-
    await expect(page.locator('[data-testid="capacity-calendar"] .alert.alert-error')).toHaveCount(0);
+    await expectNoRawErrorAlerts(page);

    if (memberId) {
      const period =
        (await page.evaluate(() => localStorage.getItem('headroom_selected_period'))) ?? '2026-02';
      const response = await page.request.get(
-        `${API_BASE}/api/capacity?month=${period}&team_member_id=${memberId}`
+        `${API_BASE}/api/capacity?month=${period}&team_member_id=${memberId}`,
+        {
+          headers: { Authorization: `Bearer ${authToken}` }
+        }
      );
-      const body = await response.json();
-      const changedDetail = (body.details as Array<{ date: string; availability: number }>).find(
+      const body = unwrapData<{ details: Array<{ date: string; availability: number }> }>(
+        await response.json()
+      );
+      const changedDetail = body.details.find(
        (detail) => detail.date === targetDate
      );
      expect(changedDetail).toBeDefined();
      expect(changedDetail?.availability).toBe(0.5);
    }
  });
+
+  test('should preselect availability and force blocked days to zero', async ({ page }) => {
+    await expect(page.locator('select[aria-label="Select team member"]')).toBeVisible({ timeout: 10000 });
+
+    const teamMemberSelect = page.locator('select[aria-label="Select team member"]');
+    if (!memberId) {
+      test.fail(true, 'memberId was not created');
+      return;
+    }
+
+    await createPto(page, authToken, memberId, '2026-02-10');
+
+    await teamMemberSelect.selectOption({ value: memberId });
+    await expect(page.locator('[data-testid="capacity-calendar"]')).toBeVisible({ timeout: 10000 });
+
+    const weekdaySelect = page.locator('select[aria-label="Availability for 2026-02-02"]');
+    await expect(weekdaySelect).toBeVisible();
+    await expect(weekdaySelect).not.toHaveValue('');
+
+    const weekendSelect = page.locator('select[aria-label="Availability for 2026-02-01"]');
+    await expect(weekendSelect).toHaveValue('0');
+    await expect(weekendSelect).toBeDisabled();
+
+    await page.reload();
+    await page.waitForURL('/capacity');
+    await teamMemberSelect.selectOption({ value: memberId });
+
+    const ptoSelect = page.locator('select[aria-label="Availability for 2026-02-10"]');
+    await expect(ptoSelect).toHaveValue('0');
+    await expect(ptoSelect).toBeEnabled();
+  });
 });
--- a/frontend/tests/unit/api-error-sanitization.spec.ts
+++ b/frontend/tests/unit/api-error-sanitization.spec.ts
@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import { GENERIC_SERVER_ERROR_MESSAGE, sanitizeApiErrorMessage } from '$lib/services/api';
+
+describe('sanitizeApiErrorMessage', () => {
+  it('replaces HTML payloads with the generic server error message', () => {
+    const htmlMessage = '<!DOCTYPE html><html><body>SQL error</body></html>';
+    expect(sanitizeApiErrorMessage(htmlMessage)).toBe(GENERIC_SERVER_ERROR_MESSAGE);
+  });
+
+  it('replaces SQLSTATE content with the generic server error message', () => {
+    const sqlMessage = 'SQLSTATE[HY000]: General error: 1 Unknown column';
+    expect(sanitizeApiErrorMessage(sqlMessage)).toBe(GENERIC_SERVER_ERROR_MESSAGE);
+  });
+
+  it('returns short API messages unchanged', () => {
+    const userMessage = 'User not found';
+    expect(sanitizeApiErrorMessage(userMessage)).toBe(userMessage);
+  });
+});
--- a/frontend/tests/unit/capacity-api.spec.ts
+++ b/frontend/tests/unit/capacity-api.spec.ts
@@ -0,0 +1,40 @@
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('$lib/services/api', () => ({
+  api: {
+    get: vi.fn()
+  }
+}));
+
+import { getTeamCapacity } from '$lib/api/capacity';
+import { api } from '$lib/services/api';
+
+describe('capacity api mapping', () => {
+  it('maps legacy team capacity payload keys', async () => {
+    vi.mocked(api.get).mockResolvedValueOnce({
+      month: '2026-02',
+      person_days: 10.5,
+      hours: 84,
+      members: []
+    });
+
+    const payload = await getTeamCapacity('2026-02');
+
+    expect(payload.total_person_days).toBe(10.5);
+    expect(payload.total_hours).toBe(84);
+  });
+
+  it('maps new team capacity payload keys', async () => {
+    vi.mocked(api.get).mockResolvedValueOnce({
+      month: '2026-03',
+      total_person_days: 12,
+      total_hours: 96,
+      members: []
+    });
+
+    const payload = await getTeamCapacity('2026-03');
+
+    expect(payload.total_person_days).toBe(12);
+    expect(payload.total_hours).toBe(96);
+  });
+});