jennie/app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-17 17:25:04 +01:00
parent eede87a273
commit f67b138d95
33 changed files with 4970 additions and 2451 deletions
Download patch file Download diff file Expand all files Collapse all files

57
components/WizardSubnav.vue
View file

@ -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",
},
];