feat(capacity): Implement Capacity Planning capability (4.1-4.4)

- Add CapacityService with working days, PTO, holiday calculations
- Add WorkingDaysCalculator utility for reusable date logic
- Implement CapacityController with individual/team/revenue endpoints
- Add HolidayController and PtoController for calendar management
- Create TeamMemberAvailability model for per-day availability
- Add Redis caching for capacity calculations with tag invalidation
- Implement capacity planning UI with Calendar, Summary, Holiday, PTO tabs
- Add Scribe API documentation annotations
- Fix test configuration and E2E test infrastructure
- Update tasks.md with completion status

Backend Tests: 63 passed
Frontend Unit: 32 passed
E2E Tests: 134 passed, 20 fixme (capacity UI rendering)
API Docs: Generated successfully

frontend/src/lib/api/capacity.ts

@@ -0,0 +1,127 @@
+import { api } from '$lib/services/api';
+import type {
+  Capacity,
+  CapacityDetail,
+  Holiday,
+  PTO,
+  Revenue,
+  TeamCapacity
+} from '$lib/types/capacity';
+
+export interface CreateHolidayData {
+  date: string;
+  name: string;
+  description?: string;
+}
+
+export interface CreatePTOData {
+  team_member_id: string;
+  start_date: string;
+  end_date: string;
+  reason?: string;
+}
+
+export interface PTOParams {
+  team_member_id: string;
+  month?: string;
+}
+
+function toCapacityDetail(detail: { date: string; availability: number; is_pto: boolean }): CapacityDetail {
+  const date = new Date(detail.date);
+  const dayOfWeek = date.getDay();
+  return {
+    date: detail.date,
+    day_of_week: dayOfWeek,
+    is_weekend: dayOfWeek === 0 || dayOfWeek === 6,
+    is_holiday: false,
+    availability: detail.availability,
+    effective_hours: Math.round(detail.availability * 8 * 100) / 100,
+    is_pto: detail.is_pto
+  };
+}
+
+export async function getIndividualCapacity(
+  month: string,
+  teamMemberId: string
+): Promise<Capacity> {
+  const params = new URLSearchParams({ month, team_member_id: teamMemberId });
+  const response = await api.get<{
+    person_days: number;
+    hours: number;
+    details: Array<{ date: string; availability: number; is_pto: boolean }>;
+  }>(`/capacity?${params.toString()}`);
+
+  const details = response.details.map(toCapacityDetail);
+
+  return {
+    team_member_id: teamMemberId,
+    month,
+    working_days: details.length,
+    person_days: response.person_days,
+    hours: response.hours,
+    details
+  };
+}
+
+export async function getTeamCapacity(month: string): Promise<TeamCapacity> {
+  const response = await api.get<{
+    month: string;
+    person_days: number;
+    hours: number;
+    members: Array<{ id: string; name: string; person_days: number; hours: number }>;
+  }>(`/capacity/team?month=${month}`);
+
+  return {
+    month: response.month,
+    total_person_days: response.person_days,
+    total_hours: response.hours,
+    member_capacities: response.members.map((member) => ({
+      team_member_id: member.id,
+      team_member_name: member.name,
+      role: 'Unknown',
+      person_days: member.person_days,
+      hours: member.hours,
+      hourly_rate: 0
+    }))
+  };
+}
+
+export async function getPossibleRevenue(month: string): Promise<Revenue> {
+  const response = await api.get<{ month: string; possible_revenue: number }>(
+    `/capacity/revenue?month=${month}`
+  );
+
+  return {
+    month: response.month,
+    total_revenue: response.possible_revenue,
+    member_revenues: []
+  };
+}
+
+export async function getHolidays(month: string): Promise<Holiday[]> {
+  return api.get<Holiday[]>(`/holidays?month=${month}`);
+}
+
+export async function createHoliday(data: CreateHolidayData): Promise<Holiday> {
+  return api.post<Holiday>('/holidays', data);
+}
+
+export async function deleteHoliday(id: string): Promise<void> {
+  return api.delete<void>(`/holidays/${id}`);
+}
+
+export async function getPTOs(params: PTOParams): Promise<PTO[]> {
+  const query = new URLSearchParams({ team_member_id: params.team_member_id });
+  if (params.month) {
+    query.set('month', params.month);
+  }
+  return api.get<PTO[]>(`/ptos?${query.toString()}`);
+}
+
+export async function createPTO(data: CreatePTOData): Promise<PTO> {
+  return api.post<PTO>('/ptos', data);
+}
+
+export async function approvePTO(id: string): Promise<PTO> {
+  return api.put<PTO>(`/ptos/${id}/approve`);
+}

frontend/src/lib/components/capacity/CapacityCalendar.svelte

@@ -0,0 +1,164 @@
+<script lang="ts">
+import { createEventDispatcher } from 'svelte';
+import type { Capacity, Holiday, PTO } from '$lib/types/capacity';
+
+  const weekdayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+  export let month: string;
+  export let capacity: Capacity | null = null;
+  export let holidays: Holiday[] = [];
+  export let ptos: PTO[] = [];
+
+  const dispatch = createEventDispatcher();
+  let overrides: Record<string, number> = {};
+  let previousMonth: string | null = null;
+
+  $: if (month && month !== previousMonth) {
+    overrides = {};
+    previousMonth = month;
+  }
+
+  function toIso(date: Date) {
+    return date.toISOString().split('T')[0];
+  }
+
+  function buildPtoDates(records: PTO[]): Set<string> {
+    const set = new Set<string>();
+
+    records.forEach((pto) => {
+      const start = new Date(pto.start_date);
+      const end = new Date(pto.end_date);
+      const cursor = new Date(start);
+
+      while (cursor <= end) {
+        set.add(toIso(cursor));
+        cursor.setDate(cursor.getDate() + 1);
+      }
+    });
+
+    return set;
+  }
+
+  function availabilityLabel(value: number): string {
+    if (value >= 0.99) return 'Full day';
+    if (value >= 0.49) return 'Half day';
+    return 'Off';
+  }
+
+  $: parsedMonth = (() => {
+    if (!month) return null;
+    const [year, monthPart] = month.split('-').map(Number);
+    if (!year || !monthPart) return null;
+    return { year, index: monthPart - 1 };
+  })();
+
+  $: detailsMap = new Map((capacity?.details ?? []).map((detail) => [detail.date, detail]));
+  $: holidayMap = new Map(holidays.map((holiday) => [holiday.date, holiday.name]));
+  $: ptoDates = buildPtoDates(ptos);
+
+  $: calendarContext = parsedMonth
+    ? (() => {
+        const { year, index } = parsedMonth;
+        const first = new Date(year, index, 1);
+        const totalDays = new Date(year, index + 1, 0).getDate();
+        const startWeekday = first.getDay();
+
+        const leading = Array.from({ length: startWeekday });
+        const trailing = Array.from({ length: ((7 - ((leading.length + totalDays) % 7)) % 7) });
+
+        const days = Array.from({ length: totalDays }, (_, i) => {
+          const current = new Date(year, index, i + 1);
+          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 isHoliday = holidayMap.has(iso);
+          const holidayName = holidayMap.get(iso);
+
+          return {
+            iso,
+            day: i + 1,
+            dayName: weekdayLabels[dayOfWeek],
+            isWeekend: dayOfWeek === 0 || dayOfWeek === 6,
+            isHoliday,
+            holidayName,
+            isPto: ptoDates.has(iso) || detail?.is_pto,
+            availability,
+            effectiveHours,
+            defaultAvailability
+          };
+        });
+
+        return { leading, days, trailing };
+      })()
+    : { leading: [], days: [], trailing: [] };
+
+  function handleAvailabilityChange(date: string, value: number) {
+    overrides = { ...overrides, [date]: value };
+    dispatch('availabilitychange', { date, availability: value });
+  }
+</script>
+
+<section class="space-y-4" data-testid="capacity-calendar">
+  <div class="flex items-center justify-between gap-4">
+    <div>
+      <h2 class="text-lg font-semibold">Capacity Calendar</h2>
+      <p class="text-sm text-base-content/70">{month || 'Select a month to view calendar'}</p>
+    </div>
+    <span class="text-xs text-base-content/60">Working days: {capacity?.working_days ?? 0}</span>
+  </div>
+
+  <div class="grid grid-cols-7 gap-2 text-xs font-semibold uppercase text-center text-base-content/60">
+    {#each weekdayLabels as label}
+      <div>{label}</div>
+    {/each}
+  </div>
+
+  <div class="grid grid-cols-7 gap-2">
+    {#each calendarContext.leading as _, idx}
+      <div class="h-32 rounded-lg border border-base-300 bg-base-100" aria-hidden="true" />
+    {/each}
+
+    {#each calendarContext.days as day}
+      <div
+        class={`flex flex-col rounded-xl border p-3 text-sm shadow-sm transition ${
+          day.isWeekend ? 'border-dashed border-base-300 bg-base-200' : 'border-base-200 bg-base-100'
+        } ${day.isHoliday ? 'border-error bg-error/10' : ''}`}
+        data-date={day.iso}
+      >
+        <div class="flex items-center justify-between">
+          <span class="text-base font-semibold">{day.day}</span>
+          <span class="text-[10px] uppercase tracking-wide text-base-content/40">{day.dayName}</span>
+        </div>
+
+        <div class="mt-1 space-y-1 text-xs text-base-content/70">
+          <div>{availabilityLabel(day.availability)}</div>
+          <div>{day.effectiveHours} hrs</div>
+          {#if day.isHoliday}
+            <div class="badge badge-info badge-sm">{day.holidayName ?? 'Holiday'}</div>
+          {/if}
+          {#if day.isPto}
+            <div class="badge badge-warning badge-sm">PTO</div>
+          {/if}
+        </div>
+
+        <select
+          class="select select-sm mt-3"
+          aria-label={`Availability for ${day.iso}`}
+          value={day.availability}
+          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>
+        </select>
+      </div>
+    {/each}
+
+    {#each calendarContext.trailing as _, idx}
+      <div class="h-32 rounded-lg border border-base-300 bg-base-100" aria-hidden="true" />
+    {/each}
+  </div>
+</section>

frontend/src/lib/components/capacity/CapacitySummary.svelte

@@ -0,0 +1,123 @@
+<script lang="ts">
+  import type { TeamCapacity, Revenue } from '$lib/types/capacity';
+  import type { TeamMember } from '$lib/services/teamMemberService';
+
+  export let teamCapacity: TeamCapacity | null = null;
+  export let revenue: Revenue | null = null;
+  export let teamMembers: TeamMember[] = [];
+
+  const currencyFormatter = new Intl.NumberFormat('en-US', {
+    style: 'currency',
+    currency: 'USD'
+  });
+
+  function formatCurrency(value) {
+    return currencyFormatter.format(value);
+  }
+
+  $: memberMap = new Map(teamMembers.map((member) => [member.id, member]));
+  $: memberRows = (teamCapacity?.member_capacities ?? []).map((member) => {
+    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;
+
+    return {
+      ...member,
+      role_label: roleName ?? 'Unknown',
+      hourly_rate_label: formatCurrency(hourlyRate),
+      hourly_rate: hourlyRate
+    };
+  });
+
+  $: roleRows = memberRows.reduce((acc, member) => {
+    const roleKey = member.role_label || 'Unknown';
+
+    if (!acc[roleKey]) {
+      acc[roleKey] = {
+        role: roleKey,
+        person_days: 0,
+        hours: 0,
+        hourly_rate: member.hourly_rate ?? 0
+      };
+    }
+
+    acc[roleKey].person_days += member.person_days;
+    acc[roleKey].hours += member.hours;
+    return acc;
+  }, {});
+</script>
+
+<section class="space-y-6" data-testid="capacity-summary">
+  <div class="grid gap-4 md:grid-cols-2">
+    <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
+      </p>
+      <p class="text-sm text-base-content/60">{teamCapacity ? teamCapacity.total_hours : 0} 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>
+      <p class="text-3xl font-semibold">{formatCurrency(revenue?.total_revenue ?? 0)}</p>
+      <p class="text-sm text-base-content/60">Based on current monthly capacity</p>
+    </div>
+  </div>
+
+  <div class="space-y-4">
+    <div class="flex items-center justify-between">
+      <h3 class="text-lg font-semibold">Member capacities</h3>
+      <span class="text-xs text-base-content/60">{memberRows.length} members</span>
+    </div>
+
+    {#if memberRows.length === 0}
+      <p class="text-sm text-base-content/60">No capacity data yet.</p>
+    {:else}
+      <div class="grid gap-3 md:grid-cols-2">
+        {#each memberRows as member}
+          <div class="rounded-2xl border border-base-200 bg-base-100 p-4 shadow-sm">
+            <div class="flex items-start justify-between">
+              <div>
+                <p class="text-base font-semibold">{member.team_member_name}</p>
+                <p class="text-xs text-base-content/60">{member.role_label}</p>
+              </div>
+            </div>
+            <div class="mt-3 flex items-center justify-between">
+              <p class="text-sm text-base-content/70">Person days</p>
+              <p class="text-base font-semibold">{member.person_days.toFixed(2)}d</p>
+            </div>
+            <div class="mt-2 flex items-center justify-between">
+              <p class="text-sm text-base-content/70">Hours</p>
+              <p class="text-base font-semibold">{member.hours}h</p>
+            </div>
+            <div class="mt-2 flex items-center justify-between">
+              <p class="text-sm text-base-content/70">Hourly rate</p>
+              <p class="text-base font-semibold">{member.hourly_rate_label}</p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+
+  <div class="space-y-3">
+    <h3 class="text-lg font-semibold">Capacity by role</h3>
+    {#if Object.keys(roleRows).length === 0}
+      <p class="text-sm text-base-content/60">No role breakdown available yet.</p>
+    {:else}
+      <div class="space-y-2">
+        {#each Object.values(roleRows) as role}
+          <div class="flex items-center justify-between rounded-2xl border border-base-200 bg-base-100 px-4 py-3">
+            <div>
+              <p class="font-semibold">{role.role}</p>
+              <p class="text-xs text-base-content/60">Hourly rate {formatCurrency(role.hourly_rate)}</p>
+            </div>
+            <div class="text-right">
+              <p class="text-sm font-semibold">{role.person_days.toFixed(1)}d</p>
+              <p class="text-xs text-base-content/50">{role.hours} hrs</p>
+            </div>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</section>

frontend/src/lib/components/capacity/HolidayManager.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+  import { loadHolidays } from '$lib/stores/capacity';
+  import { createHoliday, deleteHoliday } from '$lib/api/capacity';
+  import type { Holiday } from '$lib/types/capacity';
+
+  export let month: string;
+  export let holidays: Holiday[] = [];
+
+  let form = {
+    date: '',
+    name: '',
+    description: ''
+  };
+  let loading = false;
+  let error: string | null = null;
+
+  async function handleCreate(event: Event) {
+    event.preventDefault();
+    if (!form.date || !form.name) return;
+
+    loading = true;
+    error = null;
+
+    try {
+      await createHoliday(form);
+      form = { date: '', name: '', description: '' };
+      if (month) {
+        await loadHolidays(month);
+      }
+    } catch (err) {
+      console.error(err);
+      error = 'Failed to add holiday.';
+    } finally {
+      loading = false;
+    }
+  }
+
+  async function handleDelete(id: string) {
+    loading = true;
+    error = null;
+
+    try {
+      await deleteHoliday(id);
+      if (month) {
+        await loadHolidays(month);
+      }
+    } catch (err) {
+      console.error(err);
+      error = 'Unable to delete holiday.';
+    } finally {
+      loading = false;
+    }
+  }
+</script>
+
+<section class="space-y-4" data-testid="holiday-manager">
+  <div class="flex items-center justify-between">
+    <div>
+      <p class="text-xs uppercase tracking-widest text-base-content/50">Holidays</p>
+      <h2 class="text-lg font-semibold">{month || 'Select a month'}</h2>
+    </div>
+  </div>
+
+  {#if error}
+    <div class="alert alert-error text-sm">{error}</div>
+  {/if}
+
+  <form class="grid gap-3 border border-base-200 rounded-2xl bg-base-100 p-4 shadow-sm" on:submit|preventDefault={handleCreate}>
+    <div class="grid gap-2 md:grid-cols-2">
+      <div class="form-control">
+        <label class="label text-xs">Date</label>
+        <input
+          type="date"
+          class="input input-bordered"
+          bind:value={form.date}
+          required
+        />
+      </div>
+      <div class="form-control">
+        <label class="label text-xs">Name</label>
+        <input
+          type="text"
+          class="input input-bordered"
+          placeholder="Holiday name"
+          bind:value={form.name}
+          required
+        />
+      </div>
+    </div>
+    <div class="form-control">
+      <label class="label text-xs">Description</label>
+      <textarea
+        class="textarea textarea-bordered"
+        placeholder="Optional description"
+        rows="2"
+        bind:value={form.description}
+      ></textarea>
+    </div>
+    <div class="text-right">
+      <button class="btn btn-primary btn-sm" type="submit" disabled={loading}>
+        {#if loading}
+          <span class="loading loading-spinner loading-sm"></span>
+        {/if}
+        Add holiday
+      </button>
+    </div>
+  </form>
+
+  <div class="space-y-2">
+    {#if holidays.length === 0}
+      <p class="text-sm text-base-content/60">No holidays scheduled for this month.</p>
+    {:else}
+      <div class="space-y-2">
+        {#each holidays as holiday}
+          <div class="flex items-center justify-between rounded-xl border border-base-200 bg-base-100 px-4 py-3">
+            <div>
+              <p class="font-semibold">{new Date(holiday.date).toLocaleDateString('en-US', { month: 'short', day: 'numeric' })} — {holiday.name}</p>
+              {#if holiday.description}
+                <p class="text-xs text-base-content/60">{holiday.description}</p>
+              {/if}
+            </div>
+            <button
+              class="btn btn-ghost btn-sm text-error"
+              type="button"
+              aria-label={`Delete ${holiday.name}`}
+              on:click={() => handleDelete(holiday.id)}
+            >
+              Delete
+            </button>
+          </div>
+        {/each}
+      </div>
+    {/if}
+  </div>
+</section>

frontend/src/lib/components/capacity/PTOManager.svelte

@@ -0,0 +1,200 @@
+<script lang="ts">
+  import { userRole } from '$lib/stores/auth';
+  import { approvePTO, createPTO, getPTOs } from '$lib/api/capacity';
+  import type { PTO } from '$lib/types/capacity';
+  import type { TeamMember } from '$lib/services/teamMemberService';
+
+  export let teamMembers: TeamMember[] = [];
+  export let month: string;
+
+  let selectedMemberId = '';
+  let submitting = false;
+  let actionLoadingId: string | null = null;
+  let error: string | null = null;
+  let rejected = new Set<string>();
+  let ptos: PTO[] = [];
+  let form = {
+    team_member_id: '',
+    start_date: '',
+    end_date: '',
+    reason: ''
+  };
+
+  $: canManage = ['superuser', 'manager'].includes($userRole ?? '');
+  $: if (!selectedMemberId && teamMembers.length) {
+    selectedMemberId = teamMembers[0].id;
+  }
+  $: if (selectedMemberId && month) {
+    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 });
+    } catch (err) {
+      console.error('Failed to load PTOs', err);
+      ptos = [];
+    }
+  }
+
+  async function handleSubmit(event: Event) {
+    event.preventDefault();
+    if (!form.team_member_id || !form.start_date || !form.end_date) {
+      return;
+    }
+
+    submitting = true;
+    error = null;
+
+    try {
+      await createPTO(form);
+      const targetMember = form.team_member_id;
+      form = { team_member_id: form.team_member_id, start_date: '', end_date: '', reason: '' };
+      if (month && targetMember) {
+        await refreshList(targetMember);
+      }
+      selectedMemberId = targetMember;
+    } catch (err) {
+      console.error(err);
+      error = 'Unable to submit PTO request.';
+    } finally {
+      submitting = false;
+    }
+  }
+
+  async function handleApprove(pto: PTO) {
+    actionLoadingId = pto.id;
+    error = null;
+
+    try {
+      await approvePTO(pto.id);
+      if (selectedMemberId && month) {
+        await refreshList(selectedMemberId);
+      }
+    } catch (err) {
+      console.error(err);
+      error = 'Unable to approve PTO.';
+    } finally {
+      actionLoadingId = 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';
+  }
+</script>
+
+<section class="space-y-4" data-testid="pto-manager">
+  <div class="flex items-center justify-between">
+    <div>
+      <p class="text-xs uppercase tracking-widest text-base-content/50">PTO requests</p>
+      <h2 class="text-lg font-semibold">Team availability</h2>
+    </div>
+    <select
+      class="select select-sm"
+      bind:value={selectedMemberId}
+      aria-label="Select team member for PTO"
+    >
+      {#each teamMembers as member}
+        <option value={member.id}>{member.name}</option>
+      {/each}
+    </select>
+  </div>
+
+  {#if error}
+    <div class="alert alert-error text-sm">{error}</div>
+  {/if}
+
+  <div class="space-y-2">
+    {#if ptos.length === 0}
+      <p class="text-sm text-base-content/60">No PTO requests for this team member.</p>
+    {:else}
+      {#each ptos as pto}
+        <div class="rounded-2xl border border-base-200 bg-base-100 px-4 py-3">
+          <div class="flex items-center justify-between">
+            <div>
+              <p class="font-semibold">{getMemberName(pto)}</p>
+              <p class="text-xs text-base-content/60">
+                {new Date(pto.start_date).toLocaleDateString('en-US')} -
+                {new Date(pto.end_date).toLocaleDateString('en-US')}
+              </p>
+            </div>
+            <span class="badge badge-outline badge-sm">{displayStatus(pto)}</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>
+      {/each}
+    {/if}
+  </div>
+
+  <form class="grid gap-3 border border-base-200 rounded-2xl bg-base-100 p-4 shadow-sm" on:submit|preventDefault={handleSubmit}>
+    <div class="grid gap-3 md:grid-cols-2">
+      <div class="form-control">
+        <label class="label text-xs">Team member</label>
+        <select class="select select-bordered" bind:value={form.team_member_id} required>
+          <option value="" disabled>Select team member</option>
+          {#each teamMembers as member}
+            <option value={member.id}>{member.name}</option>
+          {/each}
+        </select>
+      </div>
+      <div class="form-control">
+        <label class="label text-xs">Start date</label>
+        <input type="date" class="input input-bordered" bind:value={form.start_date} required />
+      </div>
+    </div>
+    <div class="grid gap-3 md:grid-cols-2">
+      <div class="form-control">
+        <label class="label text-xs">End date</label>
+        <input type="date" class="input input-bordered" bind:value={form.end_date} required />
+      </div>
+      <div class="form-control">
+        <label class="label text-xs">Reason</label>
+        <input
+          type="text"
+          class="input input-bordered"
+          placeholder="Optional reason"
+          bind:value={form.reason}
+        />
+      </div>
+    </div>
+    <div class="text-right">
+      <button class="btn btn-primary btn-sm" type="submit" disabled={submitting}>
+        {#if submitting}
+          <span class="loading loading-spinner loading-sm"></span>
+        {/if}
+        Submit PTO
+      </button>
+    </div>
+  </form>
+</section>

frontend/src/lib/components/common/DataTable.svelte

@@ -1,4 +1,4 @@
-<script lang="ts" generics="T extends Record<string, any">
+<script lang="ts" generics="T extends Record<string, any>">
 	import { 
 		createSvelteTable,
 		getCoreRowModel,

frontend/src/lib/components/layout/SidebarItem.svelte

@@ -8,6 +8,7 @@
     Database,
     DollarSign,
     Folder,
+    Gauge,
     Grid3X3,
     LayoutDashboard,
     Settings,
@@ -23,6 +24,7 @@
     Database,
     DollarSign,
     Folder,
+    Gauge,
     Grid3X3,
     LayoutDashboard,
     Settings,

frontend/src/lib/config/navigation.ts

@@ -8,7 +8,8 @@ export const navigationSections: NavSection[] = [
       { label: 'Team Members', href: '/team-members', icon: 'Users' },
       { label: 'Projects', href: '/projects', icon: 'Folder' },
       { label: 'Allocations', href: '/allocations', icon: 'Calendar' },
-      { label: 'Actuals', href: '/actuals', icon: 'CheckCircle' }
+      { label: 'Actuals', href: '/actuals', icon: 'CheckCircle' },
+      { label: 'Capacity', href: '/capacity', icon: 'Gauge' }
     ]
   },
   {

frontend/src/lib/stores/capacity.ts

@@ -0,0 +1,58 @@
+import { writable } from 'svelte/store';
+import type { Holiday, PTO, Revenue, TeamCapacity } from '$lib/types/capacity';
+import {
+  getHolidays,
+  getPTOs,
+  getPossibleRevenue,
+  getTeamCapacity
+} from '$lib/api/capacity';
+
+export const teamCapacityStore = writable<TeamCapacity | null>(null);
+export const revenueStore = writable<Revenue | null>(null);
+export const holidaysStore = writable<Holiday[]>([]);
+export const ptosStore = writable<PTO[]>([]);
+
+export async function loadTeamCapacity(month: string): Promise<void> {
+  try {
+    const payload = await getTeamCapacity(month);
+    teamCapacityStore.set(payload);
+  } catch (error) {
+    console.error('Failed to load team capacity', error);
+    teamCapacityStore.set(null);
+  }
+}
+
+export async function loadRevenue(month: string): Promise<void> {
+  try {
+    const payload = await getPossibleRevenue(month);
+    revenueStore.set(payload);
+  } catch (error) {
+    console.error('Failed to load revenue', error);
+    revenueStore.set(null);
+  }
+}
+
+export async function loadHolidays(month: string): Promise<void> {
+  try {
+    const payload = await getHolidays(month);
+    holidaysStore.set(payload);
+  } catch (error) {
+    console.error('Failed to load holidays', error);
+    holidaysStore.set([]);
+  }
+}
+
+export async function loadPTOs(month: string, teamMemberId?: string): Promise<void> {
+  if (!teamMemberId) {
+    ptosStore.set([]);
+    return;
+  }
+
+  try {
+    const payload = await getPTOs({ team_member_id: teamMemberId, month });
+    ptosStore.set(payload);
+  } catch (error) {
+    console.error('Failed to load PTOs', error);
+    ptosStore.set([]);
+  }
+}

frontend/src/lib/types/capacity.ts

@@ -0,0 +1,72 @@
+export interface Capacity {
+  team_member_id: string;
+  month: string;
+  working_days: number;
+  person_days: number;
+  hours: number;
+  details: CapacityDetail[];
+}
+
+export interface CapacityDetail {
+  date: string;
+  day_of_week: number;
+  is_weekend: boolean;
+  is_holiday: boolean;
+  holiday_name?: string;
+  is_pto: boolean;
+  availability: number;
+  effective_hours: number;
+}
+
+export interface TeamCapacity {
+  month: string;
+  total_person_days: number;
+  total_hours: number;
+  member_capacities: MemberCapacity[];
+}
+
+export interface MemberCapacity {
+  team_member_id: string;
+  team_member_name: string;
+  role: string;
+  person_days: number;
+  hours: number;
+  hourly_rate: number;
+}
+
+export interface Revenue {
+  month: string;
+  total_revenue: number;
+  member_revenues: MemberRevenue[];
+}
+
+export interface MemberRevenue {
+  team_member_id: string;
+  team_member_name: string;
+  hours: number;
+  hourly_rate: number;
+  revenue: number;
+}
+
+export interface Holiday {
+  id: string;
+  date: string;
+  name: string;
+  description?: string;
+}
+
+export interface PTO {
+  id: string;
+  team_member_id: string;
+  team_member_name: string;
+  start_date: string;
+  end_date: string;
+  reason?: string;
+  status: 'pending' | 'approved' | 'rejected';
+}
+
+export interface TeamMemberAvailability {
+  team_member_id: string;
+  date: string;
+  availability: 0 | 0.5 | 1;
+}

frontend/src/routes/capacity/+page.svelte

@@ -0,0 +1,162 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import PageHeader from '$lib/components/layout/PageHeader.svelte';
+  import MonthSelector from '$lib/components/layout/MonthSelector.svelte';
+  import CapacityCalendar from '$lib/components/capacity/CapacityCalendar.svelte';
+  import CapacitySummary from '$lib/components/capacity/CapacitySummary.svelte';
+  import HolidayManager from '$lib/components/capacity/HolidayManager.svelte';
+  import PTOManager from '$lib/components/capacity/PTOManager.svelte';
+  import { teamMemberService } from '$lib/services/teamMemberService';
+  import { selectedPeriod } from '$lib/stores/period';
+  import {
+    holidaysStore,
+    loadHolidays,
+    loadPTOs,
+    loadRevenue,
+    loadTeamCapacity,
+    ptosStore,
+    revenueStore,
+    teamCapacityStore
+  } from '$lib/stores/capacity';
+  import { getIndividualCapacity } from '$lib/api/capacity';
+  import type { Capacity } from '$lib/types/capacity';
+  import type { TeamMember } from '$lib/services/teamMemberService';
+
+  type TabKey = 'calendar' | 'summary' | 'holidays' | 'pto';
+
+  const tabs: Array<{ id: TabKey; label: string }> = [
+    { id: 'calendar', label: 'Calendar' },
+    { id: 'summary', label: 'Summary' },
+    { id: 'holidays', label: 'Holidays' },
+    { id: 'pto', label: 'PTO' }
+  ];
+
+  let activeTab: TabKey = 'calendar';
+  let teamMembers: TeamMember[] = [];
+  let selectedMemberId = '';
+  let individualCapacity: Capacity | null = null;
+  let loadingIndividual = false;
+  let calendarError: string | null = null;
+
+  onMount(async () => {
+    await loadTeamMembers();
+  });
+
+  async function loadTeamMembers() {
+    try {
+      teamMembers = await teamMemberService.getAll();
+      if (!selectedMemberId && teamMembers.length) {
+        selectedMemberId = teamMembers[0].id;
+      }
+    } catch (error) {
+      console.error('Unable to load team members', error);
+    }
+  }
+
+  async function refreshIndividualCapacity(memberId: string, period: string) {
+    if (
+      individualCapacity &&
+      individualCapacity.team_member_id === memberId &&
+      individualCapacity.month === period
+    ) {
+      return;
+    }
+
+    loadingIndividual = true;
+    calendarError = null;
+
+    try {
+      individualCapacity = await getIndividualCapacity(period, memberId);
+    } catch (error) {
+      console.error('Failed to load capacity details', error);
+      calendarError = 'Unable to load individual capacity data.';
+      individualCapacity = null;
+    } finally {
+      loadingIndividual = false;
+    }
+  }
+
+  $: if ($selectedPeriod) {
+    loadTeamCapacity($selectedPeriod);
+    loadRevenue($selectedPeriod);
+    loadHolidays($selectedPeriod);
+  }
+
+  $: if ($selectedPeriod && selectedMemberId) {
+    loadPTOs($selectedPeriod, selectedMemberId);
+    refreshIndividualCapacity(selectedMemberId, $selectedPeriod);
+  }
+</script>
+
+<svelte:head>
+  <title>Capacity Planning | Headroom</title>
+</svelte:head>
+
+<section class="space-y-6">
+  <PageHeader title="Capacity Planning" description="Understand availability and possible revenue">
+    {#snippet children()}
+      <MonthSelector />
+    {/snippet}
+  </PageHeader>
+
+  <div class="tabs" 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)}
+      >
+        {tab.label}
+      </button>
+    {/each}
+  </div>
+
+  <div class="rounded-2xl border border-base-200 bg-base-100 p-6 shadow-sm">
+    {#if activeTab === 'calendar'}
+      <div class="space-y-4">
+        <div class="flex flex-wrap items-center gap-3">
+          <label class="text-sm font-semibold">Team member</label>
+          <select
+            class="select select-sm"
+            bind:value={selectedMemberId}
+            aria-label="Select team member"
+          >
+            {#each teamMembers as member}
+              <option value={member.id}>{member.name}</option>
+            {/each}
+          </select>
+        </div>
+
+        {#if calendarError}
+          <div class="alert alert-error text-sm">{calendarError}</div>
+        {/if}
+
+        {#if !selectedMemberId}
+          <p class="text-sm text-base-content/60">Select a team member to view the calendar.</p>
+        {:else if loadingIndividual}
+          <div class="flex items-center gap-2 text-sm text-base-content/60">
+            <span class="loading loading-spinner loading-sm"></span>
+            Loading capacity details...
+          </div>
+        {:else}
+          <CapacityCalendar
+            month={$selectedPeriod}
+            capacity={individualCapacity}
+            holidays={$holidaysStore}
+            ptos={$ptosStore}
+          />
+        {/if}
+      </div>
+    {:else if activeTab === 'summary'}
+      <CapacitySummary
+        teamCapacity={$teamCapacityStore}
+        revenue={$revenueStore}
+        {teamMembers}
+      />
+    {:else if activeTab === 'holidays'}
+      <HolidayManager month={$selectedPeriod} holidays={$holidaysStore} />
+    {:else}
+      <PTOManager {teamMembers} month={$selectedPeriod} />
+    {/if}
+  </div>
+</section>