refactor: replace Wizard with CoopBuilder in navigation, enhance budget store structure, and streamline template components for improved user experience

components/BudgetCategorySelector.vue

@@ -0,0 +1,67 @@
+<template>
+  <select 
+    v-model="selectedCategory"
+    @change="handleSelection(selectedCategory)"
+    class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+  >
+    <option v-for="option in options" :key="option" :value="option">
+      {{ option }}
+    </option>
+  </select>
+</template>
+
+<script setup lang="ts">
+interface Props {
+  modelValue: string;
+  type: 'revenue' | 'expenses';
+  mainCategory?: string;
+  placeholder?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placeholder: 'Select subcategory'
+});
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+}>();
+
+const budgetStore = useBudgetStore();
+
+const selectedCategory = computed({
+  get: () => props.modelValue,
+  set: (value) => emit('update:modelValue', value)
+});
+
+const options = computed(() => {
+  if (props.type === 'revenue' && props.mainCategory) {
+    // Show subcategories for the revenue main category
+    return budgetStore.revenueSubcategories[props.mainCategory] || [];
+  } else if (props.type === 'expenses' && props.mainCategory) {
+    // For expenses, we don't have predefined subcategories, so show common ones or empty
+    const expenseSubcategories = {
+      'Salaries & Benefits': ['Base wages and benefits', 'Health insurance', 'Retirement contributions', 'Payroll taxes'],
+      'Development Costs': ['Software tools', 'Development kits', 'Contractor fees', 'Testing costs'],
+      'Equipment & Technology': ['Hardware', 'Software licenses', 'Cloud services', 'IT support'],
+      'Marketing & Outreach': ['Advertising', 'Content creation', 'Event costs', 'PR services'],
+      'Office & Operations': ['Rent', 'Utilities', 'Insurance', 'Office supplies'],
+      'Legal & Professional': ['Legal fees', 'Accounting', 'Consulting', 'Professional services'],
+      'Other Expenses': ['Miscellaneous', 'Travel', 'Training', 'Other']
+    };
+    return expenseSubcategories[props.mainCategory] || ['Miscellaneous'];
+  } else {
+    // Fallback to main categories if no mainCategory provided
+    return props.type === 'revenue' 
+      ? budgetStore.revenueCategories 
+      : budgetStore.expenseCategories;
+  }
+});
+
+function handleSelection(value: string) {
+  // If it's a new category (not in existing list), add it
+  if (value && !options.value.includes(value)) {
+    budgetStore.addCustomCategory(props.type, value);
+  }
+  emit('update:modelValue', value);
+}
+</script>

components/CoopBuilderSubnav.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="mb-12">
+    <div class="w-full mx-auto">
+      <nav
+        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
+      >
+        <NuxtLink
+          v-for="item in coopBuilderItems"
+          :key="item.id"
+          :to="item.path"
+          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
+          :class="
+            isActive(item.path)
+              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
+              : ''
+          "
+        >
+          {{ item.name }}
+        </NuxtLink>
+      </nav>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+const route = useRoute();
+
+const coopBuilderItems = [
+  {
+    id: "coop-builder",
+    name: "Setup Wizard",
+    path: "/coop-builder",
+  },
+  {
+    id: "budget",
+    name: "Budget",
+    path: "/budget",
+  },
+];
+
+function isActive(path: string): boolean {
+  return route.path === path;
+}
+</script>
+
+<style scoped>
+/* Ensure horizontal scroll on mobile */
+nav {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* Internet Explorer 10+ */
+}
+
+nav::-webkit-scrollbar {
+  display: none; /* WebKit */
+}
+</style>

components/ExportOptions.vue

@@ -2,9 +2,8 @@
   <div class="export-options" :class="containerClass">
     <div class="export-content">
       <div class="export-section">
-        <h3 class="export-title">Export Options:</h3>
         <div class="export-buttons">
-          <button
+          <UButton
             @click="copyToClipboard"
             class="export-btn"
             :disabled="isProcessing"
