feat: add initial application structure with configuration, UI components, and state management
This commit is contained in:
parent
fadf94002c
commit
0af6b17792
56 changed files with 6137 additions and 129 deletions
264
pages/budget.vue
Normal file
264
pages/budget.vue
Normal file
|
|
@ -0,0 +1,264 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Operating Plan</h2>
|
||||
<USelect
|
||||
v-model="selectedMonth"
|
||||
:options="months"
|
||||
placeholder="Select month" />
|
||||
</div>
|
||||
|
||||
<!-- Cash Waterfall Summary -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">
|
||||
Cash Waterfall - {{ selectedMonth }}
|
||||
</h3>
|
||||
</template>
|
||||
<div
|
||||
class="flex items-center justify-between py-4 border-b border-gray-200">
|
||||
<div class="flex items-center gap-8">
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-blue-600">€12,000</div>
|
||||
<div class="text-xs text-gray-600">Gross Revenue</div>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-gray-400" />
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-red-600">-€450</div>
|
||||
<div class="text-xs text-gray-600">Fees</div>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-gray-400" />
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-green-600">€11,550</div>
|
||||
<div class="text-xs text-gray-600">Net Revenue</div>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-gray-400" />
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-blue-600">€300</div>
|
||||
<div class="text-xs text-gray-600">To Savings</div>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-gray-400" />
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-purple-600">€6,400</div>
|
||||
<div class="text-xs text-gray-600">Payroll</div>
|
||||
</div>
|
||||
<UIcon name="i-heroicons-arrow-right" class="text-gray-400" />
|
||||
<div class="text-center">
|
||||
<div class="text-2xl font-bold text-orange-600">€2,300</div>
|
||||
<div class="text-xs text-gray-600">Overhead</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="pt-4">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-lg font-medium">Available for Operations</span>
|
||||
<span class="text-2xl font-bold text-green-600">€2,550</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Monthly Revenue Table -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Revenue by Stream</h3>
|
||||
</template>
|
||||
<UTable :rows="revenueStreams" :columns="revenueColumns">
|
||||
<template #name-data="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-medium">{{ row.name }}</span>
|
||||
<RestrictionChip :restriction="row.restrictions" size="xs" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #target-data="{ row }">
|
||||
<span class="font-medium">€{{ row.target.toLocaleString() }}</span>
|
||||
</template>
|
||||
|
||||
<template #committed-data="{ row }">
|
||||
<span class="font-medium text-green-600"
|
||||
>€{{ row.committed.toLocaleString() }}</span
|
||||
>
|
||||
</template>
|
||||
|
||||
<template #actual-data="{ row }">
|
||||
<span
|
||||
class="font-medium"
|
||||
:class="
|
||||
row.actual >= row.committed ? 'text-green-600' : 'text-orange-600'
|
||||
">
|
||||
€{{ row.actual.toLocaleString() }}
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<template #variance-data="{ row }">
|
||||
<span :class="row.variance >= 0 ? 'text-green-600' : 'text-red-600'">
|
||||
{{ row.variance >= 0 ? "+" : "" }}€{{
|
||||
row.variance.toLocaleString()
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
</UTable>
|
||||
</UCard>
|
||||
|
||||
<!-- Costs Breakdown -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Costs</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<h4 class="font-medium text-sm mb-2">Payroll</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Wages (320h @ €20)</span>
|
||||
<span class="font-medium">€6,400</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">On-costs (25%)</span>
|
||||
<span class="font-medium">€1,600</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between text-sm font-medium border-t pt-2">
|
||||
<span>Total Payroll</span>
|
||||
<span>€8,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-medium text-sm mb-2">Overhead</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Coworking space</span>
|
||||
<span class="font-medium">€800</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Tools & software</span>
|
||||
<span class="font-medium">€400</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Insurance</span>
|
||||
<span class="font-medium">€200</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between text-sm font-medium border-t pt-2">
|
||||
<span>Total Overhead</span>
|
||||
<span>€1,400</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-medium text-sm mb-2">Production</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Dev kits</span>
|
||||
<span class="font-medium">€500</span>
|
||||
</div>
|
||||
<div
|
||||
class="flex justify-between text-sm font-medium border-t pt-2">
|
||||
<span>Total Production</span>
|
||||
<span>€500</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Net Impact on Savings</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Net Revenue</span>
|
||||
<span class="font-medium text-green-600">€11,550</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Total Costs</span>
|
||||
<span class="font-medium text-red-600">-€9,900</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-lg font-bold border-t pt-3">
|
||||
<span>Net</span>
|
||||
<span class="text-green-600">+€1,650</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-3">Allocation</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">To Savings</span>
|
||||
<span class="font-medium">€1,200</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Available</span>
|
||||
<span class="font-medium">€450</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-xs text-gray-600 space-y-1">
|
||||
<p>
|
||||
<RestrictionChip restriction="Restricted" size="xs" /> funds can
|
||||
only be used for approved purposes.
|
||||
</p>
|
||||
<p>
|
||||
<RestrictionChip restriction="General" size="xs" /> funds have no
|
||||
restrictions.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const selectedMonth = ref("2024-01");
|
||||
const months = ref([
|
||||
{ label: "January 2024", value: "2024-01" },
|
||||
{ label: "February 2024", value: "2024-02" },
|
||||
{ label: "March 2024", value: "2024-03" },
|
||||
]);
|
||||
|
||||
const revenueStreams = ref([
|
||||
{
|
||||
id: 1,
|
||||
name: "Client Services",
|
||||
target: 7800,
|
||||
committed: 6500,
|
||||
actual: 7200,
|
||||
variance: 700,
|
||||
restrictions: "General",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Platform Sales",
|
||||
target: 3000,
|
||||
committed: 2000,
|
||||
actual: 2400,
|
||||
variance: 400,
|
||||
restrictions: "General",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Grant Funding",
|
||||
target: 1200,
|
||||
committed: 0,
|
||||
actual: 1400,
|
||||
variance: 1400,
|
||||
restrictions: "Restricted",
|
||||
},
|
||||
]);
|
||||
|
||||
const revenueColumns = [
|
||||
{ id: "name", key: "name", label: "Stream" },
|
||||
{ id: "target", key: "target", label: "Target" },
|
||||
{ id: "committed", key: "committed", label: "Committed" },
|
||||
{ id: "actual", key: "actual", label: "Actual" },
|
||||
{ id: "variance", key: "variance", label: "Variance" },
|
||||
];
|
||||
</script>
|
||||
74
pages/cash.vue
Normal file
74
pages/cash.vue
Normal file
|
|
@ -0,0 +1,74 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Cash Calendar</h2>
|
||||
<UBadge color="red" variant="subtle">Week 7 cushion breach</UBadge>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">13-Week Cash Flow</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div class="text-sm text-gray-600">
|
||||
Week-by-week cash inflows and outflows with minimum cushion tracking.
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-7 gap-2 text-xs font-medium text-gray-500">
|
||||
<div>Week</div>
|
||||
<div>Inflow</div>
|
||||
<div>Outflow</div>
|
||||
<div>Net</div>
|
||||
<div>Balance</div>
|
||||
<div>Cushion</div>
|
||||
<div>Status</div>
|
||||
</div>
|
||||
|
||||
<div v-for="week in weeks" :key="week.number"
|
||||
class="grid grid-cols-7 gap-2 text-sm py-2 border-b border-gray-100"
|
||||
:class="{ 'bg-red-50': week.breachesCushion }">
|
||||
<div class="font-medium">{{ week.number }}</div>
|
||||
<div class="text-green-600">+€{{ week.inflow.toLocaleString() }}</div>
|
||||
<div class="text-red-600">-€{{ week.outflow.toLocaleString() }}</div>
|
||||
<div :class="week.net >= 0 ? 'text-green-600' : 'text-red-600'">
|
||||
{{ week.net >= 0 ? '+' : '' }}€{{ week.net.toLocaleString() }}
|
||||
</div>
|
||||
<div class="font-medium">€{{ week.balance.toLocaleString() }}</div>
|
||||
<div :class="week.breachesCushion ? 'text-red-600 font-medium' : 'text-gray-600'">
|
||||
€{{ week.cushion.toLocaleString() }}
|
||||
</div>
|
||||
<div>
|
||||
<UBadge v-if="week.breachesCushion" color="red" size="xs">
|
||||
Breach
|
||||
</UBadge>
|
||||
<UBadge v-else color="green" size="xs">
|
||||
OK
|
||||
</UBadge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-3 bg-orange-50 rounded-lg">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-exclamation-triangle" class="text-orange-500" />
|
||||
<span class="text-sm font-medium text-orange-800">
|
||||
This week would drop below your minimum cushion.
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const weeks = ref([
|
||||
{ number: 1, inflow: 3000, outflow: 2200, net: 800, balance: 5800, cushion: 2800, breachesCushion: false },
|
||||
{ number: 2, inflow: 2500, outflow: 2200, net: 300, balance: 6100, cushion: 3100, breachesCushion: false },
|
||||
{ number: 3, inflow: 0, outflow: 2200, net: -2200, balance: 3900, cushion: 900, breachesCushion: false },
|
||||
{ number: 4, inflow: 4000, outflow: 2200, net: 1800, balance: 5700, cushion: 2700, breachesCushion: false },
|
||||
{ number: 5, inflow: 2000, outflow: 2200, net: -200, balance: 5500, cushion: 2500, breachesCushion: false },
|
||||
{ number: 6, inflow: 1500, outflow: 2200, net: -700, balance: 4800, cushion: 1800, breachesCushion: false },
|
||||
{ number: 7, inflow: 1000, outflow: 2200, net: -1200, balance: 3600, cushion: 600, breachesCushion: true },
|
||||
// ... more weeks
|
||||
])
|
||||
</script>
|
||||
180
pages/glossary.vue
Normal file
180
pages/glossary.vue
Normal file
|
|
@ -0,0 +1,180 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Glossary</h2>
|
||||
<UInput
|
||||
v-model="searchQuery"
|
||||
placeholder="Search definitions..."
|
||||
icon="i-heroicons-magnifying-glass"
|
||||
class="w-64"
|
||||
:ui="{ icon: { trailing: { pointer: '' } } }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div v-for="letter in alphabeticalGroups" :key="letter.letter" class="space-y-4">
|
||||
<h3 class="text-lg font-semibold text-primary-600 border-b border-gray-200 pb-2">
|
||||
{{ letter.letter }}
|
||||
</h3>
|
||||
<div class="space-y-4">
|
||||
<div
|
||||
v-for="term in letter.terms"
|
||||
:key="term.id"
|
||||
:id="term.id"
|
||||
class="scroll-mt-20"
|
||||
>
|
||||
<dt class="font-medium text-gray-900 mb-1">
|
||||
{{ term.term }}
|
||||
</dt>
|
||||
<dd class="text-gray-600 text-sm leading-relaxed">
|
||||
{{ term.definition }}
|
||||
<span v-if="term.example" class="block mt-1 text-gray-500 italic">
|
||||
Example: {{ term.example }}
|
||||
</span>
|
||||
</dd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Glossary terms based on CLAUDE.md definitions
|
||||
const glossaryTerms = ref([
|
||||
{
|
||||
id: 'budget',
|
||||
term: 'Budget',
|
||||
definition: 'Month-by-month plan of money in and money out. Not exact dates.',
|
||||
example: 'January budget shows €12,000 revenue and €9,900 costs'
|
||||
},
|
||||
{
|
||||
id: 'cash-flow',
|
||||
term: 'Cash Flow',
|
||||
definition: 'The actual dates money moves. Shows timing risk.',
|
||||
example: 'Client pays Net 30, so January work arrives in February'
|
||||
},
|
||||
{
|
||||
id: 'concentration',
|
||||
term: 'Concentration',
|
||||
definition: 'Dependence on few revenue sources. UI shows top source percentage.',
|
||||
example: 'If 65% comes from one client, concentration is high risk'
|
||||
},
|
||||
{
|
||||
id: 'coverage',
|
||||
term: 'Coverage',
|
||||
definition: 'Funded paid hours divided by target hours across all members.',
|
||||
example: '208 funded hours ÷ 320 target hours = 65% coverage'
|
||||
},
|
||||
{
|
||||
id: 'deferred-pay',
|
||||
term: 'Deferred Pay',
|
||||
definition: 'Unpaid hours the co-op owes later at the same wage.',
|
||||
example: 'Alex worked 40 hours unpaid in January, owed €800 later'
|
||||
},
|
||||
{
|
||||
id: 'equal-wage',
|
||||
term: 'Equal Wage',
|
||||
definition: 'Same hourly rate for all paid hours.',
|
||||
example: 'Everyone gets €20/hour for paid work, regardless of role'
|
||||
},
|
||||
{
|
||||
id: 'minimum-cash-cushion',
|
||||
term: 'Minimum Cash Cushion',
|
||||
definition: 'Lowest operating balance we agree not to breach.',
|
||||
example: '€3,000 minimum means never go below this amount'
|
||||
},
|
||||
{
|
||||
id: 'on-costs',
|
||||
term: 'On-costs',
|
||||
definition: 'Employer taxes, benefits, and payroll fees on top of wages.',
|
||||
example: '€6,400 wages + 25% on-costs = €8,000 total payroll'
|
||||
},
|
||||
{
|
||||
id: 'patronage',
|
||||
term: 'Patronage',
|
||||
definition: 'A way to share surplus based on recorded contributions.',
|
||||
example: 'Extra profits shared based on hours worked or value added'
|
||||
},
|
||||
{
|
||||
id: 'payout-delay',
|
||||
term: 'Payout Delay',
|
||||
definition: 'Time between earning money and receiving it.',
|
||||
example: 'Platform sales have 14-day delay, grants have 45-day delay'
|
||||
},
|
||||
{
|
||||
id: 'restricted-funds',
|
||||
term: 'Restricted Funds',
|
||||
definition: 'Money that can only be used for approved purposes.',
|
||||
example: 'Grant money restricted to development costs only'
|
||||
},
|
||||
{
|
||||
id: 'revenue-share',
|
||||
term: 'Revenue Share',
|
||||
definition: 'Percentage of earnings paid to platform or partner.',
|
||||
example: 'App store takes 30% revenue share on sales'
|
||||
},
|
||||
{
|
||||
id: 'runway',
|
||||
term: 'Runway',
|
||||
definition: 'Months until cash plus savings run out under the current plan.',
|
||||
example: '€13,000 available ÷ €4,600 monthly burn = 2.8 months runway'
|
||||
},
|
||||
{
|
||||
id: 'savings-target',
|
||||
term: 'Savings Target',
|
||||
definition: 'Money held for stability. Aim to reach before ramping hours.',
|
||||
example: '3 months target = €13,800 for 3 months of expenses'
|
||||
},
|
||||
{
|
||||
id: 'surplus',
|
||||
term: 'Surplus',
|
||||
definition: 'Money left over after all costs are paid.',
|
||||
example: '€12,000 revenue - €9,900 costs = €2,100 surplus'
|
||||
},
|
||||
{
|
||||
id: 'value-accounting',
|
||||
term: 'Value Accounting',
|
||||
definition: 'Monthly process to review contributions and distribute surplus.',
|
||||
example: 'January session: review work, repay deferred pay, fund training'
|
||||
}
|
||||
])
|
||||
|
||||
// Filter terms based on search
|
||||
const filteredTerms = computed(() => {
|
||||
if (!searchQuery.value) return glossaryTerms.value
|
||||
|
||||
const query = searchQuery.value.toLowerCase()
|
||||
return glossaryTerms.value.filter(term =>
|
||||
term.term.toLowerCase().includes(query) ||
|
||||
term.definition.toLowerCase().includes(query)
|
||||
)
|
||||
})
|
||||
|
||||
// Group terms alphabetically
|
||||
const alphabeticalGroups = computed(() => {
|
||||
const groups = new Map()
|
||||
|
||||
filteredTerms.value
|
||||
.sort((a, b) => a.term.localeCompare(b.term))
|
||||
.forEach(term => {
|
||||
const letter = term.term[0].toUpperCase()
|
||||
if (!groups.has(letter)) {
|
||||
groups.set(letter, { letter, terms: [] })
|
||||
}
|
||||
groups.get(letter).terms.push(term)
|
||||
})
|
||||
|
||||
return Array.from(groups.values()).sort((a, b) => a.letter.localeCompare(b.letter))
|
||||
})
|
||||
|
||||
// SEO and accessibility
|
||||
useSeoMeta({
|
||||
title: 'Glossary - Plain English Definitions',
|
||||
description: 'Plain English definitions of co-op financial terms. No jargon.',
|
||||
})
|
||||
</script>
|
||||
289
pages/index.vue
Normal file
289
pages/index.vue
Normal file
|
|
@ -0,0 +1,289 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Dashboard</h2>
|
||||
<div class="flex gap-2">
|
||||
<UButton
|
||||
icon="i-heroicons-arrow-down-tray"
|
||||
color="gray"
|
||||
@click="onExport"
|
||||
>Export JSON</UButton
|
||||
>
|
||||
<UButton icon="i-heroicons-arrow-up-tray" color="gray" @click="onImport"
|
||||
>Import JSON</UButton
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Key Metrics Row -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
<RunwayMeter
|
||||
:months="metrics.runway"
|
||||
:description="`You have ${$format.number(metrics.runway)} months of runway with current spending.`"
|
||||
/>
|
||||
|
||||
<CoverageMeter
|
||||
:funded-paid-hours="Math.round(metrics.totalTargetHours * 0.65)"
|
||||
:target-hours="metrics.totalTargetHours"
|
||||
description="Funded hours vs target capacity across all members."
|
||||
/>
|
||||
|
||||
<ReserveMeter
|
||||
:current-savings="metrics.finances.currentBalances.savings"
|
||||
:savings-target-months="metrics.finances.policies.savingsTargetMonths"
|
||||
:monthly-burn="metrics.monthlyBurn"
|
||||
description="Build savings to your target before increasing paid hours."
|
||||
/>
|
||||
|
||||
<UCard>
|
||||
<div class="text-center space-y-3">
|
||||
<div class="text-3xl font-bold text-red-600">65%</div>
|
||||
<div class="text-sm text-gray-600">
|
||||
<GlossaryTooltip
|
||||
term="Concentration"
|
||||
term-id="concentration"
|
||||
definition="Dependence on few revenue sources. UI shows top source percentage."
|
||||
/>
|
||||
</div>
|
||||
<ConcentrationChip
|
||||
status="red"
|
||||
:top-source-pct="65"
|
||||
:show-percentage="false"
|
||||
variant="soft"
|
||||
/>
|
||||
<p class="text-xs text-gray-500 mt-2">
|
||||
Most of your money comes from one place. Add another stream to reduce risk.
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Alerts Section -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Alerts</h3>
|
||||
</template>
|
||||
<div class="space-y-3">
|
||||
<UAlert
|
||||
color="red"
|
||||
variant="subtle"
|
||||
icon="i-heroicons-exclamation-triangle"
|
||||
title="Revenue Concentration Risk"
|
||||
description="Most of your money comes from one place. Add another stream to reduce risk."
|
||||
:actions="[{ label: 'Plan Mix', click: () => navigateTo('/mix') }]"
|
||||
/>
|
||||
<UAlert
|
||||
color="orange"
|
||||
variant="subtle"
|
||||
icon="i-heroicons-calendar"
|
||||
title="Cash Cushion Breach Forecast"
|
||||
description="Week 7 would drop below your minimum cushion."
|
||||
:actions="[{ label: 'View Calendar', click: () => navigateTo('/cash') }]"
|
||||
/>
|
||||
<UAlert
|
||||
color="yellow"
|
||||
variant="subtle"
|
||||
icon="i-heroicons-banknotes"
|
||||
title="Savings Below Target"
|
||||
description="Build savings to your target before increasing paid hours."
|
||||
:actions="[{ label: 'View Progress', click: () => navigateTo('/budget') }]"
|
||||
/>
|
||||
<UAlert
|
||||
color="amber"
|
||||
variant="subtle"
|
||||
icon="i-heroicons-clock"
|
||||
title="Over-Deferred Member"
|
||||
description="Alex has reached 85% of quarterly deferred cap."
|
||||
/>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Scenario Snapshots -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Scenario Snapshots</h3>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="font-medium text-sm">Operate Current</h4>
|
||||
<UBadge color="green" variant="subtle" size="xs">Active</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-orange-600 mb-1">2.8 months</div>
|
||||
<p class="text-xs text-gray-600">Continue existing plan</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="font-medium text-sm">Quit Day Jobs</h4>
|
||||
<UBadge color="gray" variant="subtle" size="xs">Scenario</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-red-600 mb-1">1.4 months</div>
|
||||
<p class="text-xs text-gray-600">Full-time co-op work</p>
|
||||
</div>
|
||||
|
||||
<div class="p-4 border border-gray-200 rounded-lg">
|
||||
<div class="flex items-center justify-between mb-2">
|
||||
<h4 class="font-medium text-sm">Start Production</h4>
|
||||
<UBadge color="gray" variant="subtle" size="xs">Scenario</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-yellow-600 mb-1">2.1 months</div>
|
||||
<p class="text-xs text-gray-600">Launch development</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<UButton variant="outline" @click="navigateTo('/scenarios')">
|
||||
Compare All Scenarios
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Next Value Accounting Session -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium">Next Value Accounting Session</h3>
|
||||
<UBadge color="blue" variant="subtle">January 2024</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Session Preparation</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-green-500" />
|
||||
<span class="text-sm">Month closed & reviewed</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-green-500" />
|
||||
<span class="text-sm">Contributions logged</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-x-circle" class="text-gray-400" />
|
||||
<span class="text-sm text-gray-600">Surplus calculated</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UIcon name="i-heroicons-x-circle" class="text-gray-400" />
|
||||
<span class="text-sm text-gray-600">Member needs reviewed</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<UProgress value="50" :max="100" color="blue" />
|
||||
<p class="text-xs text-gray-600 mt-1">2 of 4 items complete</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Available for Distribution</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Surplus</span>
|
||||
<span class="font-medium text-green-600">{{ $format.currency(1200) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Deferred owed</span>
|
||||
<span class="font-medium text-orange-600">{{ $format.currency(metrics.finances.deferredLiabilities.totalDeferred) }}</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Savings gap</span>
|
||||
<span class="font-medium text-blue-600">{{ $format.currency(2000) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<UButton color="primary" @click="navigateTo('/session')">
|
||||
Start Session
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<UButton
|
||||
block
|
||||
variant="ghost"
|
||||
class="justify-start h-auto p-4"
|
||||
@click="navigateTo('/mix')"
|
||||
>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">Revenue Mix</div>
|
||||
<div class="text-xs text-gray-500">Plan revenue streams</div>
|
||||
</div>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
block
|
||||
variant="ghost"
|
||||
class="justify-start h-auto p-4"
|
||||
@click="navigateTo('/cash')"
|
||||
>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">Cash Calendar</div>
|
||||
<div class="text-xs text-gray-500">13-week cash flow</div>
|
||||
</div>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
block
|
||||
variant="ghost"
|
||||
class="justify-start h-auto p-4"
|
||||
@click="navigateTo('/scenarios')"
|
||||
>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">Scenarios</div>
|
||||
<div class="text-xs text-gray-500">What-if analysis</div>
|
||||
</div>
|
||||
</UButton>
|
||||
|
||||
<UButton
|
||||
block
|
||||
color="primary"
|
||||
class="justify-start h-auto p-4"
|
||||
@click="navigateTo('/session')"
|
||||
>
|
||||
<div class="text-left">
|
||||
<div class="font-medium">Next Session</div>
|
||||
<div class="text-xs">Value Accounting</div>
|
||||
</div>
|
||||
</UButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Dashboard page
|
||||
const { $format } = useNuxtApp()
|
||||
const { calculateMetrics } = useFixtures()
|
||||
|
||||
// Load fixture data and calculate metrics
|
||||
const metrics = await calculateMetrics()
|
||||
|
||||
const onExport = () => {
|
||||
const data = exportAll();
|
||||
const blob = new Blob([JSON.stringify(data, null, 2)], {
|
||||
type: "application/json",
|
||||
});
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "urgent-tools.json";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
};
|
||||
|
||||
const onImport = async () => {
|
||||
const input = document.createElement("input");
|
||||
input.type = "file";
|
||||
input.accept = "application/json";
|
||||
input.onchange = async () => {
|
||||
const file = input.files?.[0];
|
||||
if (!file) return;
|
||||
const text = await file.text();
|
||||
importAll(JSON.parse(text));
|
||||
};
|
||||
input.click();
|
||||
};
|
||||
|
||||
const { exportAll, importAll } = useFixtureIO();
|
||||
</script>
|
||||
273
pages/mix.vue
Normal file
273
pages/mix.vue
Normal file
|
|
@ -0,0 +1,273 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Revenue Mix Planner</h2>
|
||||
<UButton color="primary" @click="sendToBudget">
|
||||
Send to Budget & Scenarios
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Concentration Overview -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Concentration Risk</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold text-red-600 mb-2">65%</div>
|
||||
<div class="text-sm text-gray-600 mb-3">Top source percentage</div>
|
||||
<ConcentrationChip
|
||||
status="red"
|
||||
:top-source-pct="65"
|
||||
:show-percentage="false"
|
||||
variant="solid"
|
||||
size="md" />
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 text-center">
|
||||
Most of your money comes from one place. Add another stream to
|
||||
reduce risk.
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Payout Delay Exposure</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div class="text-center">
|
||||
<div class="text-4xl font-bold text-yellow-600 mb-2">35 days</div>
|
||||
<div class="text-sm text-gray-600 mb-3">Weighted average delay</div>
|
||||
<UBadge color="yellow" variant="subtle">Moderate Risk</UBadge>
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 text-center">
|
||||
Money is earned now but arrives later. Delays can create mid-month
|
||||
dips.
|
||||
</p>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Revenue Streams Table -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium">Revenue Streams</h3>
|
||||
<UButton icon="i-heroicons-plus" size="sm" @click="addStream">
|
||||
Add Stream
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<UTable :rows="streams" :columns="columns">
|
||||
<template #name-data="{ row }">
|
||||
<div>
|
||||
<div class="font-medium">{{ row.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ row.category }}</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #targetPct-data="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<UInput
|
||||
v-model="row.targetPct"
|
||||
type="number"
|
||||
size="xs"
|
||||
class="w-16"
|
||||
@update:model-value="updateStream(row.id, 'targetPct', $event)" />
|
||||
<span class="text-xs text-gray-500">%</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #targetAmount-data="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="text-xs text-gray-500">€</span>
|
||||
<UInput
|
||||
v-model="row.targetMonthlyAmount"
|
||||
type="number"
|
||||
size="xs"
|
||||
class="w-20"
|
||||
@update:model-value="
|
||||
updateStream(row.id, 'targetMonthlyAmount', $event)
|
||||
" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #fees-data="{ row }">
|
||||
<div class="text-sm">
|
||||
<div v-if="row.platformFeePct > 0">
|
||||
Platform: {{ row.platformFeePct }}%
|
||||
</div>
|
||||
<div v-if="row.revenueSharePct > 0">
|
||||
Share: {{ row.revenueSharePct }}%
|
||||
</div>
|
||||
<div
|
||||
v-if="row.platformFeePct === 0 && row.revenueSharePct === 0"
|
||||
class="text-gray-400">
|
||||
None
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #delay-data="{ row }">
|
||||
<div class="flex items-center gap-2">
|
||||
<UInput
|
||||
v-model="row.payoutDelayDays"
|
||||
type="number"
|
||||
size="xs"
|
||||
class="w-16"
|
||||
@update:model-value="
|
||||
updateStream(row.id, 'payoutDelayDays', $event)
|
||||
" />
|
||||
<span class="text-xs text-gray-500">days</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #restrictions-data="{ row }">
|
||||
<RestrictionChip :restriction="row.restrictions" />
|
||||
</template>
|
||||
|
||||
<template #certainty-data="{ row }">
|
||||
<UBadge
|
||||
:color="getCertaintyColor(row.certainty)"
|
||||
variant="subtle"
|
||||
size="xs">
|
||||
{{ row.certainty }}
|
||||
</UBadge>
|
||||
</template>
|
||||
|
||||
<template #actions-data="{ row }">
|
||||
<UDropdown :items="getRowActions(row)">
|
||||
<UButton
|
||||
icon="i-heroicons-ellipsis-horizontal"
|
||||
size="xs"
|
||||
variant="ghost" />
|
||||
</UDropdown>
|
||||
</template>
|
||||
</UTable>
|
||||
|
||||
<div class="mt-4 p-4 bg-gray-50 rounded-lg">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="font-medium">Totals</span>
|
||||
<div class="flex gap-6">
|
||||
<span>{{ totalTargetPct }}%</span>
|
||||
<span>{{ $format.currency(totalMonthlyAmount) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { $format } = useNuxtApp();
|
||||
const { loadStreams } = useFixtures();
|
||||
|
||||
// Load fixture data
|
||||
const fixtureData = await loadStreams();
|
||||
const streams = ref(
|
||||
fixtureData.revenueStreams.map((stream) => ({
|
||||
id: stream.id,
|
||||
name: stream.name,
|
||||
category: stream.category,
|
||||
targetPct: stream.targetPct,
|
||||
targetMonthlyAmount: stream.targetMonthlyAmount,
|
||||
certainty: stream.certainty,
|
||||
payoutDelayDays: stream.payoutDelayDays,
|
||||
platformFeePct: stream.platformFeePct || 0,
|
||||
revenueSharePct: stream.revenueSharePct || 0,
|
||||
restrictions: stream.restrictions,
|
||||
}))
|
||||
);
|
||||
|
||||
const columns = [
|
||||
{ id: "name", key: "name", label: "Stream" },
|
||||
{ id: "targetPct", key: "targetPct", label: "Target %" },
|
||||
{ id: "targetAmount", key: "targetAmount", label: "Monthly €" },
|
||||
{ id: "fees", key: "fees", label: "Fees" },
|
||||
{ id: "delay", key: "delay", label: "Payout Delay" },
|
||||
{ id: "restrictions", key: "restrictions", label: "Use" },
|
||||
{ id: "certainty", key: "certainty", label: "Certainty" },
|
||||
{ id: "actions", key: "actions", label: "" },
|
||||
];
|
||||
|
||||
const totalTargetPct = computed(() =>
|
||||
streams.value.reduce((sum, stream) => sum + (stream.targetPct || 0), 0)
|
||||
);
|
||||
|
||||
const totalMonthlyAmount = computed(() =>
|
||||
streams.value.reduce(
|
||||
(sum, stream) => sum + (stream.targetMonthlyAmount || 0),
|
||||
0
|
||||
)
|
||||
);
|
||||
|
||||
function getCertaintyColor(certainty: string) {
|
||||
switch (certainty) {
|
||||
case "Committed":
|
||||
return "green";
|
||||
case "Probable":
|
||||
return "blue";
|
||||
case "Aspirational":
|
||||
return "yellow";
|
||||
default:
|
||||
return "gray";
|
||||
}
|
||||
}
|
||||
|
||||
function getRowActions(row: any) {
|
||||
return [
|
||||
[
|
||||
{
|
||||
label: "Edit",
|
||||
icon: "i-heroicons-pencil",
|
||||
click: () => editStream(row),
|
||||
},
|
||||
{
|
||||
label: "Duplicate",
|
||||
icon: "i-heroicons-document-duplicate",
|
||||
click: () => duplicateStream(row),
|
||||
},
|
||||
{
|
||||
label: "Remove",
|
||||
icon: "i-heroicons-trash",
|
||||
click: () => removeStream(row),
|
||||
},
|
||||
],
|
||||
];
|
||||
}
|
||||
|
||||
function updateStream(id: string, field: string, value: any) {
|
||||
const stream = streams.value.find((s) => s.id === id);
|
||||
if (stream) {
|
||||
stream[field] = Number(value) || value;
|
||||
}
|
||||
}
|
||||
|
||||
function addStream() {
|
||||
// Add stream logic
|
||||
console.log("Add new stream");
|
||||
}
|
||||
|
||||
function editStream(row: any) {
|
||||
// Edit stream logic
|
||||
console.log("Edit stream", row);
|
||||
}
|
||||
|
||||
function duplicateStream(row: any) {
|
||||
// Duplicate stream logic
|
||||
console.log("Duplicate stream", row);
|
||||
}
|
||||
|
||||
function removeStream(row: any) {
|
||||
const index = streams.value.findIndex((s) => s.id === row.id);
|
||||
if (index > -1) {
|
||||
streams.value.splice(index, 1);
|
||||
}
|
||||
}
|
||||
|
||||
function sendToBudget() {
|
||||
navigateTo("/budget");
|
||||
}
|
||||
</script>
|
||||
367
pages/scenarios.vue
Normal file
367
pages/scenarios.vue
Normal file
|
|
@ -0,0 +1,367 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Scenarios & Runway</h2>
|
||||
</div>
|
||||
|
||||
<!-- 6-Month Preset Card -->
|
||||
<UCard class="bg-blue-50 border-blue-200">
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium text-blue-900">
|
||||
6-Month Plan Analysis
|
||||
</h3>
|
||||
<UBadge color="info" variant="solid">Recommended</UBadge>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
<div class="text-center">
|
||||
<div class="text-3xl font-bold text-blue-600 mb-2">18.2 months</div>
|
||||
<div class="text-sm text-gray-600 mb-3">Extended runway</div>
|
||||
<UProgress value="91" color="info" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Key Changes</h4>
|
||||
<ul class="text-sm text-gray-600 space-y-1">
|
||||
<li>• Diversify revenue mix</li>
|
||||
<li>• Build 6-month savings buffer</li>
|
||||
<li>• Gradual capacity scaling</li>
|
||||
<li>• Risk mitigation focus</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Feasibility Gates</h4>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-green-500" />
|
||||
<span class="text-sm">Savings target achievable</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-green-500" />
|
||||
<span class="text-sm">Cash floor maintained</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
name="i-heroicons-exclamation-triangle"
|
||||
class="text-yellow-500" />
|
||||
<span class="text-sm">Requires 2 new streams</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- Scenario Comparison -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
<UCard class="border-green-200 bg-green-50">
|
||||
<div class="text-center space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium text-sm">Operate Current</h4>
|
||||
<UBadge color="success" variant="solid" size="xs">Active</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-orange-600">2.8 months</div>
|
||||
<div class="text-xs text-gray-600">Baseline scenario</div>
|
||||
<UButton size="xs" variant="ghost" @click="setScenario('current')">
|
||||
<UIcon name="i-heroicons-play" class="mr-1" />
|
||||
Continue
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<div class="text-center space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium text-sm">Quit Day Jobs</h4>
|
||||
<UBadge color="error" variant="subtle" size="xs">High Risk</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-red-600">1.4 months</div>
|
||||
<div class="text-xs text-gray-600">Full-time co-op work</div>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
@click="setScenario('quitDayJobs')">
|
||||
<UIcon name="i-heroicons-briefcase" class="mr-1" />
|
||||
Analyze
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<div class="text-center space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium text-sm">Start Production</h4>
|
||||
<UBadge color="warning" variant="subtle" size="xs"
|
||||
>Medium Risk</UBadge
|
||||
>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-yellow-600">2.1 months</div>
|
||||
<div class="text-xs text-gray-600">Launch development</div>
|
||||
<UButton
|
||||
size="xs"
|
||||
variant="ghost"
|
||||
@click="setScenario('startProduction')">
|
||||
<UIcon name="i-heroicons-rocket-launch" class="mr-1" />
|
||||
Analyze
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard class="border-blue-200">
|
||||
<div class="text-center space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium text-sm">6-Month Plan</h4>
|
||||
<UBadge color="info" variant="solid" size="xs">Planned</UBadge>
|
||||
</div>
|
||||
<div class="text-2xl font-bold text-blue-600">18.2 months</div>
|
||||
<div class="text-xs text-gray-600">Extended planning</div>
|
||||
<UButton size="xs" color="primary" @click="setScenario('sixMonth')">
|
||||
<UIcon name="i-heroicons-calendar" class="mr-1" />
|
||||
Plan
|
||||
</UButton>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<!-- Feasibility Analysis -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Feasibility Analysis</h3>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Gate Checks</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">Savings Target Reached</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-x-circle" class="text-red-500" />
|
||||
<span class="text-sm text-gray-600">€5,200 short</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">Cash Floor Maintained</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="i-heroicons-check-circle" class="text-green-500" />
|
||||
<span class="text-sm text-gray-600">Week 4+</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-sm">Revenue Diversification</span>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
name="i-heroicons-exclamation-triangle"
|
||||
class="text-yellow-500" />
|
||||
<span class="text-sm text-gray-600">Top: 65%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h4 class="font-medium mb-3">Key Dates</h4>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm text-gray-600">Savings gate clear:</span>
|
||||
<span class="text-sm font-medium">March 2024</span>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm text-gray-600">First cash breach:</span>
|
||||
<span class="text-sm font-medium text-red-600"
|
||||
>Week 7 (Feb 12)</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between">
|
||||
<span class="text-sm text-gray-600">Deferred cap reset:</span>
|
||||
<span class="text-sm font-medium">April 1, 2024</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<!-- What-If Sliders -->
|
||||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h3 class="text-lg font-medium">What-If Analysis</h3>
|
||||
<UButton size="sm" variant="ghost" @click="resetSliders">
|
||||
Reset
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label for="revenue-slider" class="block text-sm font-medium mb-2">
|
||||
<GlossaryTooltip
|
||||
term="Monthly Revenue"
|
||||
term-id="revenue"
|
||||
definition="Total money earned from all streams in one month." />:
|
||||
{{ $format.currency(revenue) }}
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<URange
|
||||
id="revenue-slider"
|
||||
v-model="revenue"
|
||||
:min="5000"
|
||||
:max="20000"
|
||||
:step="500"
|
||||
:aria-label="`Monthly revenue: ${$format.currency(revenue)}`"
|
||||
class="flex-1" />
|
||||
<UInput
|
||||
v-model="revenue"
|
||||
type="number"
|
||||
:min="5000"
|
||||
:max="20000"
|
||||
:step="500"
|
||||
class="w-24"
|
||||
size="xs"
|
||||
aria-label="Monthly revenue input" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="hours-slider" class="block text-sm font-medium mb-2">
|
||||
Paid Hours: {{ paidHours }}h/month
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<URange
|
||||
id="hours-slider"
|
||||
v-model="paidHours"
|
||||
:min="100"
|
||||
:max="600"
|
||||
:step="20"
|
||||
:aria-label="`Paid hours: ${paidHours} per month`"
|
||||
class="flex-1" />
|
||||
<UInput
|
||||
v-model="paidHours"
|
||||
type="number"
|
||||
:min="100"
|
||||
:max="600"
|
||||
:step="20"
|
||||
class="w-20"
|
||||
size="xs"
|
||||
aria-label="Paid hours input" />
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<label for="winrate-slider" class="block text-sm font-medium mb-2">
|
||||
Win Rate: {{ winRate }}%
|
||||
</label>
|
||||
<div class="flex items-center gap-3">
|
||||
<URange
|
||||
id="winrate-slider"
|
||||
v-model="winRate"
|
||||
:min="40"
|
||||
:max="95"
|
||||
:step="5"
|
||||
:aria-label="`Win rate: ${winRate} percent`"
|
||||
class="flex-1" />
|
||||
<UInput
|
||||
v-model="winRate"
|
||||
type="number"
|
||||
:min="40"
|
||||
:max="95"
|
||||
:step="5"
|
||||
class="w-16"
|
||||
size="xs"
|
||||
aria-label="Win rate input" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<h4 class="font-medium text-sm mb-3">Impact on Runway</h4>
|
||||
<div class="text-center">
|
||||
<div
|
||||
class="text-2xl font-bold"
|
||||
:class="getRunwayColor(calculatedRunway)">
|
||||
{{ calculatedRunway }} months
|
||||
</div>
|
||||
<UProgress
|
||||
:value="Math.min(calculatedRunway * 10, 100)"
|
||||
:max="100"
|
||||
:color="getProgressColor(calculatedRunway)"
|
||||
class="mt-2" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="space-y-2">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Monthly burn:</span>
|
||||
<span class="font-medium"
|
||||
>€{{ monthlyBurn.toLocaleString() }}</span
|
||||
>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Coverage ratio:</span>
|
||||
<span class="font-medium"
|
||||
>{{ Math.round((paidHours / 400) * 100) }}%</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const { $format } = useNuxtApp();
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const scenariosStore = useScenariosStore();
|
||||
|
||||
const revenue = ref(12000);
|
||||
const paidHours = ref(320);
|
||||
const winRate = ref(70);
|
||||
|
||||
// Calculate dynamic metrics
|
||||
const monthlyBurn = computed(() => {
|
||||
const payroll = paidHours.value * 20 * 1.25; // €20/hr + 25% oncost
|
||||
const overhead = 1400;
|
||||
const production = 500;
|
||||
return payroll + overhead + production;
|
||||
});
|
||||
|
||||
const calculatedRunway = computed(() => {
|
||||
const totalCash = 13000; // cash + savings
|
||||
const adjustedRevenue = revenue.value * (winRate.value / 100);
|
||||
const netPerMonth = adjustedRevenue - monthlyBurn.value;
|
||||
|
||||
if (netPerMonth >= 0) return 999; // Infinite/sustainable
|
||||
return Math.max(0, totalCash / Math.abs(netPerMonth));
|
||||
});
|
||||
|
||||
function getRunwayColor(months: number) {
|
||||
if (months >= 6) return "text-green-600";
|
||||
if (months >= 3) return "text-blue-600";
|
||||
if (months >= 2) return "text-yellow-600";
|
||||
return "text-red-600";
|
||||
}
|
||||
|
||||
function getProgressColor(months: number) {
|
||||
if (months >= 6) return "success";
|
||||
if (months >= 3) return "info";
|
||||
if (months >= 2) return "warning";
|
||||
return "error";
|
||||
}
|
||||
|
||||
function setScenario(scenario: string) {
|
||||
scenariosStore.setActiveScenario(scenario);
|
||||
router.replace({ query: { ...route.query, scenario } });
|
||||
}
|
||||
|
||||
function resetSliders() {
|
||||
revenue.value = 12000;
|
||||
paidHours.value = 320;
|
||||
winRate.value = 70;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
const q = route.query.scenario;
|
||||
if (typeof q === "string") {
|
||||
scenariosStore.setActiveScenario(q);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
121
pages/session.vue
Normal file
121
pages/session.vue
Normal file
|
|
@ -0,0 +1,121 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Value Accounting Session</h2>
|
||||
<UBadge color="primary" variant="subtle">January 2024</UBadge>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Checklist</h3>
|
||||
</template>
|
||||
<div class="space-y-3">
|
||||
<div class="flex items-center gap-3">
|
||||
<UCheckbox v-model="checklist.monthClosed" />
|
||||
<span class="text-sm">Month closed & reviewed</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UCheckbox v-model="checklist.contributionsLogged" />
|
||||
<span class="text-sm">Contributions logged</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UCheckbox v-model="checklist.surplusCalculated" />
|
||||
<span class="text-sm">Surplus calculated</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UCheckbox v-model="checklist.needsReviewed" />
|
||||
<span class="text-sm">Member needs reviewed</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Available</h3>
|
||||
</template>
|
||||
<div class="space-y-3">
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Surplus</span>
|
||||
<span class="font-medium text-green-600">€1,200</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Deferred owed</span>
|
||||
<span class="font-medium text-orange-600">€800</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-sm">
|
||||
<span class="text-gray-600">Savings target</span>
|
||||
<span class="font-medium text-blue-600">€2,000</span>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Distribution</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1">Deferred Repay</label>
|
||||
<UInput v-model="distribution.deferred" type="number" size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1">Savings</label>
|
||||
<UInput v-model="distribution.savings" type="number" size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1">Training</label>
|
||||
<UInput v-model="distribution.training" type="number" size="sm" />
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-xs font-medium mb-1">Retained</label>
|
||||
<UInput v-model="distribution.retained" type="number" size="sm" readonly />
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Decision Record</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<UTextarea
|
||||
v-model="rationale"
|
||||
placeholder="Brief rationale for this month's distribution decisions..."
|
||||
rows="3"
|
||||
/>
|
||||
<div class="flex justify-end gap-3">
|
||||
<UButton variant="ghost">
|
||||
Save Draft
|
||||
</UButton>
|
||||
<UButton color="primary" :disabled="!allChecklistComplete">
|
||||
Complete Session
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const checklist = ref({
|
||||
monthClosed: false,
|
||||
contributionsLogged: false,
|
||||
surplusCalculated: false,
|
||||
needsReviewed: false
|
||||
})
|
||||
|
||||
const distribution = ref({
|
||||
deferred: 800,
|
||||
savings: 400,
|
||||
training: 0,
|
||||
retained: 0
|
||||
})
|
||||
|
||||
const rationale = ref('')
|
||||
|
||||
const allChecklistComplete = computed(() => {
|
||||
return Object.values(checklist.value).every(Boolean)
|
||||
})
|
||||
</script>
|
||||
138
pages/settings.vue
Normal file
138
pages/settings.vue
Normal file
|
|
@ -0,0 +1,138 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Policies & Privacy</h2>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Wage & Costs</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Equal Hourly Wage</label>
|
||||
<UInput
|
||||
v-model="policies.hourlyWage"
|
||||
type="number"
|
||||
:ui="{ wrapper: 'relative' }"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Payroll On-costs (%)</label>
|
||||
<UInput
|
||||
v-model="policies.payrollOncost"
|
||||
type="number"
|
||||
:ui="{ wrapper: 'relative' }"
|
||||
>
|
||||
<template #trailing>
|
||||
<span class="text-gray-500">%</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Cash Management</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Savings Target (months)</label>
|
||||
<UInput
|
||||
v-model="policies.savingsTargetMonths"
|
||||
type="number"
|
||||
step="0.1"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Minimum Cash Cushion</label>
|
||||
<UInput
|
||||
v-model="policies.minCashCushion"
|
||||
type="number"
|
||||
:ui="{ wrapper: 'relative' }"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Deferred Pay Limits</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Cap (hours per quarter)</label>
|
||||
<UInput
|
||||
v-model="policies.deferredCapHours"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium mb-2">Sunset (months)</label>
|
||||
<UInput
|
||||
v-model="policies.deferredSunsetMonths"
|
||||
type="number"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
||||
<UCard>
|
||||
<template #header>
|
||||
<h3 class="text-lg font-medium">Distribution Order</h3>
|
||||
</template>
|
||||
<div class="space-y-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
Order of surplus distribution priorities.
|
||||
</p>
|
||||
<div class="space-y-2">
|
||||
<div v-for="(item, index) in distributionOrder" :key="item"
|
||||
class="flex items-center justify-between p-2 bg-gray-50 rounded">
|
||||
<span class="text-sm font-medium">{{ index + 1 }}. {{ item }}</span>
|
||||
<div class="flex gap-1">
|
||||
<UButton size="xs" variant="ghost" icon="i-heroicons-chevron-up" />
|
||||
<UButton size="xs" variant="ghost" icon="i-heroicons-chevron-down" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end">
|
||||
<UButton color="primary">
|
||||
Save Policies
|
||||
</UButton>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const policies = ref({
|
||||
hourlyWage: 20,
|
||||
payrollOncost: 25,
|
||||
savingsTargetMonths: 3,
|
||||
minCashCushion: 3000,
|
||||
deferredCapHours: 240,
|
||||
deferredSunsetMonths: 12
|
||||
})
|
||||
|
||||
const distributionOrder = ref([
|
||||
'Deferred',
|
||||
'Savings',
|
||||
'Hardship',
|
||||
'Training',
|
||||
'Patronage',
|
||||
'Retained'
|
||||
])
|
||||
</script>
|
||||
214
pages/wizard.vue
Normal file
214
pages/wizard.vue
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
<template>
|
||||
<section class="py-8 space-y-6">
|
||||
<div class="flex items-center justify-between">
|
||||
<h2 class="text-2xl font-semibold">Setup Wizard</h2>
|
||||
<div class="flex items-center gap-3">
|
||||
<UBadge color="primary" variant="subtle"
|
||||
>Step {{ currentStep }} of 5</UBadge
|
||||
>
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
@click="resetWizard"
|
||||
:disabled="isResetting">
|
||||
Reset Wizard
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<UCard>
|
||||
<div class="space-y-6">
|
||||
<!-- Step 1: Members -->
|
||||
<div v-if="currentStep === 1">
|
||||
<WizardMembersStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Wage & Policies -->
|
||||
<div v-if="currentStep === 2">
|
||||
<WizardPoliciesStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Costs -->
|
||||
<div v-if="currentStep === 3">
|
||||
<WizardCostsStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Revenue -->
|
||||
<div v-if="currentStep === 4">
|
||||
<WizardRevenueStep @save-status="handleSaveStatus" />
|
||||
</div>
|
||||
|
||||
<!-- Step 5: Review -->
|
||||
<div v-if="currentStep === 5">
|
||||
<WizardReviewStep @complete="completeWizard" @reset="resetWizard" />
|
||||
</div>
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="flex justify-between items-center pt-6 border-t">
|
||||
<UButton v-if="currentStep > 1" variant="ghost" @click="previousStep">
|
||||
Previous
|
||||
</UButton>
|
||||
<div v-else></div>
|
||||
|
||||
<!-- Save status indicator -->
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon
|
||||
v-if="saveStatus === 'saving'"
|
||||
name="i-heroicons-arrow-path"
|
||||
class="w-4 h-4 animate-spin text-gray-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-xs text-gray-500"
|
||||
>Saving...</span
|
||||
>
|
||||
<span v-if="saveStatus === 'saved'" class="text-xs text-green-600"
|
||||
>Saved</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<UButton
|
||||
v-if="currentStep < 5"
|
||||
@click="nextStep"
|
||||
:disabled="!isHydrated || !canProceed">
|
||||
Next
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Step validation messages -->
|
||||
<div
|
||||
v-if="!canProceed && currentStep < 5"
|
||||
class="text-sm text-red-600 mt-2">
|
||||
{{ validationMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// Stores
|
||||
const membersStore = useMembersStore();
|
||||
const policiesStore = usePoliciesStore();
|
||||
const streamsStore = useStreamsStore();
|
||||
const budgetStore = useBudgetStore();
|
||||
|
||||
// Wizard state (persisted)
|
||||
const wizardStore = useWizardStore();
|
||||
const currentStep = computed({
|
||||
get: () => wizardStore.currentStep,
|
||||
set: (val: number) => wizardStore.setStep(val),
|
||||
});
|
||||
const saveStatus = ref("");
|
||||
const isResetting = ref(false);
|
||||
const isHydrated = ref(false);
|
||||
onMounted(() => {
|
||||
isHydrated.value = true;
|
||||
});
|
||||
|
||||
// Debug: log step and validation state
|
||||
watch(
|
||||
() => ({
|
||||
step: currentStep.value,
|
||||
membersValid: membersStore.isValid,
|
||||
policiesValid: policiesStore.isValid,
|
||||
streamsValid: streamsStore.hasValidStreams,
|
||||
members: membersStore.members,
|
||||
memberValidation: membersStore.validationDetails,
|
||||
}),
|
||||
(state) => {
|
||||
// eslint-disable-next-line no-console
|
||||
console.debug("Wizard state:", JSON.parse(JSON.stringify(state)));
|
||||
},
|
||||
{ deep: true }
|
||||
);
|
||||
|
||||
// Save status handler
|
||||
function handleSaveStatus(status: "saving" | "saved" | "error") {
|
||||
saveStatus.value = status;
|
||||
if (status === "saved") {
|
||||
// Clear status after delay
|
||||
setTimeout(() => {
|
||||
if (saveStatus.value === "saved") {
|
||||
saveStatus.value = "";
|
||||
}
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
// Step validation
|
||||
const canProceed = computed(() => {
|
||||
switch (currentStep.value) {
|
||||
case 1:
|
||||
return membersStore.isValid;
|
||||
case 2:
|
||||
return policiesStore.isValid;
|
||||
case 3:
|
||||
return true; // Costs are optional
|
||||
case 4:
|
||||
return streamsStore.hasValidStreams;
|
||||
default:
|
||||
return true;
|
||||
}
|
||||
});
|
||||
|
||||
const validationMessage = computed(() => {
|
||||
switch (currentStep.value) {
|
||||
case 1:
|
||||
if (membersStore.members.length === 0)
|
||||
return "Add at least one member to continue";
|
||||
return "Complete all required member fields";
|
||||
case 2:
|
||||
if (policiesStore.equalHourlyWage <= 0)
|
||||
return "Enter an hourly wage greater than 0";
|
||||
return "Complete all required policy fields";
|
||||
case 4:
|
||||
return "Add at least one valid revenue stream";
|
||||
default:
|
||||
return "";
|
||||
}
|
||||
});
|
||||
|
||||
function nextStep() {
|
||||
if (currentStep.value < 5 && canProceed.value) {
|
||||
currentStep.value++;
|
||||
}
|
||||
}
|
||||
|
||||
function previousStep() {
|
||||
if (currentStep.value > 1) {
|
||||
currentStep.value--;
|
||||
}
|
||||
}
|
||||
|
||||
function completeWizard() {
|
||||
// Mark setup as complete and redirect
|
||||
navigateTo("/scenarios");
|
||||
}
|
||||
|
||||
async function resetWizard() {
|
||||
isResetting.value = true;
|
||||
|
||||
// Reset all stores
|
||||
membersStore.resetMembers();
|
||||
policiesStore.resetPolicies();
|
||||
streamsStore.resetStreams();
|
||||
budgetStore.resetBudgetOverhead();
|
||||
|
||||
// Reset wizard state
|
||||
wizardStore.reset();
|
||||
saveStatus.value = "";
|
||||
|
||||
// Small delay for UX
|
||||
await new Promise((resolve) => setTimeout(resolve, 300));
|
||||
isResetting.value = false;
|
||||
}
|
||||
|
||||
// SEO
|
||||
useSeoMeta({
|
||||
title: "Setup Wizard - Configure Your Co-op",
|
||||
description:
|
||||
"Set up your co-op members, policies, costs, and revenue streams.",
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue