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
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">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue