headroom/openspec/changes/p05-page-migrations/design.md

Design: Page Migrations

Migration Strategy

Approach

1. Create new page using layout components
2. Add route (+page.svelte)
3. Add page load function (+page.ts) for data fetching
4. Integrate with existing API endpoints
5. Test and verify
6. Remove old components

---

Team Members Page

src/routes/team-members/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import PageHeader from '$lib/components/layout/PageHeader.svelte';
  import DataTable from '$lib/components/common/DataTable.svelte';
  import FilterBar from '$lib/components/common/FilterBar.svelte';
  import type { ColumnDef } from '@tanstack/svelte-table';
  import { Plus, Edit, UserX } from 'lucide-svelte';

  interface TeamMember {
    id: string;
    name: string;
    role: string;
    hourlyRate: number;
    active: boolean;
  }

  let data = $state<TeamMember[]>([]);
  let loading = $state(true);
  let search = $state('');
  let statusFilter = $state('all');

  const columns: ColumnDef<TeamMember>[] = [
    { 
      accessorKey: 'name', 
      header: 'Name',
      cell: info => `<span class="font-medium">${info.getValue()}</span>`
    },
    { accessorKey: 'role', header: 'Role' },
    { 
      accessorKey: 'hourlyRate', 
      header: 'Hourly Rate',
      cell: info => `$${info.getValue()}/hr`
    },
    { 
      accessorKey: 'active', 
      header: 'Status',
      cell: info => info.getValue() 
        ? '<span class="badge badge-success">Active</span>'
        : '<span class="badge badge-ghost">Inactive</span>'
    },
  ];

  onMount(async () => {
    // TODO: Replace with actual API call
    data = [
      { id: '1', name: 'Alice Johnson', role: 'Frontend Dev', hourlyRate: 85, active: true },
      { id: '2', name: 'Bob Smith', role: 'Backend Dev', hourlyRate: 90, active: true },
    ];
    loading = false;
  });

  $derived filteredData = data.filter(m => {
    const matchesSearch = m.name.toLowerCase().includes(search.toLowerCase());
    const matchesStatus = statusFilter === 'all' || 
      (statusFilter === 'active' && m.active) ||
      (statusFilter === 'inactive' && !m.active);
    return matchesSearch && matchesStatus;
  });

  function handleCreate() {
    // TODO: Open create modal
  }

  function handleRowClick(row: TeamMember) {
    // TODO: Open edit modal or navigate to detail
  }
</script>

<svelte:head>
  <title>Team Members | Headroom</title>
</svelte:head>

<PageHeader title="Team Members" description="Manage your team roster">
  <button class="btn btn-primary btn-sm gap-2" onclick={handleCreate}>
    <Plus size={16} />
    Add Member
  </button>
</PageHeader>

<FilterBar 
  searchValue={search}
  searchPlaceholder="Search team members..."
  onSearchChange={(v) => search = v}
>
  <select class="select select-sm" bind:value={statusFilter}>
    <option value="all">All Status</option>
    <option value="active">Active</option>
    <option value="inactive">Inactive</option>
  </select>
</FilterBar>

<DataTable 
  data={filteredData}
  {columns}
  {loading}
  emptyTitle="No team members"
  emptyDescription="Add your first team member to get started."
  onRowClick={handleRowClick}
/>

---

Projects Page

src/routes/projects/+page.svelte

<script lang="ts">
  import { onMount } from 'svelte';
  import PageHeader from '$lib/components/layout/PageHeader.svelte';
  import DataTable from '$lib/components/common/DataTable.svelte';
  import FilterBar from '$lib/components/common/FilterBar.svelte';
  import type { ColumnDef } from '@tanstack/svelte-table';
  import { Plus } from 'lucide-svelte';

  interface Project {
    id: string;
    code: string;
    title: string;
    status: string;
    type: string;
  }

  let data = $state<Project[]>([]);
  let loading = $state(true);
  let search = $state('');
  let statusFilter = $state('all');
  let typeFilter = $state('all');

  const statusColors: Record<string, string> = {
    'Estimate Requested': 'badge-info',
    'Estimate Approved': 'badge-success',
    'In Progress': 'badge-primary',
    'On Hold': 'badge-warning',
    'Completed': 'badge-ghost',
  };

  const columns: ColumnDef<Project>[] = [
    { accessorKey: 'code', header: 'Code' },
    { accessorKey: 'title', header: 'Title' },
    { 
      accessorKey: 'status', 
      header: 'Status',
      cell: info => {
        const status = info.getValue() as string;
        const color = statusColors[status] || 'badge-ghost';
        return `<span class="badge ${color}">${status}</span>`;
      }
    },
    { accessorKey: 'type', header: 'Type' },
  ];

  onMount(async () => {
    // TODO: Replace with actual API call
    data = [];
    loading = false;
  });

  $derived filteredData = data.filter(p => {
    const matchesSearch = p.title.toLowerCase().includes(search.toLowerCase()) ||
      p.code.toLowerCase().includes(search.toLowerCase());
    const matchesStatus = statusFilter === 'all' || p.status === statusFilter;
    const matchesType = typeFilter === 'all' || p.type === typeFilter;
    return matchesSearch && matchesStatus && matchesType;
  });
</script>

<svelte:head>
  <title>Projects | Headroom</title>
</svelte:head>

<PageHeader title="Projects" description="Manage project lifecycle">
  <button class="btn btn-primary btn-sm gap-2">
    <Plus size={16} />
    New Project
  </button>
</PageHeader>

<FilterBar 
  searchValue={search}
  searchPlaceholder="Search projects..."
  onSearchChange={(v) => search = v}
>
  <select class="select select-sm" bind:value={statusFilter}>
    <option value="all">All Status</option>
    <option value="Estimate Requested">Estimate Requested</option>
    <option value="In Progress">In Progress</option>
    <option value="On Hold">On Hold</option>
    <option value="Completed">Completed</option>
  </select>
  <select class="select select-sm" bind:value={typeFilter}>
    <option value="all">All Types</option>
    <option value="Project">Project</option>
    <option value="Support">Support</option>
  </select>
</FilterBar>

<DataTable 
  data={filteredData}
  {columns}
  {loading}
  emptyTitle="No projects"
  emptyDescription="Create your first project to get started."
/>

---

Placeholder Page Template

src/routes/actuals/+page.svelte

<script lang="ts">
  import PageHeader from '$lib/components/layout/PageHeader.svelte';
  import EmptyState from '$lib/components/common/EmptyState.svelte';
  import { Clock } from 'lucide-svelte';
</script>

<svelte:head>
  <title>Actuals | Headroom</title>
</svelte:head>

<PageHeader title="Actuals" description="Track logged hours">
  <!-- No actions yet -->
</PageHeader>

<EmptyState 
  title="Coming Soon"
  description="Actuals tracking will be available in a future update."
  icon={Clock}
/>

---

Routes to Create

Route	Status	Description
/team-members	Full	DataTable with CRUD
/projects	Full	DataTable with workflow
/allocations	Placeholder	Coming soon
/actuals	Placeholder	Coming soon
/reports/forecast	Placeholder	Coming soon
/reports/utilization	Placeholder	Coming soon
/reports/costs	Placeholder	Coming soon
/reports/variance	Placeholder	Coming soon
/reports/allocation	Placeholder	Coming soon
/settings	Placeholder	Coming soon (admin)
/master-data	Placeholder	Coming soon (admin)

---

Cleanup Tasks

Remove Old Components

• Delete src/lib/components/Navigation.svelte
• Update any remaining imports

Update Root Layout

• Ensure AppLayout is used for all authenticated pages
• Remove any old navigation code