@@ -13,9 +12,9 @@
             <UIcon name="i-heroicons-clipboard" />
             <span>Copy as Text</span>
             <UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
-          </button>
+          </UButton>
 
-          <button
+          <UButton
             @click="downloadAsMarkdown"
             class="export-btn"
             :disabled="isProcessing"
@@ -28,7 +27,7 @@
               name="i-heroicons-check"
               class="success-icon"
             />
-          </button>
+          </UButton>
         </div>
       </div>
     </div>
@@ -582,6 +581,7 @@ const downloadFile = (content: string, filename: string, type: string) => {
 }
 
 .export-buttons {
+  @apply font-mono;
   display: flex;
   flex-wrap: wrap;
   gap: 0.75rem;

components/WizardRevenueStep.vue

@@ -1,132 +1,137 @@
 <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">
-          Where will your money come from?
-        </h3>
-        <p class="text-neutral-600">
-          Add sources like client work, grants, product sales, or donations.
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <UButton
-          variant="outline"
-          color="gray"
-          size="sm"
-          @click="exportStreams">
-          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
-          Export
-        </UButton>
-        <UButton
-          v-if="streams.length > 0"
-          @click="addRevenueStream"
-          size="sm"
-          variant="solid"
-          color="success"
-          :ui="{
-            base: 'cursor-pointer hover:scale-105 transition-transform',
-            leadingIcon: 'hover:rotate-90 transition-transform',
-          }">
-          <UIcon name="i-heroicons-plus" class="mr-1" />
-          Add stream
-        </UButton>
-      </div>
+    <!-- Section Header -->
+    <div class="mb-8">
+      <h3 class="text-2xl font-black text-black mb-2">
+        Where will your money come from?
+      </h3>
+      <p class="text-neutral-600">
+        Add sources like client work, grants, product sales, or donations.
+      </p>
     </div>
 
-    <div class="space-y-3">
-      <div
-        v-if="streams.length === 0"
-        class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
-        <h4 class="font-medium text-neutral-900 mb-2">
-          No revenue streams yet
-        </h4>
-        <p class="text-sm text-neutral-500 mb-4">
-          Get started by adding your first revenue source.
-        </p>
-        <UButton
-          @click="addRevenueStream"
-          size="lg"
-          variant="solid"
-          color="primary">
-          <UIcon name="i-heroicons-plus" class="mr-2" />
-          Add your first revenue stream
-        </UButton>
-      </div>
+    <!-- Removed Tab Navigation - showing streams directly -->
+        <div class="space-y-6">
+          <!-- Export Controls -->
+          <div class="flex justify-end">
+            <UButton
+              variant="outline"
+              color="gray"
+              size="sm"
+              @click="exportStreams">
+              <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
+              Export
+            </UButton>
+          </div>
 
-      <div
-        v-for="stream in streams"
-        :key="stream.id"
-        class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
-        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-          <UFormField label="Category" required>
-            <USelect
-              v-model="stream.category"
-              :items="categoryOptions"
-              size="xl"
-              class="text-xl font-bold w-full"
-              @update:model-value="saveStream(stream)" />
-          </UFormField>
+          <div class="space-y-3">
+            <div
+              v-if="streams.length === 0"
+              class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
+              <h4 class="font-medium text-neutral-900 mb-2">
+                No revenue streams yet
+              </h4>
+              <p class="text-sm text-neutral-500 mb-4">
+                Get started by adding your first revenue source.
+              </p>
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="primary">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add your first revenue stream
+              </UButton>
+            </div>
 
-          <UFormField label="Revenue source name" required>
-            <USelectMenu
-              v-model="stream.name"
-              :items="nameOptionsByCategory[stream.category] || []"
-              placeholder="Select or type a source name"
-              creatable
-              searchable
-              size="xl"
-              class="text-xl font-bold w-full"
-              @update:model-value="saveStream(stream)" />
-          </UFormField>
+            <div
+              v-for="stream in streams"
+              :key="stream.id"
+              class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
+              <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <UFormField label="Category" required>
+                  <USelect
+                    v-model="stream.category"
+                    :items="categoryOptions"
+                    size="xl"
+                    class="text-xl font-bold w-full"
+                    @update:model-value="saveStream(stream)" />
+                </UFormField>
 
