# 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`
```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`
```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`
```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