feat: add initial application structure with configuration, UI components, and state management

components/ColorModeToggle.vue

@@ -0,0 +1,17 @@
+<template>
+  <UButton color="gray" variant="ghost" @click="toggle">
+    <UIcon :name="icon" class="w-5 h-5" />
+  </UButton>
+</template>
+
+<script setup lang="ts">
+const colorMode = useColorMode();
+const icon = computed(() =>
+  colorMode.value === "dark"
+    ? "i-heroicons-moon-20-solid"
+    : "i-heroicons-sun-20-solid"
+);
+const toggle = () => {
+  colorMode.preference = colorMode.value === "dark" ? "light" : "dark";
+};
+</script>

components/ConcentrationChip.vue

@@ -0,0 +1,63 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    <UIcon v-if="showIcon" :name="iconName" class="mr-1" />
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type ConcentrationStatus = 'green' | 'yellow' | 'red'
+
+interface Props {
+  status: ConcentrationStatus
+  topSourcePct?: number
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+  showIcon?: boolean
+  showPercentage?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm',
+  showIcon: false,
+  showPercentage: true
+})
+
+const badgeColor = computed(() => {
+  return props.status
+})
+
+const displayText = computed(() => {
+  const statusTexts = {
+    green: 'Low Risk',
+    yellow: 'Medium Risk', 
+    red: 'High Risk'
+  }
+  
+  const baseText = statusTexts[props.status]
+  
+  if (props.showPercentage && props.topSourcePct) {
+    return `${baseText} (${Math.round(props.topSourcePct)}%)`
+  }
+  
+  return baseText
+})
+
+const iconName = computed(() => {
+  switch (props.status) {
+    case 'green':
+      return 'i-heroicons-check-circle'
+    case 'yellow':
+      return 'i-heroicons-exclamation-triangle'
+    case 'red':
+      return 'i-heroicons-x-circle'
+    default:
+      return 'i-heroicons-question-mark-circle'
+  }
+})
+</script>

components/CoverageMeter.vue

@@ -0,0 +1,101 @@
+<template>
+  <UCard>
+    <div class="text-center space-y-3">
+      <div class="text-3xl font-bold" :class="textColorClass">
+        {{ coveragePct }}%
+      </div>
+      <div class="text-sm text-gray-600">{{ label }}</div>
+      <UProgress 
+        :value="coveragePct" 
+        :max="100" 
+        :color="progressColor" 
+        class="mt-2"
+        :ui="{ progress: { background: 'bg-gray-200' } }"
+        :aria-label="`Coverage progress: ${coveragePct}% of target hours funded`"
+        role="progressbar"
+        :aria-valuenow="coveragePct"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuetext="`${coveragePct}% coverage, ${statusText.toLowerCase()} funding level`"
+      />
+      <UBadge 
+        :color="badgeColor" 
+        variant="subtle" 
+        class="text-xs"
+      >
+        {{ statusText }}
+      </UBadge>
+      <div v-if="showHours" class="text-xs text-gray-500 space-y-1">
+        <div>Funded: {{ fundedHours }}h</div>
+        <div>Target: {{ targetHours }}h</div>
+        <div v-if="gapHours > 0">Gap: {{ gapHours }}h</div>
+      </div>
+      <p v-if="description" class="text-xs text-gray-500 mt-2">
+        {{ description }}
+      </p>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  fundedPaidHours: number
+  targetHours: number
+  label?: string
+  description?: string
+  showHours?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Coverage vs Capacity',
+  showHours: true
+})
+
+const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
+
+const coveragePct = computed(() => 
+  Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
+)
+
+const status = computed(() => getCoverageStatus(coveragePct.value))
+
+const fundedHours = computed(() => Math.round(props.fundedPaidHours))
+const targetHours = computed(() => Math.round(props.targetHours))
+const gapHours = computed(() => Math.max(0, targetHours.value - fundedHours.value))
+
+const progressColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow' 
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const badgeColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow'
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const textColorClass = computed(() => {
+  switch (status.value) {
+    case 'green': return 'text-green-600'
+    case 'yellow': return 'text-yellow-600'
+    case 'red': return 'text-red-600'
+    default: return 'text-gray-600'
+  }
+})
+
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'green': return 'Well Funded'
+    case 'yellow': return 'Moderate'
+    case 'red': return 'Underfunded'
+    default: return 'Unknown'
+  }
+})
+</script>

components/GlossaryTooltip.vue

@@ -0,0 +1,54 @@
+<template>
+  <UTooltip 
+    :text="definition"
+    :ui="{ 
+      background: 'bg-white dark:bg-gray-900',
+      ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
+      rounded: 'rounded-lg',
+      shadow: 'shadow-lg',
+      base: 'px-3 py-2 text-sm max-w-xs'
+    }"
+    :popper="{ arrow: true }"
+  >
+    <template #text>
+      <div class="space-y-2">
+        <div class="font-medium">{{ term }}</div>
+        <div class="text-gray-600">{{ definition }}</div>
+        <NuxtLink 
+          :to="`/glossary#${termId}`" 
+          class="text-primary-600 hover:text-primary-700 text-xs inline-flex items-center gap-1"
+          @click="$emit('glossary-click')"
+        >
+          <UIcon name="i-heroicons-book-open" class="w-3 h-3" />
+          See full definition
+        </NuxtLink>
+      </div>
+    </template>
+    
+    <span 
+      class="underline decoration-dotted decoration-gray-400 hover:decoration-primary-500 cursor-help"
+      :class="{ 'font-medium': emphasis }"
+      :tabindex="0"
+      :aria-describedby="`tooltip-${termId}`"
+      @keydown.enter="$emit('glossary-click')"
+      @keydown.space.prevent="$emit('glossary-click')"
+    >
+      <slot>{{ term }}</slot>
+    </span>
+  </UTooltip>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  term: string
+  termId: string
+  definition: string
+  emphasis?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emphasis: false
+})
+
+defineEmits(['glossary-click'])
+</script>

components/PayRelationshipChip.vue

@@ -0,0 +1,54 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
+
+interface Props {
+  relationship: PayRelationship
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm'
+})
+
+const badgeColor = computed(() => {
+  switch (props.relationship) {
+    case 'FullyPaid':
+      return 'green'
+    case 'Hybrid':
+      return 'blue'
+    case 'Supplemental':
+      return 'yellow'
+    case 'VolunteerOrDeferred':
+      return 'gray'
+    default:
+      return 'gray'
+  }
+})
+
+const displayText = computed(() => {
+  switch (props.relationship) {
+    case 'FullyPaid':
+      return 'Fully Paid'
+    case 'Hybrid':
+      return 'Hybrid'
+    case 'Supplemental':
+      return 'Supplemental'
+    case 'VolunteerOrDeferred':
+      return 'Volunteer'
+    default:
+      return 'Unknown'
+  }
+})
+</script>