-          <UFormField label="Monthly amount" required>
-            <UInput
-              v-model="stream.targetMonthlyAmount"
-              type="text"
-              placeholder="5000"
-              size="xl"
-              class="text-xl font-black w-full"
-              @update:model-value="validateAndSaveAmount($event, stream)"
-              @blur="saveStream(stream)">
-              <template #leading>
-                <span class="text-neutral-500 text-xl">$</span>
-              </template>
-            </UInput>
-          </UFormField>
+                <UFormField label="Revenue source name" required>
+                  <USelectMenu
+                    v-model="stream.name"
+                    :items="nameOptionsByCategory[stream.category] || []"
+                    placeholder="Select or type a source name"
+                    creatable
+                    searchable
+                    size="xl"
+                    class="text-xl font-bold w-full"
+                    @update:model-value="saveStream(stream)" />
+                </UFormField>
+
+                <UFormField label="Monthly amount" required>
+                  <UInput
+                    v-model="stream.targetMonthlyAmount"
+                    type="text"
+                    placeholder="5000"
+                    size="xl"
+                    class="text-xl font-black w-full"
+                    @update:model-value="validateAndSaveAmount($event, stream)"
+                    @blur="saveStream(stream)">
+                    <template #leading>
+                      <span class="text-neutral-500 text-xl">$</span>
+                    </template>
+                  </UInput>
+                </UFormField>
+              </div>
+
+              <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
+                <UButton
+                  size="xs"
+                  variant="solid"
+                  color="error"
+                  @click="removeStream(stream.id)"
+                  :ui="{
+                    base: 'cursor-pointer hover:opacity-90 transition-opacity',
+                  }">
+                  <UIcon name="i-heroicons-trash" class="w-4 h-4" />
+                </UButton>
+              </div>
+            </div>
+
+            <!-- Add Stream Button (when items exist) -->
+            <div v-if="streams.length > 0" class="flex justify-center">
+              <UButton
+                @click="addRevenueStream"
+                size="lg"
+                variant="solid"
+                color="success"
+                :ui="{
+                  base: 'cursor-pointer hover:scale-105 transition-transform',
+                  leadingIcon: 'hover:rotate-90 transition-transform',
+                }">
+                <UIcon name="i-heroicons-plus" class="mr-2" />
+                Add another stream
+              </UButton>
+            </div>
+
+            <div v-if="streams.length > 0" class="flex items-center gap-3 justify-end">
+              <UButton
+                @click="addRevenueStream"
+                size="sm"
+                variant="solid"
+                color="success"
+                :ui="{
+                  base: 'cursor-pointer hover:scale-105 transition-transform',
+                  leadingIcon: 'hover:rotate-90 transition-transform',
+                }">
+                <UIcon name="i-heroicons-plus" class="mr-1" />
+                Add stream
+              </UButton>
+            </div>
+          </div>
         </div>
-
-        <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
-          <UButton
-            size="xs"
-            variant="solid"
-            color="error"
-            @click="removeStream(stream.id)"
-            :ui="{
-              base: 'cursor-pointer hover:opacity-90 transition-opacity',
-            }">
-            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
-          </UButton>
-        </div>
-      </div>
-
-      <!-- Add Stream Button (when items exist) -->
-      <div v-if="streams.length > 0" class="flex justify-center">
-        <UButton
-          @click="addRevenueStream"
-          size="lg"
-          variant="solid"
-          color="success"
-          :ui="{
-            base: 'cursor-pointer hover:scale-105 transition-transform',
-            leadingIcon: 'hover:rotate-90 transition-transform',
-          }">
-          <UIcon name="i-heroicons-plus" class="mr-2" />
-          Add another stream
-        </UButton>
-      </div>
-    </div>
   </div>
 </template>
 

