refactor: enhance UI components and navigation structure, implement export functionality for wizard steps, and update routing for improved user experience
This commit is contained in:
parent
37ab8d7bab
commit
d7e52293e4
18 changed files with 3802 additions and 3318 deletions
138
app.vue
138
app.vue
|
|
@ -3,80 +3,96 @@
|
|||
<div class="min-h-screen bg-white dark:bg-neutral-950">
|
||||
<UToaster />
|
||||
<NuxtLayout>
|
||||
<template v-if="$route.meta.layout !== 'template'">
|
||||
<UContainer class="bg-transparent">
|
||||
<header class="py-4 flex items-center justify-between">
|
||||
<div class="flex items-center gap-4">
|
||||
<NuxtLink to="/" class="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<UIcon name="i-heroicons-rocket-launch" class="text-primary-500" />
|
||||
<h1 class="font-semibold text-black dark:text-white">Urgent Tools</h1>
|
||||
</NuxtLink>
|
||||
<nav class="hidden md:flex items-center gap-1" role="navigation" aria-label="Main navigation">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/' }"
|
||||
>
|
||||
Dashboard
|
||||
<template v-if="$route.meta.layout !== 'template'">
|
||||
<UContainer class="bg-transparent">
|
||||
<header class="py-6">
|
||||
<div class="relative flex items-center justify-center">
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="flex items-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<UIcon
|
||||
name="i-heroicons-rocket-launch"
|
||||
class="text-primary-500" />
|
||||
<h1
|
||||
class="font-semibold text-black dark:text-white text-center">
|
||||
Urgent Tools
|
||||
</h1>
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/mix"
|
||||
<div class="absolute right-0">
|
||||
<ColorModeToggle />
|
||||
</div>
|
||||
</div>
|
||||
<nav
|
||||
class="mt-4 flex items-center justify-center gap-1"
|
||||
role="navigation"
|
||||
aria-label="Main navigation">
|
||||
<NuxtLink
|
||||
to="/coop-planner"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/mix' }"
|
||||
>
|
||||
Revenue Mix
|
||||
:class="{
|
||||
'bg-neutral-100 dark:bg-neutral-800': isCoopSection,
|
||||
}">
|
||||
Co-Op in 6 Months
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/budget"
|
||||
<NuxtLink
|
||||
to="/wizards"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/budget' }"
|
||||
>
|
||||
Budget
|
||||
:class="{
|
||||
'bg-neutral-100 dark:bg-neutral-800':
|
||||
$route.path === '/wizards',
|
||||
}">
|
||||
Wizards
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/scenarios"
|
||||
<UButton
|
||||
color="gray"
|
||||
variant="ghost"
|
||||
disabled
|
||||
class="px-3 py-2 text-sm text-black dark:text-white rounded-md opacity-60 cursor-not-allowed">
|
||||
Downloads
|
||||
</UButton>
|
||||
</nav>
|
||||
<nav
|
||||
v-if="isCoopSection"
|
||||
class="mt-2 flex items-center justify-center gap-1"
|
||||
role="navigation"
|
||||
aria-label="Co-Op in 6 Months sub navigation">
|
||||
<NuxtLink
|
||||
v-for="item in coopMenu[0]"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/scenarios' }"
|
||||
>
|
||||
Scenarios
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/cash"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/cash' }"
|
||||
>
|
||||
Cash
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/glossary"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path === '/glossary' }"
|
||||
>
|
||||
Glossary
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/templates"
|
||||
class="px-3 py-2 text-sm text-black dark:text-white hover:bg-neutral-100 dark:hover:bg-neutral-800 rounded-md transition-colors"
|
||||
:class="{ 'bg-neutral-100 dark:bg-neutral-800': $route.path.startsWith('/templates') }"
|
||||
>
|
||||
Templates
|
||||
:class="{
|
||||
'bg-neutral-100 dark:bg-neutral-800':
|
||||
route.path === item.to,
|
||||
}">
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</nav>
|
||||
</div>
|
||||
<ColorModeToggle />
|
||||
</header>
|
||||
</header>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NuxtPage />
|
||||
</UContainer>
|
||||
</template>
|
||||
<template v-else>
|
||||
<NuxtPage />
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
</NuxtLayout>
|
||||
<NuxtRouteAnnouncer />
|
||||
</div>
|
||||
</UApp>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// noop
|
||||
const coopMenu = [
|
||||
[
|
||||
{ label: "Dashboard", to: "/" },
|
||||
{ label: "Revenue Mix", to: "/mix" },
|
||||
{ label: "Budget", to: "/budget" },
|
||||
{ label: "Scenarios", to: "/scenarios" },
|
||||
{ label: "Cash", to: "/cash" },
|
||||
{ label: "Glossary", to: "/glossary" },
|
||||
],
|
||||
];
|
||||
|
||||
const route = useRoute();
|
||||
const isCoopSection = computed(() => route.path === "/coop-planner");
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,4 +7,21 @@
|
|||
html { @apply bg-white text-neutral-900; }
|
||||
html.dark { @apply bg-neutral-950 text-neutral-100; }
|
||||
|
||||
}
|
||||
|
||||
/* Disable all animations, transitions, and smooth scrolling app-wide */
|
||||
html,
|
||||
body {
|
||||
scroll-behavior: auto !important;
|
||||
}
|
||||
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
.document-page {
|
||||
@apply max-w-4xl mx-auto bg-white relative p-8 border-1 border-neutral-900 dark:border-neutral-100;
|
||||
}
|
||||
|
|
@ -1,9 +1,21 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black mb-4">
|
||||
Where does your money go?
|
||||
</h3>
|
||||
<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 does your money go?
|
||||
</h3>
|
||||
<p class="text-neutral-600">
|
||||
Add costs like rent, tools, insurance, or other recurring expenses.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton variant="outline" color="gray" size="sm" @click="exportCosts">
|
||||
<UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
|
||||
Export
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Overhead Costs -->
|
||||
|
|
@ -31,7 +43,7 @@
|
|||
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 overhead costs yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add costs like rent, tools, insurance, or other recurring expenses.
|
||||
Get started by adding your first overhead cost.
|
||||
</p>
|
||||
<UButton
|
||||
@click="addOverheadCost"
|
||||
|
|
@ -202,4 +214,24 @@ function addOverheadCost() {
|
|||
function removeCost(id: string) {
|
||||
budgetStore.removeOverheadLine(id);
|
||||
}
|
||||
|
||||
function exportCosts() {
|
||||
const exportData = {
|
||||
overheadCosts: overheadCosts.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
section: "costs",
|
||||
};
|
||||
|
||||
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-costs-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,23 @@
|
|||
<template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-black text-black">Who's on your team?</h3>
|
||||
<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">Who's on your team?</h3>
|
||||
<p class="text-neutral-600">
|
||||
Add everyone who'll be working in the co-op, even if they're not ready
|
||||
to be paid yet.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="gray"
|
||||
size="sm"
|
||||
@click="exportMembers">
|
||||
<UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
|
||||
Export
|
||||
</UButton>
|
||||
<UButton
|
||||
v-if="members.length > 0"
|
||||
@click="addMember"
|
||||
|
|
@ -26,8 +41,7 @@
|
|||
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 team members yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add everyone who'll be working in the co-op, even if they're not ready
|
||||
to be paid yet.
|
||||
Get started by adding your first team member.
|
||||
</p>
|
||||
<UButton @click="addMember" size="lg" variant="solid" color="primary">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
|
|
@ -218,4 +232,24 @@ function addMember() {
|
|||
function removeMember(id: string) {
|
||||
membersStore.removeMember(id);
|
||||
}
|
||||
|
||||
function exportMembers() {
|
||||
const exportData = {
|
||||
members: members.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
section: "members",
|
||||
};
|
||||
|
||||
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-members-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,25 @@
|
|||
<template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black mb-6">
|
||||
What's your equal hourly wage?
|
||||
</h3>
|
||||
<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">
|
||||
|
|
@ -101,4 +117,32 @@ onMounted(() => {
|
|||
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>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,24 @@
|
|||
<template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-black text-black">
|
||||
<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"
|
||||
|
|
@ -29,7 +43,7 @@
|
|||
No revenue streams yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add sources like client work, grants, product sales, or donations.
|
||||
Get started by adding your first revenue source.
|
||||
</p>
|
||||
<UButton
|
||||
@click="addRevenueStream"
|
||||
|
|
@ -247,4 +261,24 @@ function addRevenueStream() {
|
|||
function removeStream(id: string) {
|
||||
streamsStore.removeStream(id);
|
||||
}
|
||||
|
||||
function exportStreams() {
|
||||
const exportData = {
|
||||
streams: streams.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
section: "revenue",
|
||||
};
|
||||
|
||||
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-revenue-${new Date().toISOString().split("T")[0]}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,20 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div>
|
||||
<h3 class="text-lg font-medium mb-4">Review & Complete</h3>
|
||||
<p class="text-neutral-600 mb-6">
|
||||
Review your setup and complete the wizard to start using your co-op
|
||||
tool.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
|
@ -284,9 +293,6 @@
|
|||
</UButton>
|
||||
|
||||
<div class="flex gap-3">
|
||||
<UButton variant="outline" color="gray" @click="exportSetup">
|
||||
Export Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="completeSetup"
|
||||
:disabled="!canComplete"
|
||||
|
|
|
|||
101
components/WizardSubnav.vue
Normal file
101
components/WizardSubnav.vue
Normal file
|
|
@ -0,0 +1,101 @@
|
|||
<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 -->
|
||||
<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="
|
||||
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" />
|
||||
{{ 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>
|
||||
</template>
|
||||
|
||||
<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",
|
||||
path: "/templates/decision-framework",
|
||||
},
|
||||
];
|
||||
|
||||
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>
|
||||
|
|
@ -1,6 +1,11 @@
|
|||
export default defineNuxtRouteMiddleware((to) => {
|
||||
// Skip middleware for wizard, templates, and API routes
|
||||
if (to.path === "/wizard" || to.path.startsWith("/templates") || to.path.startsWith("/api/")) {
|
||||
// Skip middleware for coop-planner, wizards, templates, and API routes
|
||||
if (
|
||||
to.path === "/coop-planner" ||
|
||||
to.path === "/wizards" ||
|
||||
to.path.startsWith("/templates") ||
|
||||
to.path.startsWith("/api/")
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -15,6 +20,6 @@ export default defineNuxtRouteMiddleware((to) => {
|
|||
streamsStore.hasValidStreams;
|
||||
|
||||
if (!setupComplete) {
|
||||
return navigateTo("/wizard");
|
||||
return navigateTo("/coop-planner");
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -25,11 +25,17 @@ export default defineNuxtConfig({
|
|||
|
||||
modules: ["@pinia/nuxt", "@nuxtjs/color-mode", "@nuxt/ui"],
|
||||
|
||||
// Redirect old Templates landing to Wizards (keep detail routes working)
|
||||
routeRules: {
|
||||
"/templates": { redirect: { to: "/wizards", statusCode: 301 } },
|
||||
"/wizard": { redirect: { to: "/coop-planner", statusCode: 301 } },
|
||||
},
|
||||
|
||||
colorMode: {
|
||||
preference: 'system',
|
||||
fallback: 'light',
|
||||
classSuffix: '',
|
||||
dataValue: 'dark'
|
||||
preference: "system",
|
||||
fallback: "light",
|
||||
classSuffix: "",
|
||||
dataValue: "dark",
|
||||
},
|
||||
|
||||
// Google Fonts
|
||||
|
|
|
|||
8
pages/coop-planner.vue
Normal file
8
pages/coop-planner.vue
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<template>
|
||||
<WizardPage />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Reuse the existing wizard content by importing it as a component
|
||||
import WizardPage from "~/pages/wizard.vue";
|
||||
</script>
|
||||
|
|
@ -562,8 +562,8 @@ async function restartWizard() {
|
|||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
isResetting.value = false;
|
||||
|
||||
// Navigate to wizard
|
||||
await navigateTo("/wizard");
|
||||
// Navigate to coop planner
|
||||
await navigateTo("/coop-planner");
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -1,366 +1,387 @@
|
|||
<template>
|
||||
<div
|
||||
class="min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8 px-4"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
<div class="max-w-4xl mx-auto relative">
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 border border-black dark:border-white decision-framework-container">
|
||||
<!-- Header -->
|
||||
<div>
|
||||
<!-- Wizard Subnav -->
|
||||
<WizardSubnav />
|
||||
|
||||
<div
|
||||
class="template-wrapper bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
<!-- Spacer for consistency -->
|
||||
<div class="py-4"></div>
|
||||
|
||||
<div class="max-w-4xl mx-auto relative px-4">
|
||||
<div
|
||||
class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
|
||||
<!-- Dithered shadow background -->
|
||||
class="bg-white dark:bg-neutral-950 border-2 border-neutral-900 dark:border-neutral-100 decision-framework-container">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"></div>
|
||||
class="bg-black dark:bg-white text-white dark:text-black px-8 py-12 text-center header-section">
|
||||
<!-- Dithered shadow background -->
|
||||
<div
|
||||
class="absolute top-4 left-4 right-0 bottom-0 dither-shadow-header"></div>
|
||||
|
||||
<div
|
||||
class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border border-white dark:border-black">
|
||||
<h1
|
||||
class="text-3xl font-bold mb-2 uppercase"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Decision Framework Helper
|
||||
</h1>
|
||||
<p class="text-lg" style="font-family: 'Ubuntu', monospace">
|
||||
Find the right way to decide together
|
||||
</p>
|
||||
<div
|
||||
class="relative bg-black dark:bg-white text-white dark:text-black px-4 py-4 border-2 border-neutral-100 dark:border-neutral-900">
|
||||
<h1
|
||||
class="text-3xl font-bold mb-2 uppercase"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Decision Framework Helper
|
||||
</h1>
|
||||
<p class="text-lg" style="font-family: 'Ubuntu', monospace">
|
||||
Find the right way to decide together
|
||||
</p>
|
||||
|
||||
<!-- Progress Bar -->
|
||||
<div v-if="!showResult" class="mt-8">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>Step {{ currentStep }} of {{ totalSteps }}</span
|
||||
>
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>{{ Math.round((currentStep / totalSteps) * 100) }}%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="w-full bg-white dark:bg-black h-2 border border-white dark:border-black">
|
||||
<!-- Progress Bar -->
|
||||
<div v-if="!showResult" class="mt-8">
|
||||
<div class="flex justify-between items-center mb-2">
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>Step {{ currentStep }} of {{ totalSteps }}</span
|
||||
>
|
||||
<span
|
||||
class="text-sm"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>{{ Math.round((currentStep / totalSteps) * 100) }}%</span
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
|
||||
:style="{
|
||||
width: (currentStep / totalSteps) * 100 + '%',
|
||||
}"></div>
|
||||
class="w-full bg-white dark:bg-black h-2 border-2 border-neutral-100 dark:border-neutral-900">
|
||||
<div
|
||||
class="bg-black dark:bg-white h-full transition-all duration-300 progress-dither"
|
||||
:style="{
|
||||
width: (currentStep / totalSteps) * 100 + '%',
|
||||
}"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="px-8 py-12">
|
||||
<!-- Step Content -->
|
||||
<div v-if="!showResult" class="min-h-[400px]">
|
||||
<!-- Question 1: Urgency -->
|
||||
<div v-if="currentStep === 1">
|
||||
<div
|
||||
class="font-semibold text-black dark:text-white mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How urgent is this decision?
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 p-8 border border-black dark:border-white relative">
|
||||
<!-- Dithered shadow background -->
|
||||
<!-- Content -->
|
||||
<div class="px-8 py-12">
|
||||
<!-- Step Content -->
|
||||
<div v-if="!showResult" class="min-h-[400px]">
|
||||
<!-- Question 1: Urgency -->
|
||||
<div v-if="currentStep === 1">
|
||||
<div
|
||||
class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
|
||||
class="font-semibold text-black dark:text-white mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How urgent is this decision?
|
||||
</div>
|
||||
<div
|
||||
class="bg-white dark:bg-neutral-950 p-8 border-2 border-neutral-900 dark:border-neutral-100 relative">
|
||||
<!-- Dithered shadow background -->
|
||||
<div
|
||||
class="absolute top-2 left-2 right-0 bottom-0 dither-shadow"></div>
|
||||
|
||||
<div class="relative">
|
||||
<div class="flex justify-between mb-6 text-sm">
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>WE HAVE PLENTY OF TIME</span
|
||||
>
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>NEEDED YESTERDAY</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="range"
|
||||
v-model="state.urgency"
|
||||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
|
||||
<div
|
||||
class="flex justify-between mt-4 text-sm text-black dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
<div class="flex justify-between mb-6 text-sm">
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>WE HAVE PLENTY OF TIME</span
|
||||
>
|
||||
<span
|
||||
class="text-black dark:text-white font-bold"
|
||||
style="font-family: 'Ubuntu Mono', monospace"
|
||||
>NEEDED YESTERDAY</span
|
||||
>
|
||||
</div>
|
||||
<div class="relative">
|
||||
<input
|
||||
type="range"
|
||||
v-model="state.urgency"
|
||||
min="1"
|
||||
max="5"
|
||||
step="1"
|
||||
class="w-full h-2 bg-white dark:bg-black appearance-none cursor-pointer slider" />
|
||||
<div
|
||||
class="flex justify-between mt-4 text-sm text-black dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
<span>1</span>
|
||||
<span>2</span>
|
||||
<span>3</span>
|
||||
<span>4</span>
|
||||
<span>5</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 2: Reversibility -->
|
||||
<div v-if="currentStep === 2">
|
||||
<!-- Question 2: Reversibility -->
|
||||
<div v-if="currentStep === 2">
|
||||
<div
|
||||
class="font-semibold text-black mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Can we change our minds later?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in reversibilityOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.reversible === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('reversible', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3: Expertise -->
|
||||
<div v-if="currentStep === 3">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who has the most relevant expertise?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in expertiseOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.expertise === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('expertise', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 4: Impact -->
|
||||
<div v-if="currentStep === 4">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who will this impact?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in impactOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.impact === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('impact', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 5: Options clarity -->
|
||||
<div v-if="currentStep === 5">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How well-defined are the options?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in optionsOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.options === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('options', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 6: Investment -->
|
||||
<div v-if="currentStep === 6">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How invested is everyone?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in investmentOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.investment === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('investment', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">
|
||||
{{ option.description }}
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 7: Team size -->
|
||||
<div v-if="currentStep === 7">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How many people need to participate?
|
||||
</div>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
<button
|
||||
v-for="size in teamSizes"
|
||||
:key="size"
|
||||
:class="[
|
||||
'px-4 py-3 font-semibold text-sm rounded-md border-2 transition-all duration-200',
|
||||
state.teamSize === size
|
||||
? 'bg-violet-700 text-white border-violet-700'
|
||||
: 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('teamSize', size)">
|
||||
{{ size }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div
|
||||
class="font-semibold text-black mb-6 text-2xl"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Can we change our minds later?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in reversibilityOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.reversible === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('reversible', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 3: Expertise -->
|
||||
<div v-if="currentStep === 3">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who has the most relevant expertise?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in expertiseOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.expertise === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('expertise', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 4: Impact -->
|
||||
<div v-if="currentStep === 4">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
Who will this impact?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in impactOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.impact === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('impact', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 5: Options clarity -->
|
||||
<div v-if="currentStep === 5">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How well-defined are the options?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in optionsOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.options === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('options', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 6: Investment -->
|
||||
<div v-if="currentStep === 6">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How invested is everyone?
|
||||
</div>
|
||||
<div class="grid gap-4">
|
||||
<UCard
|
||||
v-for="option in investmentOptions"
|
||||
:key="option.value"
|
||||
:class="[
|
||||
'cursor-pointer transition-all duration-200 border-2',
|
||||
state.investment === option.value
|
||||
? 'border-violet-700 bg-violet-700 text-white'
|
||||
: 'border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('investment', option.value)">
|
||||
<div class="font-semibold mb-1">{{ option.title }}</div>
|
||||
<div class="text-sm opacity-85">{{ option.description }}</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Question 7: Team size -->
|
||||
<div v-if="currentStep === 7">
|
||||
<div class="font-semibold text-neutral-900 mb-6 text-2xl">
|
||||
How many people need to participate?
|
||||
</div>
|
||||
<div class="grid grid-cols-3 sm:grid-cols-5 gap-4">
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t-2 border-neutral-200">
|
||||
<button
|
||||
v-for="size in teamSizes"
|
||||
:key="size"
|
||||
:class="[
|
||||
'px-4 py-3 font-semibold text-sm rounded-md border-2 transition-all duration-200',
|
||||
state.teamSize === size
|
||||
? 'bg-violet-700 text-white border-violet-700'
|
||||
: 'bg-white text-neutral-700 border-neutral-200 hover:border-violet-700 hover:bg-violet-50',
|
||||
]"
|
||||
@click="selectOption('teamSize', size)">
|
||||
{{ size }}
|
||||
v-if="currentStep > 1"
|
||||
@click="previousStep"
|
||||
class="px-6 py-3 text-violet-700 border-2 border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
|
||||
← Previous
|
||||
</button>
|
||||
<div v-else></div>
|
||||
|
||||
<button
|
||||
v-if="canProceed && currentStep < totalSteps"
|
||||
@click="nextStep"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Next →
|
||||
</button>
|
||||
<button
|
||||
v-else-if="canProceed && currentStep === totalSteps"
|
||||
@click="showRecommendation"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Get Recommendation
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<!-- Results -->
|
||||
<div
|
||||
class="flex justify-between items-center mt-12 pt-8 border-t border-neutral-200">
|
||||
<button
|
||||
v-if="currentStep > 1"
|
||||
@click="previousStep"
|
||||
class="px-6 py-3 text-violet-700 border border-violet-700 rounded-md hover:bg-violet-50 transition-all duration-200">
|
||||
← Previous
|
||||
</button>
|
||||
<div v-else></div>
|
||||
v-if="showResult"
|
||||
data-results
|
||||
class="border-t-2 border-neutral-200 pt-12">
|
||||
<UCard class="bg-neutral-50">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-semibold text-violet-700 mb-2">
|
||||
{{ result.method }}
|
||||
</h2>
|
||||
<p class="text-lg text-neutral-600">{{ result.tagline }}</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="canProceed && currentStep < totalSteps"
|
||||
@click="nextStep"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Next →
|
||||
</button>
|
||||
<button
|
||||
v-else-if="canProceed && currentStep === totalSteps"
|
||||
@click="showRecommendation"
|
||||
class="px-6 py-3 bg-violet-700 text-white rounded-md hover:bg-violet-800 transition-all duration-200">
|
||||
Get Recommendation
|
||||
</button>
|
||||
<UCard class="bg-white mb-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Why this framework?
|
||||
</h3>
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
{{ result.reasoning }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
How to implement:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="step in result.steps"
|
||||
:key="step"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ step }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="result.tips">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Pro tips:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="tip in result.tips"
|
||||
:key="tip"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ tip }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UAlert
|
||||
v-if="result.warning"
|
||||
color="red"
|
||||
variant="soft"
|
||||
:title="'Watch out for:'"
|
||||
:description="result.warning"
|
||||
class="mb-6" />
|
||||
|
||||
<UAlert
|
||||
v-if="result.success"
|
||||
color="emerald"
|
||||
variant="soft"
|
||||
:title="'Success looks like:'"
|
||||
:description="result.success"
|
||||
class="mb-6" />
|
||||
|
||||
<UCard v-if="result.alternatives" class="bg-neutral-50">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Also consider:
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<UCard
|
||||
v-for="alt in result.alternatives"
|
||||
:key="alt.method"
|
||||
class="bg-white">
|
||||
<span class="font-semibold">{{ alt.method }}:</span>
|
||||
{{ alt.when }}
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<UButton @click="resetForm" color="violet">
|
||||
Try Another Decision
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="printResult"
|
||||
variant="outline"
|
||||
color="violet">
|
||||
Print Recommendation
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results -->
|
||||
<div
|
||||
v-if="showResult"
|
||||
data-results
|
||||
class="border-t border-neutral-200 pt-12">
|
||||
<UCard class="bg-neutral-50">
|
||||
<div class="mb-8">
|
||||
<h2 class="text-2xl font-semibold text-violet-700 mb-2">
|
||||
{{ result.method }}
|
||||
</h2>
|
||||
<p class="text-lg text-neutral-600">{{ result.tagline }}</p>
|
||||
</div>
|
||||
|
||||
<UCard class="bg-white mb-8">
|
||||
<div class="space-y-8">
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Why this framework?
|
||||
</h3>
|
||||
<p class="text-neutral-700 leading-relaxed">
|
||||
{{ result.reasoning }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
How to implement:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="step in result.steps"
|
||||
:key="step"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ step }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="result.tips">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Pro tips:
|
||||
</h3>
|
||||
<ul class="space-y-3">
|
||||
<li
|
||||
v-for="tip in result.tips"
|
||||
:key="tip"
|
||||
class="flex items-start">
|
||||
<span class="text-violet-700 font-bold mr-3 mt-1"
|
||||
>→</span
|
||||
>
|
||||
<span class="text-neutral-700">{{ tip }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UAlert
|
||||
v-if="result.warning"
|
||||
color="red"
|
||||
variant="soft"
|
||||
:title="'Watch out for:'"
|
||||
:description="result.warning"
|
||||
class="mb-6" />
|
||||
|
||||
<UAlert
|
||||
v-if="result.success"
|
||||
color="emerald"
|
||||
variant="soft"
|
||||
:title="'Success looks like:'"
|
||||
:description="result.success"
|
||||
class="mb-6" />
|
||||
|
||||
<UCard v-if="result.alternatives" class="bg-neutral-50">
|
||||
<h3 class="font-semibold text-neutral-900 mb-4 text-lg">
|
||||
Also consider:
|
||||
</h3>
|
||||
<div class="space-y-3">
|
||||
<UCard
|
||||
v-for="alt in result.alternatives"
|
||||
:key="alt.method"
|
||||
class="bg-white">
|
||||
<span class="font-semibold">{{ alt.method }}:</span>
|
||||
{{ alt.when }}
|
||||
</UCard>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<div class="flex gap-4 mt-8">
|
||||
<UButton @click="resetForm" color="violet">
|
||||
Try Another Decision
|
||||
</UButton>
|
||||
<UButton @click="printResult" variant="outline" color="violet">
|
||||
Print Recommendation
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
513
pages/wizard.vue
513
pages/wizard.vue
|
|
@ -1,269 +1,278 @@
|
|||
<template>
|
||||
<section class="py-8 max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-10">
|
||||
<h1 class="text-5xl font-black text-black mb-4 leading-tight">
|
||||
Set up your co-op
|
||||
</h1>
|
||||
<p class="text-xl text-neutral-700 font-medium">
|
||||
Get your worker-owned co-op configured in a few simple steps. Jump to
|
||||
any step or work through them in order.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<!-- Wizard Subnav -->
|
||||
<WizardSubnav />
|
||||
|
||||
<!-- Completed State -->
|
||||
<div v-if="isCompleted" class="text-center py-12">
|
||||
<div
|
||||
class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
|
||||
<section class="py-8 max-w-4xl mx-auto">
|
||||
<!-- Header -->
|
||||
<div class="mb-10">
|
||||
<h1 class="text-5xl font-black text-black mb-4 leading-tight">
|
||||
Set up your co-op
|
||||
</h1>
|
||||
<p class="text-xl text-neutral-700 font-medium">
|
||||
Get your worker-owned co-op configured in a few simple steps. Jump to
|
||||
any step or work through them in order.
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-black mb-2">You're all set!</h2>
|
||||
<p class="text-neutral-600 mb-6">
|
||||
Your co-op is configured and ready to go.
|
||||
</p>
|
||||
|
||||
<div class="flex justify-center gap-4">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="gray"
|
||||
@click="restartWizard"
|
||||
:disabled="isResetting">
|
||||
Start Over
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="navigateTo('/scenarios')"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="black">
|
||||
Go to Dashboard
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vertical Steps Layout -->
|
||||
<div v-else class="space-y-4">
|
||||
<!-- Step 1: Members -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<!-- Completed State -->
|
||||
<div v-if="isCompleted" class="text-center py-12">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-yellow-50 transition-colors"
|
||||
:class="{ 'bg-yellow-100': focusedStep === 1 }"
|
||||
@click="setFocusedStep(1)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
membersStore.isValid
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="membersStore.isValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Add your team</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 1 }" />
|
||||
</div>
|
||||
class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<UIcon name="i-heroicons-check" class="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-black mb-2">You're all set!</h2>
|
||||
<p class="text-neutral-600 mb-6">
|
||||
Your co-op is configured and ready to go.
|
||||
</p>
|
||||
|
||||
<div v-if="focusedStep === 1" class="p-8 bg-yellow-25">
|
||||
<WizardMembersStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Wage -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-green-50 transition-colors"
|
||||
:class="{ 'bg-green-100': focusedStep === 2 }"
|
||||
@click="setFocusedStep(2)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
policiesStore.isValid
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="policiesStore.isValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Set your wage</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 2 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 2" class="p-8 bg-green-25">
|
||||
<WizardPoliciesStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Costs -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-blue-50 transition-colors"
|
||||
:class="{ 'bg-blue-100': focusedStep === 3 }"
|
||||
@click="setFocusedStep(3)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-green-100 text-green-700 flex items-center justify-center text-sm font-bold">
|
||||
<UIcon name="i-heroicons-check" class="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Monthly costs</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 3 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 3" class="p-8 bg-blue-25">
|
||||
<WizardCostsStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Revenue -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-purple-50 transition-colors"
|
||||
:class="{ 'bg-purple-100': focusedStep === 4 }"
|
||||
@click="setFocusedStep(4)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
streamsStore.hasValidStreams
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="streamsStore.hasValidStreams"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Revenue streams</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 4 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 4" class="p-8 bg-purple-25">
|
||||
<WizardRevenueStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5: Review -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-orange-50 transition-colors"
|
||||
:class="{ 'bg-orange-100': focusedStep === 5 }"
|
||||
@click="setFocusedStep(5)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
canComplete
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="canComplete"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Review & finish</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 5 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 5" class="p-8 bg-orange-25">
|
||||
<WizardReviewStep @complete="completeWizard" @reset="resetWizard" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Actions -->
|
||||
<div class="flex justify-between items-center pt-8">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="red"
|
||||
@click="resetWizard"
|
||||
:disabled="isResetting">
|
||||
Start Over
|
||||
</UButton>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Save status -->
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<UIcon
|
||||
v-if="saveStatus === 'saving'"
|
||||
name="i-heroicons-arrow-path"
|
||||
class="w-4 h-4 animate-spin text-neutral-500" />
|
||||
<UIcon
|
||||
v-if="saveStatus === 'saved'"
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-4 h-4 text-green-500" />
|
||||
<span v-if="saveStatus === 'saving'" class="text-neutral-500"
|
||||
>Saving...</span
|
||||
>
|
||||
<span v-if="saveStatus === 'saved'" class="text-green-600"
|
||||
>Saved</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center gap-4">
|
||||
<UButton
|
||||
v-if="canComplete"
|
||||
@click="completeWizard"
|
||||
variant="outline"
|
||||
color="gray"
|
||||
@click="restartWizard"
|
||||
:disabled="isResetting">
|
||||
Start Over
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="navigateTo('/scenarios')"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="black">
|
||||
Complete Setup
|
||||
Go to Dashboard
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Vertical Steps Layout -->
|
||||
<div v-else class="space-y-4">
|
||||
<!-- Step 1: Members -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-yellow-50 transition-colors"
|
||||
:class="{ 'bg-yellow-100': focusedStep === 1 }"
|
||||
@click="setFocusedStep(1)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
membersStore.isValid
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="membersStore.isValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>1</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Add your team</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 1 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 1" class="p-8 bg-yellow-25">
|
||||
<WizardMembersStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Wage -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-green-50 transition-colors"
|
||||
:class="{ 'bg-green-100': focusedStep === 2 }"
|
||||
@click="setFocusedStep(2)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
policiesStore.isValid
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="policiesStore.isValid"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>2</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Set your wage</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 2 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 2" class="p-8 bg-green-25">
|
||||
<WizardPoliciesStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Costs -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-blue-50 transition-colors"
|
||||
:class="{ 'bg-blue-100': focusedStep === 3 }"
|
||||
@click="setFocusedStep(3)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-green-100 text-green-700 flex items-center justify-center text-sm font-bold">
|
||||
<UIcon name="i-heroicons-check" class="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">Monthly costs</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 3 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 3" class="p-8 bg-blue-25">
|
||||
<WizardCostsStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Revenue -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-purple-50 transition-colors"
|
||||
:class="{ 'bg-purple-100': focusedStep === 4 }"
|
||||
@click="setFocusedStep(4)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
streamsStore.hasValidStreams
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="streamsStore.hasValidStreams"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>4</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">
|
||||
Revenue streams
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 4 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 4" class="p-8 bg-purple-25">
|
||||
<WizardRevenueStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 5: Review -->
|
||||
<div
|
||||
class="bg-white border-4 border-black rounded-xl overflow-hidden shadow-lg">
|
||||
<div
|
||||
class="p-8 cursor-pointer hover:bg-orange-50 transition-colors"
|
||||
:class="{ 'bg-orange-100': focusedStep === 5 }"
|
||||
@click="setFocusedStep(5)">
|
||||
<div class="flex items-center justify-between">
|
||||
<div class="flex items-center gap-3">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold"
|
||||
:class="
|
||||
canComplete
|
||||
? 'bg-green-100 text-green-700'
|
||||
: 'bg-white text-black border-2 border-black'
|
||||
">
|
||||
<UIcon
|
||||
v-if="canComplete"
|
||||
name="i-heroicons-check"
|
||||
class="w-4 h-4" />
|
||||
<span v-else>5</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black">
|
||||
Review & finish
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
<UIcon
|
||||
name="i-heroicons-chevron-down"
|
||||
class="w-6 h-6 text-black transition-transform font-bold"
|
||||
:class="{ 'rotate-180': focusedStep === 5 }" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="focusedStep === 5" class="p-8 bg-orange-25">
|
||||
<WizardReviewStep @complete="completeWizard" @reset="resetWizard" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Progress Actions -->
|
||||
<div class="flex justify-between items-center pt-8">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="red"
|
||||
@click="resetWizard"
|
||||
:disabled="isResetting">
|
||||
Start Over
|
||||
</UButton>
|
||||
|
||||
<div class="flex items-center gap-4">
|
||||
<!-- Save status -->
|
||||
<div class="flex items-center gap-2 text-sm">
|
||||
<UIcon
|
||||
v-if="saveStatus === 'saving'"
|
||||
name="i-heroicons-arrow-path"
|
||||
class="w-4 h-4 animate-spin text-neutral-500" />
|
||||
<UIcon
|
||||
v-if="saveStatus === 'saved'"
|
||||
name="i-heroicons-check-circle"
|
||||
class="w-4 h-4 text-green-500" />
|
||||
<span v-if="saveStatus === 'saving'" class="text-neutral-500"
|
||||
>Saving...</span
|
||||
>
|
||||
<span v-if="saveStatus === 'saved'" class="text-green-600"
|
||||
>Saved</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="canComplete"
|
||||
@click="completeWizard"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="black">
|
||||
Complete Setup
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
|
|||
339
pages/wizards.vue
Normal file
339
pages/wizards.vue
Normal file
|
|
@ -0,0 +1,339 @@
|
|||
<template>
|
||||
<div>
|
||||
<!-- Wizard Subnav -->
|
||||
<WizardSubnav />
|
||||
|
||||
<div
|
||||
class="template-container min-h-screen bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-100 py-8"
|
||||
style="font-family: 'Ubuntu', 'Ubuntu Mono', monospace">
|
||||
<div class="max-w-6xl mx-auto px-4 relative">
|
||||
<div class="mb-8">
|
||||
<h1
|
||||
class="text-3xl font-bold text-neutral-900 dark:text-white mb-2"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
Wizards
|
||||
</h1>
|
||||
<p class="text-neutral-700 dark:text-neutral-200">
|
||||
Fillable forms for cooperative documents. Data saves locally in your
|
||||
browser.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<div
|
||||
v-for="template in templates"
|
||||
:key="template.id"
|
||||
class="template-card h-full flex flex-col">
|
||||
<div
|
||||
class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6 h-full flex flex-col">
|
||||
<div class="mb-4">
|
||||
<h3
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white">
|
||||
{{ template.name }}
|
||||
</h3>
|
||||
</div>
|
||||
<p class="text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
{{ template.description }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2 mb-4">
|
||||
<span
|
||||
v-for="tag in template.tags"
|
||||
:key="tag"
|
||||
class="px-2 py-1 text-xs font-medium bg-white dark:bg-neutral-950 text-neutral-900 dark:text-neutral-900 border border-black dark:border-white dither-tag">
|
||||
{{ tag }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-sm text-neutral-700 dark:text-neutral-200 mb-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<span>{{ template.estimatedTime }}</span>
|
||||
<span>{{ template.fields }} fields</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1"></div>
|
||||
<div class="flex gap-2 mt-auto">
|
||||
<NuxtLink
|
||||
:to="template.path"
|
||||
class="flex-1 px-4 py-2 bg-black dark:bg-white text-white dark:text-black text-center font-medium tracking-wider hover:underline"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
START WIZARD
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
v-if="hasData(template.id)"
|
||||
:to="template.path"
|
||||
class="px-4 py-2 bg-white dark:bg-neutral-950 text-black dark:text-white border border-black dark:border-white hover:bg-white dark:hover:bg-neutral-950 transition-colors bitmap-button"
|
||||
title="Continue from saved data"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
RESUME
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-12 help-section">
|
||||
<div class="absolute top-2 left-2 w-full h-full dither-shadow"></div>
|
||||
<div
|
||||
class="relative bg-white dark:bg-neutral-950 border border-black dark:border-white p-6">
|
||||
<h2
|
||||
class="text-xl font-semibold text-neutral-900 dark:text-white mb-3"
|
||||
style="font-family: 'Ubuntu', monospace">
|
||||
How Wizards Work
|
||||
</h2>
|
||||
<div
|
||||
class="grid md:grid-cols-2 gap-6 text-neutral-900 dark:text-neutral-100">
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
FILL OUT FORMS
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Wizards include form fields for all necessary information.
|
||||
Data auto-saves as you type.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
LOCAL STORAGE
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
All data saves in your browser only. Nothing is sent to
|
||||
external servers.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
EXPORT OPTIONS
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Download as PDF (print), plain text, Markdown, or Word
|
||||
document.
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<h3
|
||||
class="font-medium mb-2 text-neutral-900 dark:text-white"
|
||||
style="font-family: 'Ubuntu Mono', monospace">
|
||||
RESUME ANYTIME
|
||||
</h3>
|
||||
<p class="text-sm text-neutral-700 dark:text-neutral-200">
|
||||
Come back later and your progress will be saved. Clear browser
|
||||
data to start fresh.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from "vue";
|
||||
|
||||
const templates = [
|
||||
{
|
||||
id: "membership-agreement",
|
||||
name: "Membership Agreement",
|
||||
description:
|
||||
"A comprehensive agreement outlining member rights, responsibilities, decision-making processes, and financial arrangements for worker cooperatives.",
|
||||
icon: "i-heroicons-user-group",
|
||||
path: "/templates/membership-agreement",
|
||||
tags: ["Legal", "Governance", "Membership"],
|
||||
estimatedTime: "15-30 min",
|
||||
fields: 25,
|
||||
storageKey: "membership-agreement-data",
|
||||
},
|
||||
{
|
||||
id: "conflict-resolution-framework",
|
||||
name: "Conflict Resolution Framework",
|
||||
description:
|
||||
"A customizable framework for handling conflicts with restorative justice principles, clear processes, and organizational values alignment.",
|
||||
icon: "i-heroicons-scale",
|
||||
path: "/templates/conflict-resolution-framework",
|
||||
tags: ["Governance", "Process", "Care"],
|
||||
estimatedTime: "20-40 min",
|
||||
fields: 35,
|
||||
storageKey: "conflict-resolution-framework-data",
|
||||
},
|
||||
{
|
||||
id: "tech-charter",
|
||||
name: "Technology Charter",
|
||||
description:
|
||||
"Build technology decisions on cooperative values. Define principles, technical constraints, and evaluation criteria for vendor selection.",
|
||||
icon: "i-heroicons-cog-6-tooth",
|
||||
path: "/templates/tech-charter",
|
||||
tags: ["Technology", "Decision-Making", "Governance"],
|
||||
estimatedTime: "10-20 min",
|
||||
fields: 20,
|
||||
storageKey: "tech-charter-data",
|
||||
},
|
||||
{
|
||||
id: "decision-framework",
|
||||
name: "Decision Framework Helper",
|
||||
description:
|
||||
"Interactive tool to help determine the best decision-making approach based on urgency, expertise, stakes, and team dynamics.",
|
||||
icon: "i-heroicons-light-bulb",
|
||||
path: "/templates/decision-framework",
|
||||
tags: ["Decision-Making", "Process", "Governance"],
|
||||
estimatedTime: "5-10 min",
|
||||
fields: 7,
|
||||
storageKey: "decision-framework-data",
|
||||
},
|
||||
];
|
||||
|
||||
const hasData = (templateId) => {
|
||||
const template = templates.find((t) => t.id === templateId);
|
||||
if (!template?.storageKey) return false;
|
||||
if (process.client) {
|
||||
const saved = localStorage.getItem(template.storageKey);
|
||||
return saved && saved !== "{}";
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
useHead({
|
||||
title: "Wizards - Co-op Pay & Value Tool",
|
||||
meta: [
|
||||
{
|
||||
name: "description",
|
||||
content:
|
||||
"Interactive wizards for worker cooperatives including membership agreements and governance documents.",
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@import url("https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&family=Ubuntu+Mono:wght@400;700&display=swap");
|
||||
|
||||
.dither-shadow {
|
||||
background: black;
|
||||
background-image: radial-gradient(white 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dither-shadow {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .dither-shadow {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.dither-shadow-disabled {
|
||||
background: black;
|
||||
background-image: radial-gradient(white 1px, transparent 1px);
|
||||
background-size: 2px 2px;
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dither-shadow-disabled {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
}
|
||||
|
||||
:global(.dark) .dither-shadow-disabled {
|
||||
background: white;
|
||||
background-image: radial-gradient(black 1px, transparent 1px);
|
||||
}
|
||||
|
||||
.template-card {
|
||||
@apply relative;
|
||||
font-family: "Ubuntu", monospace;
|
||||
}
|
||||
|
||||
.help-section {
|
||||
@apply relative;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dither-tag {
|
||||
position: relative;
|
||||
background: white;
|
||||
}
|
||||
.dither-tag::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
transparent 0px,
|
||||
transparent 1px,
|
||||
black 1px,
|
||||
black 2px
|
||||
);
|
||||
opacity: 0.1;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.bitmap-button {
|
||||
font-family: "Ubuntu Mono", monospace !important;
|
||||
text-transform: uppercase;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.bitmap-button:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
right: -1px;
|
||||
bottom: -1px;
|
||||
border: 1px solid black;
|
||||
background: white;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.disabled-button {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.template-card > *,
|
||||
.help-section > *,
|
||||
button,
|
||||
.px-4,
|
||||
div[class*="border"] {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
* {
|
||||
border-radius: 0 !important;
|
||||
font-family: "Ubuntu", monospace;
|
||||
}
|
||||
|
||||
html.dark :deep(.text-neutral-700),
|
||||
html.dark :deep(.text-neutral-500),
|
||||
html.dark :deep(.bg-neutral-50),
|
||||
html.dark :deep(.bg-neutral-100) {
|
||||
color: white !important;
|
||||
background-color: #0a0a0a !important;
|
||||
}
|
||||
|
||||
:deep(.border-neutral-200),
|
||||
:deep(.border-neutral-300) {
|
||||
border-color: black !important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue