Based on the provided specification, I will summarize the changes and

address each point.

**Changes Summary**

This specification updates the `headroom-foundation` change set to
include actuals tracking. The new feature adds a `TeamMember` model for
team members and a `ProjectStatus` model for project statuses.

**Summary of Changes**

1.  **Add Team Members**
    *   Created the `TeamMember` model with attributes: `id`, `name`,
        `role`, and `active`.
    *   Implemented data migration to add all existing users as
        `team_member_ids` in the database.
2.  **Add Project Statuses**
    *   Created the `ProjectStatus` model with attributes: `id`, `name`,
        `order`, and `is_active`.
    *   Defined initial project statuses as "Initial" and updated
        workflow states accordingly.
3.  **Actuals Tracking**
    *   Introduced a new `Actual` model for tracking actual hours worked
        by team members.
    *   Implemented data migration to add all existing allocations as
        `actual_hours` in the database.
    *   Added methods for updating and deleting actual records.

**Open Issues**

1.  **Authorization Policy**: The system does not have an authorization
    policy yet, which may lead to unauthorized access or data
    modifications.
2.  **Project Type Distinguish**: Although project types are
    differentiated, there is no distinction between "Billable" and
    "Support" in the database.
3.  **Cost Reporting**: Revenue forecasts do not include support
    projects, and their reporting treatment needs clarification.

**Implementation Roadmap**

1.  **Authorization Policy**: Implement an authorization policy to
    restrict access to authorized users only.
2.  **Distinguish Project Types**: Clarify project type distinction
    between "Billable" and "Support".
3.  **Cost Reporting**: Enhance revenue forecasting to include support
    projects with different reporting treatment.

**Task Assignments**

1.  **Authorization Policy**
    *   Task Owner:  John (Automated)
    *   Description: Implement an authorization policy using Laravel's
        built-in middleware.
    *   Deadline: 2026-03-25
2.  **Distinguish Project Types**
    *   Task Owner:  Maria (Automated)
    *   Description: Update the `ProjectType` model to include a
        distinction between "Billable" and "Support".
    *   Deadline: 2026-04-01
3.  **Cost Reporting**
    *   Task Owner:  Alex (Automated)
    *   Description: Enhance revenue forecasting to include support
        projects with different reporting treatment.
    *   Deadline: 2026-04-15

frontend/tests/unit/utilization-badge.test.ts

@@ -0,0 +1,119 @@
+import { render, screen } from '@testing-library/svelte';
+import { describe, expect, it } from 'vitest';
+import UtilizationBadge from '$lib/components/common/UtilizationBadge.svelte';
+import type { UtilizationIndicator } from '$lib/services/utilizationService';
+
+describe('UtilizationBadge component', () => {
+  it('7.1.16: UtilizationBadge shows percentage', () => {
+    render(UtilizationBadge, {
+      props: {
+        utilization: 87.5,
+        indicator: 'green' as UtilizationIndicator
+      }
+    });
+
+    expect(screen.getByText('87.5%')).toBeTruthy();
+  });
+
+  it('7.1.17a: Color coding applies correctly - gray for under-utilized', () => {
+    const { container } = render(UtilizationBadge, {
+      props: {
+        utilization: 50,
+        indicator: 'gray' as UtilizationIndicator
+      }
+    });
+
+    const badge = container.querySelector('.badge');
+    expect(badge?.classList.contains('badge-neutral')).toBe(true);
+  });
+
+  it('7.1.17b: Color coding applies correctly - blue for low utilization', () => {
+    const { container } = render(UtilizationBadge, {
+      props: {
+        utilization: 75,
+        indicator: 'blue' as UtilizationIndicator
+      }
+    });
+
+    const badge = container.querySelector('.badge');
+    expect(badge?.classList.contains('badge-info')).toBe(true);
+  });
+
+  it('7.1.17c: Color coding applies correctly - green for optimal', () => {
+    const { container } = render(UtilizationBadge, {
+      props: {
+        utilization: 90,
+        indicator: 'green' as UtilizationIndicator
+      }
+    });
+
+    const badge = container.querySelector('.badge');
+    expect(badge?.classList.contains('badge-success')).toBe(true);
+  });
+
+  it('7.1.17d: Color coding applies correctly - yellow for high', () => {
+    const { container } = render(UtilizationBadge, {
+      props: {
+        utilization: 105,
+        indicator: 'yellow' as UtilizationIndicator
+      }
+    });
+
+    const badge = container.querySelector('.badge');
+    expect(badge?.classList.contains('badge-warning')).toBe(true);
+  });
+
+  it('7.1.17e: Color coding applies correctly - red for over-allocated', () => {
+    const { container } = render(UtilizationBadge, {
+      props: {
+        utilization: 120,
+        indicator: 'red' as UtilizationIndicator
+      }
+    });
+
+    const badge = container.querySelector('.badge');
+    expect(badge?.classList.contains('badge-error')).toBe(true);
+  });
+
+  it('7.1.17f: Shows status text when showStatus is true', () => {
+    render(UtilizationBadge, {
+      props: {
+        utilization: 90,
+        indicator: 'green' as UtilizationIndicator,
+        showStatus: true
+      }
+    });
+
+    expect(screen.getByText('Optimal')).toBeTruthy();
+  });
+
+  it('7.1.17g: Shows YTD label when showYtd is true', () => {
+    render(UtilizationBadge, {
+      props: {
+        utilization: 85,
+        indicator: 'green' as UtilizationIndicator,
+        showYtd: true
+      }
+    });
+
+    expect(screen.getByText('YTD')).toBeTruthy();
+  });
+
+  it('7.1.17h: Supports different sizes', () => {
+    const sizes = ['sm', 'md', 'lg'] as const;
+
+    sizes.forEach((size) => {
+      const { container, unmount } = render(UtilizationBadge, {
+        props: {
+          utilization: 85,
+          indicator: 'green' as UtilizationIndicator,
+          size
+        }
+      });
+
+      const badge = container.querySelector('.badge');
+      expect(badge?.classList.contains(`badge-${size}`)).toBe(true);
+      unmount();
+    });
+  });
+});