components/WizardReviewStep.vue

@@ -1,20 +1,12 @@
 <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">Review & Complete</h3>
-        <p class="text-neutral-600">
-          Review your setup and complete the wizard to start using your co-op
-          tool.
-        </p>
-      </div>
-      <div class="flex items-center gap-3">
-        <UButton variant="outline" color="gray" size="sm" @click="exportSetup">
-          <UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
-          Export All
-        </UButton>
-      </div>
+    <!-- Section Header -->
+    <div class="mb-8">
+      <h3 class="text-2xl font-black text-black dark:text-white mb-2">Review & Complete</h3>
+      <p class="text-neutral-600 dark:text-neutral-400">
+        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">
@@ -371,28 +363,4 @@ function completeSetup() {
   }
 }
 
-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>

components/WizardSubnav.vue

@@ -1,52 +1,22 @@
 <template>
-  <div
-    class="border-b border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-900">
-    <div class="max-w-4xl mx-auto px-4 py-3">
-      <nav class="flex items-center space-x-1 overflow-x-auto">
-        <!-- Main Setup Wizard -->
-        <NuxtLink
-          to="/wizard"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
-          :class="
-            isActive('/wizard')
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon name="i-heroicons-cog-6-tooth" class="w-4 h-4 mr-2" />
-          Setup Wizard
-        </NuxtLink>
-
-        <!-- Divider -->
-        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
-
-        <!-- Template Wizards -->
+  <div class="mb-12">
+    <div class="w-full mx-auto">
+      <nav
+        class="flex flex-wrap items-center space-x-1 font-mono uppercase justify-self-center"
+      >
         <NuxtLink
           v-for="wizard in templateWizards"
           :key="wizard.id"
           :to="wizard.path"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
+          class="inline-flex items-center px-3 py-2 text-sm font-bold transition-colors whitespace-nowrap underline"
           :class="
             isActive(wizard.path)
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon :name="wizard.icon" class="w-4 h-4 mr-2" />
+              ? 'bg-black text-white dark:bg-white dark:text-black no-underline'
+              : ''
+          "
+        >
           {{ wizard.name }}
         </NuxtLink>
-
-        <!-- All Wizards Link -->
-        <div class="h-6 w-px bg-neutral-300 dark:bg-neutral-600 mx-2"></div>
-        <NuxtLink
-          to="/wizards"
-          class="inline-flex items-center px-3 py-2 rounded-md text-sm font-medium transition-colors whitespace-nowrap"
-          :class="
-            isActive('/wizards')
-              ? 'bg-black text-white dark:bg-white dark:text-black'
-              : 'text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-neutral-100 hover:bg-neutral-100 dark:hover:bg-neutral-800'
-          ">
-          <UIcon name="i-heroicons-squares-plus" class="w-4 h-4 mr-2" />
-          All Wizards
-        </NuxtLink>
       </nav>
     </div>
   </div>
@@ -55,30 +25,25 @@
 <script setup lang="ts">
 const route = useRoute();
 
-// Template wizards data - matches the wizards.vue page
 const templateWizards = [
   {
     id: "membership-agreement",
     name: "Membership Agreement",
-    icon: "i-heroicons-user-group",
     path: "/templates/membership-agreement",
   },
   {
     id: "conflict-resolution-framework",
     name: "Conflict Resolution",
-    icon: "i-heroicons-scale",
     path: "/templates/conflict-resolution-framework",
   },
   {
     id: "tech-charter",
     name: "Tech Charter",
-    icon: "i-heroicons-cog-6-tooth",
     path: "/templates/tech-charter",
   },
   {
     id: "decision-framework",
-    name: "Decision Helper",
-    icon: "i-heroicons-light-bulb",
+    name: "Decision Framework",
     path: "/templates/decision-framework",
   },
 ];