components/ReserveMeter.vue

@@ -0,0 +1,102 @@
+<template>
+  <UCard>
+    <div class="text-center space-y-3">
+      <div class="text-3xl font-bold" :class="textColorClass">
+        {{ progressPct }}%
+      </div>
+      <div class="text-sm text-gray-600">{{ label }}</div>
+      <UProgress 
+        :value="progressPct" 
+        :max="100" 
+        :color="progressColor" 
+        class="mt-2"
+        :ui="{ progress: { background: 'bg-gray-200' } }"
+        :aria-label="`Savings progress: ${progressPct}% of target reached`"
+        role="progressbar"
+        :aria-valuenow="progressPct"
+        aria-valuemin="0"
+        aria-valuemax="100"
+        :aria-valuetext="`${progressPct}% of savings target, ${statusText.toLowerCase()} status`"
+      />
+      <UBadge 
+        :color="badgeColor" 
+        variant="subtle" 
+        class="text-xs"
+      >
+        {{ statusText }}
+      </UBadge>
+      <div v-if="showAmounts" class="text-xs text-gray-500 space-y-1">
+        <div>Current: €{{ currentSavings.toLocaleString() }}</div>
+        <div>Target: €{{ targetAmount.toLocaleString() }}</div>
+        <div v-if="shortfall > 0">Need: €{{ shortfall.toLocaleString() }}</div>
+      </div>
+      <p v-if="description" class="text-xs text-gray-500 mt-2">
+        {{ description }}
+      </p>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  currentSavings: number
+  savingsTargetMonths: number
+  monthlyBurn: number
+  label?: string
+  description?: string
+  showAmounts?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Savings Progress',
+  showAmounts: true
+})
+
+const { analyzeReserveProgress } = useReserveProgress()
+
+const analysis = computed(() => 
+  analyzeReserveProgress(props.currentSavings, props.savingsTargetMonths, props.monthlyBurn)
+)
+
+const progressPct = computed(() => analysis.value.progressPct)
+const status = computed(() => analysis.value.status)
+const targetAmount = computed(() => analysis.value.targetAmount)
+const shortfall = computed(() => analysis.value.shortfall)
+const currentSavings = computed(() => props.currentSavings)
+
+const progressColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow' 
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const badgeColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow'
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const textColorClass = computed(() => {
+  switch (status.value) {
+    case 'green': return 'text-green-600'
+    case 'yellow': return 'text-yellow-600'
+    case 'red': return 'text-red-600'
+    default: return 'text-gray-600'
+  }
+})
+
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'green': return 'On Track'
+    case 'yellow': return 'Building'
+    case 'red': return 'Below Target'
+    default: return 'Unknown'
+  }
+})
+</script>

components/RestrictionChip.vue

@@ -0,0 +1,39 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type Restriction = 'Restricted' | 'General'
+
+interface Props {
+  restriction: Restriction
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm'
+})
+
+const badgeColor = computed(() => {
+  switch (props.restriction) {
+    case 'Restricted':
+      return 'orange'
+    case 'General':
+      return 'green'
+    default:
+      return 'gray'
+  }
+})
+
+const displayText = computed(() => {
+  return props.restriction
+})
+</script>

components/RiskBandChip.vue

@@ -0,0 +1,41 @@
+<template>
+  <UBadge
+    :color="badgeColor"
+    :variant="variant"
+    :size="size"
+  >
+    {{ displayText }}
+  </UBadge>
+</template>
+
+<script setup lang="ts">
+type RiskBand = 'Low' | 'Medium' | 'High'
+
+interface Props {
+  risk: RiskBand
+  variant?: 'solid' | 'outline' | 'soft' | 'subtle'
+  size?: 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  variant: 'subtle',
+  size: 'sm'
+})
+
+const badgeColor = computed(() => {
+  switch (props.risk) {
+    case 'Low':
+      return 'green'
+    case 'Medium':
+      return 'yellow'
+    case 'High':
+      return 'red'
+    default:
+      return 'gray'
+  }
+})
+
+const displayText = computed(() => {
+  return `${props.risk} Risk`
+})
+</script>

components/RunwayMeter.vue

@@ -0,0 +1,91 @@
+<template>
+  <UCard>
+    <div class="text-center space-y-3">
+      <div class="text-3xl font-bold" :class="textColorClass">
+        {{ formattedValue }}
+      </div>
+      <div class="text-sm text-gray-600">{{ label }}</div>
+      <UProgress 
+        :value="progressValue" 
+        :max="maxValue" 
+        :color="progressColor" 
+        class="mt-2" 
+        :ui="{ progress: { background: 'bg-gray-200' } }"
+        :aria-label="`Runway progress: ${formattedValue} out of ${maxValue} months maximum`"
+        role="progressbar"
+        :aria-valuenow="progressValue"
+        :aria-valuemin="0"
+        :aria-valuemax="maxValue"
+        :aria-valuetext="`${formattedValue} runway, ${statusText.toLowerCase()} status`"
+      />
+      <UBadge 
+        :color="badgeColor" 
+        variant="subtle" 
+        class="text-xs"
+      >
+        {{ statusText }}
+      </UBadge>
+      <p v-if="description" class="text-xs text-gray-500 mt-2">
+        {{ description }}
+      </p>
+    </div>
+  </UCard>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  months: number
+  label?: string
+  description?: string
+  maxMonths?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Runway',
+  maxMonths: 12
+})
+
+const { formatRunway, getRunwayStatus } = useRunway()
+
+const formattedValue = computed(() => formatRunway(props.months))
+const status = computed(() => getRunwayStatus(props.months))
+
+const progressValue = computed(() => Math.min(props.months, props.maxMonths))
+const maxValue = computed(() => props.maxMonths)
+
+const progressColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow' 
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const badgeColor = computed(() => {
+  switch (status.value) {
+    case 'green': return 'green'
+    case 'yellow': return 'yellow'
+    case 'red': return 'red'
+    default: return 'gray'
+  }
+})
+
+const textColorClass = computed(() => {
+  switch (status.value) {
+    case 'green': return 'text-green-600'
+    case 'yellow': return 'text-yellow-600'
+    case 'red': return 'text-red-600'
+    default: return 'text-gray-600'
+  }
+})
+
+const statusText = computed(() => {
+  switch (status.value) {
+    case 'green': return 'Healthy'
+    case 'yellow': return 'Caution'
+    case 'red': return 'Critical'
+    default: return 'Unknown'
+  }
+})
+</script>

components/WizardCostsStep.vue

@@ -0,0 +1,204 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="text-lg font-medium mb-4">Operating Costs</h3>
+      <p class="text-gray-600 mb-6">
+        Add your monthly overhead costs. Production costs are handled
+        separately.
+      </p>
+    </div>
+
+    <!-- Overhead Costs -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <h4 class="font-medium">Monthly Overhead</h4>
+        <UButton size="sm" @click="addOverheadCost" icon="i-heroicons-plus">
+          Add Cost
+        </UButton>
+      </div>
+
+      <div
+        v-if="overheadCosts.length === 0"
+        class="text-center py-8 text-gray-500">
+        <p>No overhead costs added yet.</p>
+        <p class="text-sm">
+          Add costs like rent, tools, insurance, or other recurring expenses.
+        </p>
+      </div>
+
+      <div
+        v-for="cost in overheadCosts"
+        :key="cost.id"
+        class="p-4 border border-gray-200 rounded-lg">
+        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+          <UFormField label="Cost Name" required>
+            <UInput
+              v-model="cost.name"
+              placeholder="Office rent"
+              @update:model-value="saveCost(cost)"
+              @blur="saveCost(cost)" />
+          </UFormField>
+
+          <UFormField label="Monthly Amount" required>
+            <UInput
+              v-model.number="cost.amount"
+              type="number"
+              min="0"
+              step="0.01"
+              placeholder="800.00"
+              @update:model-value="saveCost(cost)"
+              @blur="saveCost(cost)">
+              <template #leading>
+                <span class="text-gray-500">€</span>
+              </template>
+            </UInput>
+          </UFormField>
+
+          <UFormField label="Category">
+            <USelect
+              v-model="cost.category"
+              :items="categoryOptions"
+              @update:model-value="saveCost(cost)" />
+          </UFormField>
+        </div>
+
+        <div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
+          <UButton
+            size="sm"
+            variant="ghost"
+            color="red"
+            @click="removeCost(cost.id)">
+            Remove
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Cost Categories -->
+    <div class="bg-blue-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-2 text-blue-900">Cost Categories</h4>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
+        <div>
+          <span class="font-medium text-blue-800">Operations:</span>
+          <span class="text-blue-700 ml-1">Rent, utilities, insurance</span>
+        </div>
+        <div>
+          <span class="font-medium text-blue-800">Tools:</span>
+          <span class="text-blue-700 ml-1">Software, hardware, licenses</span>
+        </div>
+        <div>
+          <span class="font-medium text-blue-800">Professional:</span>
+          <span class="text-blue-700 ml-1">Legal, accounting, consulting</span>
+        </div>
+        <div>
+          <span class="font-medium text-blue-800">Other:</span>
+          <span class="text-blue-700 ml-1">Miscellaneous costs</span>
+        </div>
+      </div>
+    </div>
+
+    <!-- Summary -->
+    <div class="bg-gray-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-2">Cost Summary</h4>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+        <div>
+          <span class="text-gray-600">Total items:</span>
+          <span class="font-medium ml-1">{{ overheadCosts.length }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Monthly overhead:</span>
+          <span class="font-medium ml-1">€{{ totalMonthlyCosts }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Largest cost:</span>
+          <span class="font-medium ml-1">€{{ largestCost }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Avg per item:</span>
+          <span class="font-medium ml-1">€{{ avgCostPerItem }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+const emit = defineEmits<{
+  "save-status": [status: "saving" | "saved" | "error"];
+}>();
+
+// Store
+const budgetStore = useBudgetStore();
+const { overheadCosts } = storeToRefs(budgetStore);
+
+// Category options
+const categoryOptions = [
+  { label: "Operations", value: "Operations" },
+  { label: "Tools & Software", value: "Tools" },
+  { label: "Professional Services", value: "Professional" },
+  { label: "Marketing", value: "Marketing" },
+  { label: "Other", value: "Other" },
+];
+
+// Computeds
+const totalMonthlyCosts = computed(() =>
+  overheadCosts.value.reduce((sum, cost) => sum + (cost.amount || 0), 0)
+);
+
+const largestCost = computed(() => {
+  if (overheadCosts.value.length === 0) return 0;
+  return Math.max(...overheadCosts.value.map((c) => c.amount || 0));
+});
+
+const avgCostPerItem = computed(() => {
+  if (overheadCosts.value.length === 0) return 0;
+  return Math.round(totalMonthlyCosts.value / overheadCosts.value.length);
+});
+
+// Live-write with debounce
+const debouncedSave = useDebounceFn((cost: any) => {
+  emit("save-status", "saving");
+
+  try {
+    // Find and update existing cost
+    const existingCost = overheadCosts.value.find((c) => c.id === cost.id);
+    if (existingCost) {
+      // Store will handle reactivity through the ref
+      Object.assign(existingCost, cost);
+    }
+
+    emit("save-status", "saved");
+  } catch (error) {
+    console.error("Failed to save cost:", error);
+    emit("save-status", "error");
+  }
+}, 300);
+
+function saveCost(cost: any) {
+  if (cost.name && cost.amount >= 0) {
+    debouncedSave(cost);
+  }
+}
+
+function addOverheadCost() {
+  const newCost = {
+    id: Date.now().toString(),
+    name: "",
+    amount: 0,
+    category: "Operations",
+    recurring: true,
+  };
+
+  budgetStore.addOverheadLine({
+    name: newCost.name,
+    amountMonthly: newCost.amount,
+    category: newCost.category,
+  });
+}
+
+function removeCost(id: string) {
+  budgetStore.removeOverheadLine(id);
+}
+</script>

components/WizardMembersStep.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="text-lg font-medium mb-4">Members</h3>
+      <p class="text-gray-600 mb-6">Add co-op members and their capacity.</p>
+    </div>
+
+    <!-- Members List -->
+    <div class="space-y-4">
+      <div
+        v-for="(member, index) in members"
+        :key="member.id"
+        class="p-4 border border-gray-200 rounded-lg">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Basic Info -->
+          <div class="space-y-4">
+            <UFormField label="Display Name" required>
+              <UInput
+                v-model="member.displayName"
+                placeholder="Alex Chen"
+                @update:model-value="saveMember(member)"
+                @blur="saveMember(member)" />
+            </UFormField>
+
+            <UFormField label="Role Focus">
+              <UInput
+                v-model="member.roleFocus"
+                placeholder="Technical Lead"
+                @update:model-value="saveMember(member)"
+                @blur="saveMember(member)" />
+            </UFormField>
+
+            <UFormField label="Pay Relationship" required>
+              <USelect
+                v-model="member.payRelationship"
+                :items="payRelationshipOptions"
+                @update:model-value="saveMember(member)" />
+            </UFormField>
+          </div>
+
+          <!-- Capacity & Settings -->
+          <div class="space-y-4">
+            <UFormField label="Target Hours/Month" required>
+              <UInput
+                v-model.number="member.capacity.targetHours"
+                type="number"
+                min="0"
+                placeholder="120"
+                @update:model-value="saveMember(member)"
+                @blur="saveMember(member)" />
+            </UFormField>
+
+            <UFormField label="External Coverage %">
+              <UInput
+                v-model.number="member.externalCoveragePct"
+                type="number"
+                min="0"
+                max="100"
+                placeholder="60"
+                @update:model-value="saveMember(member)"
+                @blur="saveMember(member)" />
+            </UFormField>
+
+            <UFormField label="Risk Band">
+              <USelect
+                v-model="member.riskBand"
+                :items="riskBandOptions"
+                @update:model-value="saveMember(member)" />
+            </UFormField>
+          </div>
+        </div>
+
+        <!-- Actions -->
+        <div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
+          <UButton
+            size="sm"
+            variant="ghost"
+            color="red"
+            @click="removeMember(member.id)">
+            Remove
+          </UButton>
+        </div>
+      </div>
+
+      <!-- Add Member -->
+      <UButton
+        variant="outline"
+        @click="addMember"
+        class="w-full"
+        icon="i-heroicons-plus">
+        Add Member
+      </UButton>
+    </div>
+
+    <!-- Summary -->
+    <div class="bg-gray-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-2">Capacity Summary</h4>
+      <div class="grid grid-cols-3 gap-4 text-sm">
+        <div>
+          <span class="text-gray-600">Members:</span>
+          <span class="font-medium ml-1">{{ members.length }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Total Hours:</span>
+          <span class="font-medium ml-1">{{ totalTargetHours }}h</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Avg External:</span>
+          <span class="font-medium ml-1">{{ avgExternalCoverage }}%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+const emit = defineEmits<{
+  "save-status": [status: "saving" | "saved" | "error"];
+}>();
+
+// Store
+const membersStore = useMembersStore();
+const { members } = storeToRefs(membersStore);
+
+// Options
+const payRelationshipOptions = [
+  { label: "Fully Paid", value: "FullyPaid" },
+  { label: "Hybrid", value: "Hybrid" },
+  { label: "Supplemental", value: "Supplemental" },
+  { label: "Volunteer/Deferred", value: "VolunteerOrDeferred" },
+];
+
+const riskBandOptions = [
+  { label: "Low Risk", value: "Low" },
+  { label: "Medium Risk", value: "Medium" },
+  { label: "High Risk", value: "High" },
+];
+
+// Computeds
+const totalTargetHours = computed(() =>
+  members.value.reduce((sum, m) => sum + (m.capacity?.targetHours || 0), 0)
+);
+
+const avgExternalCoverage = computed(() => {
+  if (members.value.length === 0) return 0;
+  const total = members.value.reduce(
+    (sum, m) => sum + (m.externalCoveragePct || 0),
+    0
+  );
+  return Math.round(total / members.value.length);
+});
+
+// Live-write with debounce
+const debouncedSave = useDebounceFn((member: any) => {
+  emit("save-status", "saving");
+
+  try {
+    membersStore.upsertMember(member);
+    emit("save-status", "saved");
+  } catch (error) {
+    console.error("Failed to save member:", error);
+    emit("save-status", "error");
+  }
+}, 300);
+
+function saveMember(member: any) {
+  debouncedSave(member);
+}
+
+function addMember() {
+  const newMember = {
+    id: Date.now().toString(),
+    displayName: "",
+    roleFocus: "",
+    payRelationship: "FullyPaid",
+    capacity: {
+      minHours: 0,
+      targetHours: 0,
+      maxHours: 0,
+    },
+    riskBand: "Medium",
+    externalCoveragePct: 0,
+    privacyNeeds: "aggregate_ok",
+    deferredHours: 0,
+    quarterlyDeferredCap: 240,
+  };
+
+  membersStore.upsertMember(newMember);
+}
+
+function removeMember(id: string) {
+  membersStore.removeMember(id);
+}
+</script>

components/WizardPoliciesStep.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="text-lg font-medium mb-4">Wage & Policies</h3>
+      <p class="text-gray-600 mb-6">
+        Set your equal hourly wage and key policies.
+      </p>
+    </div>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
+      <!-- Core Wage Settings -->
+      <UCard title="Equal Wage">
+        <div class="space-y-4">
+          <UFormField label="Hourly Wage" required>
+            <UInput
+              v-model.number="wageModel"
+              type="number"
+              min="0"
+              step="0.01"
+              placeholder="25.00">
+              <template #leading>
+                <span class="text-gray-500">€</span>
+              </template>
+            </UInput>
+          </UFormField>
+
+          <UFormField
+            label="On-costs %"
+            hint="Employer taxes, benefits, payroll fees">
+            <UInput
+              v-model.number="oncostModel"
+              type="number"
+              min="0"
+              max="100"
+              placeholder="25">
+              <template #trailing>
+                <span class="text-gray-500">%</span>
+              </template>
+            </UInput>
+          </UFormField>
+        </div>
+      </UCard>
+
+      <!-- Cash Management -->
+      <UCard title="Cash Management">
+        <div class="space-y-4">
+          <UFormField
+            label="Savings Target"
+            hint="Months of burn to keep as reserves">
+            <UInput
+              v-model.number="savingsMonthsModel"
+              type="number"
+              min="0"
+              step="0.5"
+              placeholder="3">
+              <template #trailing>
+                <span class="text-gray-500">months</span>
+              </template>
+            </UInput>
+          </UFormField>
+
+          <UFormField
+            label="Minimum Cash Cushion"
+            hint="Weekly floor we won't breach">
+            <UInput
+              v-model.number="minCushionModel"
+              type="number"
+              min="0"
+              placeholder="3000">
+              <template #leading>
+                <span class="text-gray-500">€</span>
+              </template>
+            </UInput>
+          </UFormField>
+        </div>
+      </UCard>
+
+      <!-- Deferred Pay Policy -->
+      <UCard title="Deferred Pay">
+        <div class="space-y-4">
+          <UFormField
+            label="Quarterly Cap"
+            hint="Max deferred hours per member per quarter">
+            <UInput
+              v-model.number="deferredCapModel"
+              type="number"
+              min="0"
+              placeholder="240">
+              <template #trailing>
+                <span class="text-gray-500">hours</span>
+              </template>
+            </UInput>
+          </UFormField>
+
+          <UFormField
+            label="Sunset Period"
+            hint="Months after which deferred pay expires">
+            <UInput
+              v-model.number="deferredSunsetModel"
+              type="number"
+              min="0"
+              placeholder="12">
+              <template #trailing>
+                <span class="text-gray-500">months</span>
+              </template>
+            </UInput>
+          </UFormField>
+        </div>
+      </UCard>
+
+      <!-- Volunteer Scope -->
+      <UCard title="Volunteer Scope">
+        <div class="space-y-4">
+          <UFormField label="Allowed Flows" hint="What work can be done unpaid">
+            <div class="space-y-2">
+              <UCheckbox
+                v-for="flow in availableFlows"
+                :key="flow.value"
+                :id="'volunteer-flow-' + flow.value"
+                :name="flow.value"
+                :value="flow.value"
+                :checked="selectedVolunteerFlows.includes(flow.value)"
+                :label="flow.label"
+                @change="toggleFlow(flow.value, $event)" />
+            </div>
+          </UFormField>
+        </div>
+      </UCard>
+    </div>
+
+    <!-- Summary -->
+    <div class="bg-gray-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-2">Policy Summary</h4>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+        <div>
+          <span class="text-gray-600">Hourly wage:</span>
+          <span class="font-medium ml-1">€{{ wageModel || 0 }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">On-costs:</span>
+          <span class="font-medium ml-1">{{ oncostModel || 0 }}%</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Savings target:</span>
+          <span class="font-medium ml-1"
+            >{{ savingsMonthsModel || 0 }} months</span
+          >
+        </div>
+        <div>
+          <span class="text-gray-600">Cash cushion:</span>
+          <span class="font-medium ml-1">€{{ minCushionModel || 0 }}</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+const emit = defineEmits<{
+  "save-status": [status: "saving" | "saved" | "error"];
+}>();
+
+// Store
+const policiesStore = usePoliciesStore();
+
+function parseNumberInput(val: unknown): number {
+  if (typeof val === "number") return val;
+  if (typeof val === "string") {
+    const cleaned = val.replace(/,/g, ".").replace(/[^0-9.\-]/g, "");
+    const parsed = parseFloat(cleaned);
+    return Number.isFinite(parsed) ? parsed : 0;
+  }
+  return 0;
+}
+
+// Two-way computed models bound directly to the store
+const wageModel = computed({
+  get: () => unref(policiesStore.equalHourlyWage) as number,
+  set: (val: number | string) =>
+    policiesStore.setEqualWage(parseNumberInput(val)),
+});
+const oncostModel = computed({
+  get: () => unref(policiesStore.payrollOncostPct) as number,
+  set: (val: number | string) =>
+    policiesStore.setOncostPct(parseNumberInput(val)),
+});
+const savingsMonthsModel = computed({
+  get: () => unref(policiesStore.savingsTargetMonths) as number,
+  set: (val: number | string) =>
+    policiesStore.setSavingsTargetMonths(parseNumberInput(val)),
+});
+const minCushionModel = computed({
+  get: () => unref(policiesStore.minCashCushionAmount) as number,
+  set: (val: number | string) =>
+    policiesStore.setMinCashCushion(parseNumberInput(val)),
+});
+const deferredCapModel = computed({
+  get: () => unref(policiesStore.deferredCapHoursPerQtr) as number,
+  set: (val: number | string) =>
+    policiesStore.setDeferredCap(parseNumberInput(val)),
+});
+const deferredSunsetModel = computed({
+  get: () => unref(policiesStore.deferredSunsetMonths) as number,
+  set: (val: number | string) =>
+    policiesStore.setDeferredSunset(parseNumberInput(val)),
+});
+
+// Remove old local sync and debounce saving; direct v-model handles persistence
+
+// Volunteer flows
+const availableFlows = [
+  { label: "Care Work", value: "Care" },
+  { label: "Shared Learning", value: "SharedLearning" },
+  { label: "Community Building", value: "Community" },
+  { label: "Outreach", value: "Outreach" },
+];
+
+const selectedVolunteerFlows = ref([
+  ...policiesStore.volunteerScope.allowedFlows,
+]);
+
+// Minimal save-status feedback on changes
+function notifySaved() {
+  emit("save-status", "saved");
+}
+
+function toggleFlow(flowValue: string, event: any) {
+  const checked = event.target ? event.target.checked : event;
+  console.log(
+    "toggleFlow called:",
+    flowValue,
+    checked,
+    "current array:",
+    selectedVolunteerFlows.value
+  );
+
+  if (checked) {
+    if (!selectedVolunteerFlows.value.includes(flowValue)) {
+      selectedVolunteerFlows.value.push(flowValue);
+    }
+  } else {
+    const index = selectedVolunteerFlows.value.indexOf(flowValue);
+    if (index > -1) {
+      selectedVolunteerFlows.value.splice(index, 1);
+    }
+  }
+
+  console.log("after toggle:", selectedVolunteerFlows.value);
+  saveVolunteerScope();
+}
+
+function saveVolunteerScope() {
+  emit("save-status", "saving");
+
+  try {
+    policiesStore.setVolunteerScope(selectedVolunteerFlows.value);
+    emit("save-status", "saved");
+  } catch (error) {
+    console.error("Failed to save volunteer scope:", error);
+    emit("save-status", "error");
+  }
+}
+</script>

components/WizardRevenueStep.vue

@@ -0,0 +1,405 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="text-lg font-medium mb-4">Revenue Streams</h3>
+      <p class="text-gray-600 mb-6">
+        Plan your revenue mix with target percentages and payout terms.
+      </p>
+    </div>
+
+    <!-- Revenue Streams -->
+    <div class="space-y-4">
+      <div class="flex items-center justify-between">
+        <h4 class="font-medium">Revenue Sources</h4>
+        <UButton size="sm" @click="addRevenueStream" icon="i-heroicons-plus">
+          Add Stream
+        </UButton>
+      </div>
+
+      <div v-if="streams.length === 0" class="text-center py-8 text-gray-500">
+        <p>No revenue streams added yet.</p>
+        <p class="text-sm">
+          Add streams like client work, grants, sales, or other income sources.
+        </p>
+      </div>
+
+      <div
+        v-for="stream in streams"
+        :key="stream.id"
+        class="p-4 border border-gray-200 rounded-lg">
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <!-- Basic Info -->
+          <div class="space-y-4">
+            <UFormField label="Stream Name" required>
+              <USelectMenu
+                v-model="stream.name"
+                :items="nameOptionsByCategory[stream.category] || []"
+                placeholder="Select or type a source name"
+                creatable
+                searchable
+                @update:model-value="saveStream(stream)" />
+            </UFormField>
+
+            <UFormField label="Category" required>
+              <USelect
+                v-model="stream.category"
+                :items="categoryOptions"
+                @update:model-value="saveStream(stream)" />
+            </UFormField>
+
+            <UFormField label="Certainty Level">
+              <USelect
+                v-model="stream.certainty"
+                :items="certaintyOptions"
+                @update:model-value="saveStream(stream)" />
+            </UFormField>
+          </div>
+
+          <!-- Financial Details -->
+          <div class="space-y-4">
+            <UFormField label="Target %" required>
+              <UInput
+                v-model.number="stream.targetPct"
+                type="number"
+                min="0"
+                max="100"
+                placeholder="40"
+                @update:model-value="saveStream(stream)"
+                @blur="saveStream(stream)">
+                <template #trailing>
+                  <span class="text-gray-500">%</span>
+                </template>
+              </UInput>
+            </UFormField>
+
+            <UFormField label="Monthly Target">
+              <UInput
+                v-model.number="stream.targetMonthlyAmount"
+                type="number"
+                min="0"
+                step="0.01"
+                placeholder="5000.00"
+                @update:model-value="saveStream(stream)"
+                @blur="saveStream(stream)">
+                <template #leading>
+                  <span class="text-gray-500">€</span>
+                </template>
+              </UInput>
+            </UFormField>
+
+            <UFormField
+              label="Payout Delay"
+              hint="Days from earning to payment">
+              <UInput
+                v-model.number="stream.payoutDelayDays"
+                type="number"
+                min="0"
+                placeholder="30"
+                @update:model-value="saveStream(stream)"
+                @blur="saveStream(stream)">
+                <template #trailing>
+                  <span class="text-gray-500">days</span>
+                </template>
+              </UInput>
+            </UFormField>
+          </div>
+        </div>
+
+        <!-- Advanced Details (Collapsible) -->
+        <UAccordion
+          :items="[
+            { label: 'Advanced Settings', slot: 'advanced-' + stream.id },
+          ]"
+          class="mt-4">
+          <template #[`advanced-${stream.id}`]>
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
+              <UFormField label="Platform Fee %">
+                <UInput
+                  v-model.number="stream.platformFeePct"
+                  type="number"
+                  min="0"
+                  max="100"
+                  placeholder="3"
+                  @update:model-value="saveStream(stream)"
+                  @blur="saveStream(stream)">
+                  <template #trailing>
+                    <span class="text-gray-500">%</span>
+                  </template>
+                </UInput>
+              </UFormField>
+
+              <UFormField label="Revenue Share %">
+                <UInput
+                  v-model.number="stream.revenueSharePct"
+                  type="number"
+                  min="0"
+                  max="100"
+                  placeholder="0"
+                  @update:model-value="saveStream(stream)"
+                  @blur="saveStream(stream)">
+                  <template #trailing>
+                    <span class="text-gray-500">%</span>
+                  </template>
+                </UInput>
+              </UFormField>
+
+              <UFormField label="Payment Terms">
+                <UInput
+                  v-model="stream.terms"
+                  placeholder="Net 30"
+                  @update:model-value="saveStream(stream)"
+                  @blur="saveStream(stream)" />
+              </UFormField>
+
+              <UFormField label="Fund Restrictions">
+                <USelect
+                  v-model="stream.restrictions"
+                  :items="restrictionOptions"
+                  @update:model-value="saveStream(stream)" />
+              </UFormField>
+            </div>
+          </template>
+        </UAccordion>
+
+        <div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
+          <UButton
+            size="sm"
+            variant="ghost"
+            color="red"
+            @click="removeStream(stream.id)">
+            Remove
+          </UButton>
+        </div>
+      </div>
+    </div>
+
+    <!-- Mix Validation -->
+    <div v-if="streams.length > 0" class="bg-yellow-50 rounded-lg p-4">
+      <div class="flex items-center gap-2 mb-2">
+        <UIcon
+          name="i-heroicons-exclamation-triangle"
+          class="w-4 h-4 text-yellow-600" />
+        <h4 class="font-medium text-sm text-yellow-900">Revenue Mix Status</h4>
+      </div>
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
+        <div>
+          <span class="text-yellow-700">Total target %:</span>
+          <span
+            class="font-medium ml-1"
+            :class="totalTargetPct === 100 ? 'text-green-700' : 'text-red-700'">
+            {{ totalTargetPct }}%
+          </span>
+        </div>
+        <div>
+          <span class="text-yellow-700">Top source:</span>
+          <span class="font-medium ml-1">{{ topSourcePct }}%</span>
+        </div>
+        <div>
+          <span class="text-yellow-700">Concentration:</span>
+          <UBadge
+            :color="concentrationColor"
+            variant="subtle"
+            size="xs"
+            class="ml-1">
+            {{ concentrationStatus }}
+          </UBadge>
+        </div>
+      </div>
+      <p v-if="totalTargetPct !== 100" class="text-xs text-yellow-700 mt-2">
+        Target percentages should add up to 100%. Currently
+        {{ totalTargetPct > 100 ? "over" : "under" }} by
+        {{ Math.abs(100 - totalTargetPct) }}%.
+      </p>
+    </div>
+
+    <!-- Summary -->
+    <div class="bg-gray-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-2">Revenue Summary</h4>
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+        <div>
+          <span class="text-gray-600">Total streams:</span>
+          <span class="font-medium ml-1">{{ streams.length }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Monthly target:</span>
+          <span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Avg payout delay:</span>
+          <span class="font-medium ml-1">{{ avgPayoutDelay }} days</span>
+        </div>
+        <div>
+          <span class="text-gray-600">Committed %:</span>
+          <span class="font-medium ml-1">{{ committedPercentage }}%</span>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useDebounceFn } from "@vueuse/core";
+import { storeToRefs } from "pinia";
+const emit = defineEmits<{
+  "save-status": [status: "saving" | "saved" | "error"];
+}>();
+
+// Store
+const streamsStore = useStreamsStore();
+const { streams } = storeToRefs(streamsStore);
+
+// Options
+const categoryOptions = [
+  { label: "Games & Products", value: "games" },
+  { label: "Services & Contracts", value: "services" },
+  { label: "Grants & Funding", value: "grants" },
+  { label: "Community Support", value: "community" },
+  { label: "Partnerships", value: "partnerships" },
+  { label: "Investment Income", value: "investment" },
+  { label: "In-Kind Contributions", value: "inkind" },
+];
+
+// Suggested names per category
+const nameOptionsByCategory: Record<string, string[]> = {
+  games: [
+    "Direct sales",
+    "Platform revenue share",
+    "DLC/expansions",
+    "Merchandise",
+  ],
+  services: [
+    "Contract development",
+    "Consulting",
+    "Workshops/teaching",
+    "Technical services",
+  ],
+  grants: [
+    "Government funding",
+    "Arts council grants",
+    "Foundation support",
+    "Research grants",
+  ],
+  community: [
+    "Patreon/subscriptions",
+    "Crowdfunding",
+    "Donations",
+    "Mutual aid received",
+  ],
+  partnerships: [
+    "Corporate partnerships",
+    "Academic partnerships",
+    "Sponsorships",
+  ],
+  investment: ["Impact investment", "Venture capital", "Loans"],
+  inkind: [
+    "Office space",
+    "Equipment/hardware",
+    "Software licenses",
+    "Professional services",
+    "Marketing/PR services",
+    "Legal services",
+  ],
+};
+
+const certaintyOptions = [
+  { label: "Committed", value: "Committed" },
+  { label: "Probable", value: "Probable" },
+  { label: "Aspirational", value: "Aspirational" },
+];
+
+const restrictionOptions = [
+  { label: "General Use", value: "General" },
+  { label: "Restricted Use", value: "Restricted" },
+];
+
+// Computeds
+const totalTargetPct = computed(() => streamsStore.totalTargetPct);
+const totalMonthlyTarget = computed(() =>
+  Math.round(
+    streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0)
+  )
+);
+
+const topSourcePct = computed(() => {
+  if (streams.value.length === 0) return 0;
+  return Math.max(...streams.value.map((s) => s.targetPct || 0));
+});
+
+const concentrationStatus = computed(() => {
+  const topPct = topSourcePct.value;
+  if (topPct > 50) return "High Risk";
+  if (topPct > 35) return "Medium Risk";
+  return "Low Risk";
+});
+
+const concentrationColor = computed(() => {
+  const status = concentrationStatus.value;
+  if (status === "High Risk") return "red";
+  if (status === "Medium Risk") return "yellow";
+  return "green";
+});
+
+const avgPayoutDelay = computed(() => {
+  if (streams.value.length === 0) return 0;
+  const total = streams.value.reduce(
+    (sum, s) => sum + (s.payoutDelayDays || 0),
+    0
+  );
+  return Math.round(total / streams.value.length);
+});
+
+const committedPercentage = computed(() => {
+  const committedStreams = streams.value.filter(
+    (s) => s.certainty === "Committed"
+  );
+  const committedPct = committedStreams.reduce(
+    (sum, s) => sum + (s.targetPct || 0),
+    0
+  );
+  return Math.round(committedPct);
+});
+
+// Live-write with debounce
+const debouncedSave = useDebounceFn((stream: any) => {
+  emit("save-status", "saving");
+
+  try {
+    streamsStore.upsertStream(stream);
+    emit("save-status", "saved");
+  } catch (error) {
+    console.error("Failed to save stream:", error);
+    emit("save-status", "error");
+  }
+}, 300);
+
+function saveStream(stream: any) {
+  if (stream.name && stream.category && stream.targetPct >= 0) {
+    debouncedSave(stream);
+  }
+}
+
+function addRevenueStream() {
+  const newStream = {
+    id: Date.now().toString(),
+    name: "",
+    category: "games",
+    subcategory: "",
+    targetPct: 0,
+    targetMonthlyAmount: 0,
+    certainty: "Aspirational",
+    payoutDelayDays: 0,
+    terms: "",
+    revenueSharePct: 0,
+    platformFeePct: 0,
+    restrictions: "General",
+    seasonalityWeights: new Array(12).fill(1),
+    effortHoursPerMonth: 0,
+  };
+
+  streamsStore.upsertStream(newStream);
+}
+
+function removeStream(id: string) {
+  streamsStore.removeStream(id);
+}
+</script>

components/WizardReviewStep.vue

@@ -0,0 +1,319 @@
+<template>
+  <div class="space-y-6">
+    <div>
+      <h3 class="text-lg font-medium mb-4">Review & Complete</h3>
+      <p class="text-gray-600 mb-6">Review your setup and complete the wizard to start using your co-op tool.</p>
+    </div>
+
+    <div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
+      <!-- Members Summary -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h4 class="font-medium">Members ({{ members.length }})</h4>
+            <UBadge :color="membersValid ? 'green' : 'red'" variant="subtle">
+              {{ membersValid ? 'Valid' : 'Incomplete' }}
+            </UBadge>
+          </div>
+        </template>
+        
+        <div class="space-y-3">
+          <div v-for="member in members" :key="member.id" class="flex items-center justify-between text-sm">
+            <div>
+              <span class="font-medium">{{ member.displayName || 'Unnamed Member' }}</span>
+              <span v-if="member.roleFocus" class="text-gray-500 ml-1">({{ member.roleFocus }})</span>
+            </div>
+            <div class="text-right text-xs text-gray-500">
+              <div>{{ member.payRelationship || 'No relationship set' }}</div>
+              <div>{{ member.capacity?.targetHours || 0 }}h/month</div>
+            </div>
+          </div>
+          
+          <div class="pt-3 border-t border-gray-100">
+            <div class="grid grid-cols-2 gap-4 text-xs">
+              <div>
+                <span class="text-gray-600">Total capacity:</span>
+                <span class="font-medium ml-1">{{ totalCapacity }}h</span>
+              </div>
+              <div>
+                <span class="text-gray-600">Avg external:</span>
+                <span class="font-medium ml-1">{{ avgExternal }}%</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Policies Summary -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h4 class="font-medium">Policies</h4>
+            <UBadge :color="policiesValid ? 'green' : 'red'" variant="subtle">
+              {{ policiesValid ? 'Valid' : 'Incomplete' }}
+            </UBadge>
+          </div>
+        </template>
+        
+        <div class="space-y-3 text-sm">
+          <div class="flex justify-between">
+            <span class="text-gray-600">Equal hourly wage:</span>
+            <span class="font-medium">€{{ policies.equalHourlyWage || 0 }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">Payroll on-costs:</span>
+            <span class="font-medium">{{ policies.payrollOncostPct || 0 }}%</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">Savings target:</span>
+            <span class="font-medium">{{ policies.savingsTargetMonths || 0 }} months</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">Cash cushion:</span>
+            <span class="font-medium">€{{ policies.minCashCushionAmount || 0 }}</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">Deferred cap:</span>
+            <span class="font-medium">{{ policies.deferredCapHoursPerQtr || 0 }}h/qtr</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">Volunteer flows:</span>
+            <span class="font-medium">{{ policies.volunteerScope.allowedFlows.length }} types</span>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Costs Summary -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h4 class="font-medium">Overhead Costs ({{ overheadCosts.length }})</h4>
+            <UBadge color="blue" variant="subtle">Optional</UBadge>
+          </div>
+        </template>
+        
+        <div v-if="overheadCosts.length === 0" class="text-sm text-gray-500 text-center py-4">
+          No overhead costs added
+        </div>
+        
+        <div v-else class="space-y-2">
+          <div v-for="cost in overheadCosts.slice(0, 3)" :key="cost.id" class="flex justify-between text-sm">
+            <span class="text-gray-700">{{ cost.name }}</span>
+            <span class="font-medium">€{{ cost.amount || 0 }}</span>
+          </div>
+          <div v-if="overheadCosts.length > 3" class="text-xs text-gray-500">
+            +{{ overheadCosts.length - 3 }} more items
+          </div>
+          
+          <div class="pt-2 border-t border-gray-100">
+            <div class="flex justify-between text-sm font-medium">
+              <span>Monthly total:</span>
+              <span>€{{ totalMonthlyCosts }}</span>
+            </div>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Revenue Summary -->
+      <UCard>
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h4 class="font-medium">Revenue Streams ({{ streams.length }})</h4>
+            <UBadge :color="streamsValid ? 'green' : 'red'" variant="subtle">
+              {{ streamsValid ? 'Valid' : 'Incomplete' }}
+            </UBadge>
+          </div>
+        </template>
+        
+        <div v-if="streams.length === 0" class="text-sm text-gray-500 text-center py-4">
+          No revenue streams added
+        </div>
+        
+        <div v-else class="space-y-3">
+          <div v-for="stream in streams.slice(0, 3)" :key="stream.id" class="space-y-1">
+            <div class="flex justify-between text-sm">
+              <span class="font-medium">{{ stream.name || 'Unnamed Stream' }}</span>
+              <span class="text-gray-600">{{ stream.targetPct || 0 }}%</span>
+            </div>
+            <div class="flex justify-between text-xs text-gray-500">
+              <span>{{ stream.category }} • {{ stream.certainty }}</span>
+              <span>€{{ stream.targetMonthlyAmount || 0 }}/mo</span>
+            </div>
+          </div>
+          
+          <div v-if="streams.length > 3" class="text-xs text-gray-500">
+            +{{ streams.length - 3 }} more streams
+          </div>
+          
+          <div class="pt-3 border-t border-gray-100">
+            <div class="grid grid-cols-2 gap-4 text-xs">
+              <div>
+                <span class="text-gray-600">Target % total:</span>
+                <span class="font-medium ml-1" :class="totalTargetPct === 100 ? 'text-green-600' : 'text-red-600'">
+                  {{ totalTargetPct }}%
+                </span>
+              </div>
+              <div>
+                <span class="text-gray-600">Monthly target:</span>
+                <span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </UCard>
+    </div>
+
+    <!-- Overall Status -->
+    <div class="bg-gray-50 rounded-lg p-4">
+      <h4 class="font-medium text-sm mb-3">Setup Status</h4>
+      
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
+        <div class="flex items-center gap-2">
+          <UIcon 
+            :name="membersValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" 
+            :class="membersValid ? 'text-green-500' : 'text-red-500'"
+            class="w-4 h-4"
+          />
+          <span class="text-sm">Members</span>
+        </div>
+        
+        <div class="flex items-center gap-2">
+          <UIcon 
+            :name="policiesValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" 
+            :class="policiesValid ? 'text-green-500' : 'text-red-500'"
+            class="w-4 h-4"
+          />
+          <span class="text-sm">Policies</span>
+        </div>
+        
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-check-circle" class="text-blue-500 w-4 h-4" />
+          <span class="text-sm">Costs (Optional)</span>
+        </div>
+        
+        <div class="flex items-center gap-2">
+          <UIcon 
+            :name="streamsValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'" 
+            :class="streamsValid ? 'text-green-500' : 'text-red-500'"
+            class="w-4 h-4"
+          />
+          <span class="text-sm">Revenue</span>
+        </div>
+      </div>
+
+      <div v-if="!canComplete" class="bg-yellow-100 border border-yellow-200 rounded-md p-3 mb-4">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-heroicons-exclamation-triangle" class="text-yellow-600 w-4 h-4" />
+          <span class="text-sm font-medium text-yellow-800">Complete required sections to finish setup</span>
+        </div>
+        <ul class="list-disc list-inside text-xs text-yellow-700 mt-2">
+          <li v-if="!membersValid">Add at least one member with valid details</li>
+          <li v-if="!policiesValid">Set a valid hourly wage and complete policy fields</li>
+          <li v-if="!streamsValid">Add at least one revenue stream with valid details</li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- Actions -->
+    <div class="flex justify-between items-center pt-6 border-t">
+      <UButton variant="ghost" @click="$emit('reset')" color="red">
+        Reset All Data
+      </UButton>
+      
+      <div class="flex gap-3">
+        <UButton variant="outline" @click="exportSetup">
+          Export Setup
+        </UButton>
+        <UButton 
+          @click="completeSetup" 
+          :disabled="!canComplete"
+          size="lg"
+        >
+          Complete Setup
+        </UButton>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const emit = defineEmits<{
+  'complete': []
+  'reset': []
+}>()
+
+// Stores
+const membersStore = useMembersStore()
+const policiesStore = usePoliciesStore()
+const budgetStore = useBudgetStore()
+const streamsStore = useStreamsStore()
+
+// Computed data
+const members = computed(() => membersStore.members)
+const policies = computed(() => ({
+  equalHourlyWage: policiesStore.equalHourlyWage,
+  payrollOncostPct: policiesStore.payrollOncostPct,
+  savingsTargetMonths: policiesStore.savingsTargetMonths,
+  minCashCushionAmount: policiesStore.minCashCushionAmount,
+  deferredCapHoursPerQtr: policiesStore.deferredCapHoursPerQtr,
+  volunteerScope: policiesStore.volunteerScope
+}))
+const overheadCosts = computed(() => budgetStore.overheadCosts)
+const streams = computed(() => streamsStore.streams)
+
+// Validation
+const membersValid = computed(() => membersStore.isValid)
+const policiesValid = computed(() => policiesStore.isValid)
+const streamsValid = computed(() => streamsStore.hasValidStreams)
+const canComplete = computed(() => membersValid.value && policiesValid.value && streamsValid.value)
+
+// Summary calculations
+const totalCapacity = computed(() => 
+  members.value.reduce((sum, m) => sum + (m.capacity?.targetHours || 0), 0)
+)
+
+const avgExternal = computed(() => {
+  if (members.value.length === 0) return 0
+  const total = members.value.reduce((sum, m) => sum + (m.externalCoveragePct || 0), 0)
+  return Math.round(total / members.value.length)
+})
+
+const totalMonthlyCosts = computed(() => 
+  overheadCosts.value.reduce((sum, c) => sum + (c.amount || 0), 0)
+)
+
+const totalTargetPct = computed(() => streamsStore.totalTargetPct)
+const totalMonthlyTarget = computed(() => 
+  Math.round(streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0))
+)
+
+function completeSetup() {
+  if (canComplete.value) {
+    // Mark setup as complete in some way (could be a store flag)
+    emit('complete')
+  }
+}
+
+function exportSetup() {
+  // Create export data
+  const setupData = {
+    members: members.value,
+    policies: policies.value,
+    overheadCosts: overheadCosts.value,
+    streams: streams.value,
+    exportedAt: new Date().toISOString(),
+    version: '1.0'
+  }
+
+  // Download as JSON
+  const blob = new Blob([JSON.stringify(setupData, null, 2)], { type: 'application/json' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = `coop-setup-${new Date().toISOString().split('T')[0]}.json`
+  document.body.appendChild(a)
+  a.click()
+  document.body.removeChild(a)
+  URL.revokeObjectURL(url)
+}
+</script>