app/components/WizardPoliciesStep.vue

<template>
  <div class="max-w-4xl mx-auto space-y-6">
    <!-- Section Header with Export Controls -->
    <div class="flex items-center justify-between mb-8">
      <div>
        <h3 class="text-2xl font-black text-black mb-2">
          What's your equal hourly wage?
        </h3>
        <p class="text-neutral-600">
          Set the hourly rate that all co-op members will earn for their work.
        </p>
      </div>
      <div class="flex items-center gap-3">
        <UButton
          variant="outline"
          color="gray"
          size="sm"
          @click="exportPolicies">
          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
          Export
        </UButton>
      </div>
    </div>

    <div class="max-w-md">
      <UInput
        v-model="wageText"
        type="text"
        placeholder="0.00"
        size="xl"
        class="text-4xl font-black w-full h-20"
        @update:model-value="validateAndSaveWage">
        <template #leading>
          <span class="text-neutral-500 text-3xl">$</span>
        </template>
      </UInput>
    </div>
  </div>
</template>

<script setup lang="ts">
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;
}

// Text input for wage with validation
const wageText = ref(
  policiesStore.equalHourlyWage > 0
    ? policiesStore.equalHourlyWage.toString()
    : ""
);

// Watch for store changes to update text field
watch(
  () => policiesStore.equalHourlyWage,
  (newWage) => {
    wageText.value = newWage > 0 ? newWage.toString() : "";
  }
);

function validateAndSaveWage(value: string) {
  const cleanValue = value.replace(/[^\d.]/g, "");
  const numValue = parseFloat(cleanValue);

  wageText.value = cleanValue;

  if (!isNaN(numValue) && numValue >= 0) {
    policiesStore.setEqualWage(numValue);

    // Set sensible defaults when wage is set
    if (numValue > 0) {
      setDefaults();
      emit("save-status", "saved");
    }
  }
}

// Set reasonable defaults for hidden fields
function setDefaults() {
  if (policiesStore.payrollOncostPct === 0) {
    policiesStore.setOncostPct(25); // 25% on-costs
  }
  if (policiesStore.savingsTargetMonths === 0) {
    policiesStore.setSavingsTargetMonths(3); // 3 months savings
  }
  if (policiesStore.minCashCushionAmount === 0) {
    policiesStore.setMinCashCushion(3000); // €3k cushion
  }
  if (policiesStore.deferredCapHoursPerQtr === 0) {
    policiesStore.setDeferredCap(240); // 240 hours quarterly cap
  }
  if (policiesStore.deferredSunsetMonths === 0) {
    policiesStore.setDeferredSunset(12); // 12 month sunset
  }
  // Set default volunteer flows
  if (policiesStore.volunteerScope.allowedFlows.length === 0) {
    policiesStore.setVolunteerScope(["Care", "SharedLearning"]);
  }
}

// Set defaults on mount if needed
onMounted(() => {
  if (policiesStore.equalHourlyWage > 0) {
    setDefaults();
  }
});

function exportPolicies() {
  const exportData = {
    policies: {
      equalHourlyWage: policiesStore.equalHourlyWage,
      payrollOncostPct: policiesStore.payrollOncostPct,
      savingsTargetMonths: policiesStore.savingsTargetMonths,
      minCashCushionAmount: policiesStore.minCashCushionAmount,
      deferredCapHoursPerQtr: policiesStore.deferredCapHoursPerQtr,
      deferredSunsetMonths: policiesStore.deferredSunsetMonths,
      volunteerScope: policiesStore.volunteerScope,
    },
    exportedAt: new Date().toISOString(),
    section: "policies",
  };

  const blob = new Blob([JSON.stringify(exportData, null, 2)], {
    type: "application/json",
  });
  const url = URL.createObjectURL(blob);
  const a = document.createElement("a");
  a.href = url;
  a.download = `coop-policies-${new Date().toISOString().split("T")[0]}.json`;
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(url);
}
</script>