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

feat: add initial application structure with configuration, UI components, and state management

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-08-09 18:13:16 +01:00
parent fadf94002c
commit 0af6b17792
56 changed files with 6137 additions and 129 deletions
Download patch file Download diff file Expand all files Collapse all files

14
.env.example Normal file
View file

@ -0,0 +1,14 @@
# Co-op Pay & Value Tool Configuration
# Currency and localization
APP_CURRENCY=EUR
APP_LOCALE=en-CA
APP_DECIMAL_PLACES=2
# Application settings
APP_NAME="Urgent Tools"
APP_ENVIRONMENT=development
# Optional overrides
# APP_DATE_FORMAT=short
# APP_NUMBER_FORMAT=standard

49
app.config.ts
View file

@ -1,7 +1,52 @@
export default defineAppConfig({
ui: {
primary: "violet",
gray: "neutral",
primary: "slate",
gray: "neutral",
strategy: "class",
// High-contrast meter colors for accessibility
colors: {
green: {
50: '#f0fdf4',
500: '#10b981',
600: '#059669',
900: '#064e3b'
},
yellow: {
50: '#fefce8',
500: '#f59e0b',
600: '#d97706',
900: '#78350f'
},
red: {
50: '#fef2f2',
500: '#ef4444',
600: '#dc2626',
900: '#7f1d1d'
}
},
// Spacious card styling
card: {
base: 'overflow-hidden',
background: 'bg-white dark:bg-gray-900',
divide: 'divide-y divide-gray-200 dark:divide-gray-800',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
rounded: 'rounded-lg',
shadow: 'shadow',
body: {
base: '',
background: '',
padding: 'px-6 py-5 sm:p-6'
},
header: {
base: '',
background: '',
padding: 'px-6 py-4 sm:px-6'
},
footer: {
base: '',
background: '',
padding: 'px-6 py-4 sm:px-6'
}
}
},
});

66
app.vue Normal file
View file

@ -0,0 +1,66 @@
<template>
<UApp>
<UToaster />
<UContainer>
<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">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 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/' }"
>
Dashboard
</NuxtLink>
<NuxtLink
to="/mix"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/mix' }"
>
Revenue Mix
</NuxtLink>
<NuxtLink
to="/budget"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/budget' }"
>
Budget
</NuxtLink>
<NuxtLink
to="/scenarios"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/scenarios' }"
>
Scenarios
</NuxtLink>
<NuxtLink
to="/cash"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/cash' }"
>
Cash
</NuxtLink>
<NuxtLink
to="/glossary"
class="px-3 py-2 text-sm hover:bg-gray-100 dark:hover:bg-gray-800 rounded-md transition-colors"
:class="{ 'bg-gray-100 dark:bg-gray-800': $route.path === '/glossary' }"
>
Glossary
</NuxtLink>
</nav>
</div>
<ColorModeToggle />
</header>
<NuxtPage />
</UContainer>
<NuxtRouteAnnouncer />
</UApp>
</template>
<script setup lang="ts">
// noop
</script>

20
app/app.vue
View file

@ -1,20 +0,0 @@
<template>
<UApp>
<UNotifications />
<UContainer>
<header class="py-4 flex items-center justify-between">
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-rocket-launch" class="text-primary-500" />
<h1 class="font-semibold">Urgent Tools</h1>
</div>
<ColorModeToggle />
</header>
<NuxtPage />
</UContainer>
<NuxtRouteAnnouncer />
</UApp>
</template>
<script setup lang="ts">
// noop
</script>

25
app/composables/useFixtureIO.ts
View file

@ -1,25 +0,0 @@
import { useCounterStore } from '~/stores/counter'
export type AppSnapshot = {
counter: { count: number }
}
export function useFixtureIO() {
const exportAll = (): AppSnapshot => {
const counter = useCounterStore()
return {
counter: { count: counter.count }
}
}
const importAll = (snapshot: AppSnapshot) => {
const counter = useCounterStore()
if (snapshot?.counter) {
counter.$patch({ count: snapshot.counter.count ?? 0 })
}
}
return { exportAll, importAll }
}

62
app/pages/index.vue
View file

@ -1,62 +0,0 @@
<template>
<section class="py-8 space-y-6">
<div class="flex items-center justify-between">
<h2 class="text-2xl font-semibold">Welcome</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>
<UCard>
<div class="flex items-center gap-3">
<UButton icon="i-heroicons-plus" @click="store.increment"
>Increment</UButton
>
<div class="text-sm text-gray-500">
Count: {{ store.count }} (x2: {{ store.doubleCount }})
</div>
</div>
</UCard>
</section>
</template>
<script setup lang="ts">
import { useCounterStore } from "~/stores/counter";
const store = useCounterStore();
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>

18
app/stores/counter.ts
View file

@ -1,18 +0,0 @@
import { defineStore } from "pinia";
export const useCounterStore = defineStore("counter", {
state: () => ({
count: 0,
}),
getters: {
doubleCount: (state) => state.count * 2,
},
actions: {
increment() {
this.count += 1;
},
},
persist: {
paths: ["count"],
},
});

0
app/assets/css/main.css → assets/css/main.css
View file

0
app/components/ColorModeToggle.vue → components/ColorModeToggle.vue
View file

63
components/ConcentrationChip.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<UBadge
:color="badgeColor"
:variant="variant"
:size="size"
>
<UIcon v-if="showIcon" :name="iconName" class="mr-1" />
{{ displayText }}
</UBadge>
</template>
<script setup lang="ts">
type ConcentrationStatus = 'green' | 'yellow' | 'red'
interface Props {
status: ConcentrationStatus
topSourcePct?: number
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
size?: 'xs' | 'sm' | 'md' | 'lg'
showIcon?: boolean
showPercentage?: boolean
}
const props = withDefaults(defineProps<Props>(), {
variant: 'subtle',
size: 'sm',
showIcon: false,
showPercentage: true
})
const badgeColor = computed(() => {
return props.status
})
const displayText = computed(() => {
const statusTexts = {
green: 'Low Risk',
yellow: 'Medium Risk',
red: 'High Risk'
}
const baseText = statusTexts[props.status]
if (props.showPercentage && props.topSourcePct) {
return `${baseText} (${Math.round(props.topSourcePct)}%)`
}
return baseText
})
const iconName = computed(() => {
switch (props.status) {
case 'green':
return 'i-heroicons-check-circle'
case 'yellow':
return 'i-heroicons-exclamation-triangle'
case 'red':
return 'i-heroicons-x-circle'
default:
return 'i-heroicons-question-mark-circle'
}
})
</script>

101
components/CoverageMeter.vue Normal file
View file

@ -0,0 +1,101 @@
<template>
<UCard>
<div class="text-center space-y-3">
<div class="text-3xl font-bold" :class="textColorClass">
{{ coveragePct }}%
</div>
<div class="text-sm text-gray-600">{{ label }}</div>
<UProgress
:value="coveragePct"
:max="100"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-gray-200' } }"
:aria-label="`Coverage progress: ${coveragePct}% of target hours funded`"
role="progressbar"
:aria-valuenow="coveragePct"
aria-valuemin="0"
aria-valuemax="100"
:aria-valuetext="`${coveragePct}% coverage, ${statusText.toLowerCase()} funding level`"
/>
<UBadge
:color="badgeColor"
variant="subtle"
class="text-xs"
>
{{ statusText }}
</UBadge>
<div v-if="showHours" class="text-xs text-gray-500 space-y-1">
<div>Funded: {{ fundedHours }}h</div>
<div>Target: {{ targetHours }}h</div>
<div v-if="gapHours > 0">Gap: {{ gapHours }}h</div>
</div>
<p v-if="description" class="text-xs text-gray-500 mt-2">
{{ description }}
</p>
</div>
</UCard>
</template>
<script setup lang="ts">
interface Props {
fundedPaidHours: number
targetHours: number
label?: string
description?: string
showHours?: boolean
}
const props = withDefaults(defineProps<Props>(), {
label: 'Coverage vs Capacity',
showHours: true
})
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
const coveragePct = computed(() =>
Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
)
const status = computed(() => getCoverageStatus(coveragePct.value))
const fundedHours = computed(() => Math.round(props.fundedPaidHours))
const targetHours = computed(() => Math.round(props.targetHours))
const gapHours = computed(() => Math.max(0, targetHours.value - fundedHours.value))
const progressColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const badgeColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const textColorClass = computed(() => {
switch (status.value) {
case 'green': return 'text-green-600'
case 'yellow': return 'text-yellow-600'
case 'red': return 'text-red-600'
default: return 'text-gray-600'
}
})
const statusText = computed(() => {
switch (status.value) {
case 'green': return 'Well Funded'
case 'yellow': return 'Moderate'
case 'red': return 'Underfunded'
default: return 'Unknown'
}
})
</script>

54
components/GlossaryTooltip.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<UTooltip
:text="definition"
:ui="{
background: 'bg-white dark:bg-gray-900',
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
rounded: 'rounded-lg',
shadow: 'shadow-lg',
base: 'px-3 py-2 text-sm max-w-xs'
}"
:popper="{ arrow: true }"
>
<template #text>
<div class="space-y-2">
<div class="font-medium">{{ term }}</div>
<div class="text-gray-600">{{ definition }}</div>
<NuxtLink
:to="`/glossary#${termId}`"
class="text-primary-600 hover:text-primary-700 text-xs inline-flex items-center gap-1"
@click="$emit('glossary-click')"
>
<UIcon name="i-heroicons-book-open" class="w-3 h-3" />
See full definition
</NuxtLink>
</div>
</template>
<span
class="underline decoration-dotted decoration-gray-400 hover:decoration-primary-500 cursor-help"
:class="{ 'font-medium': emphasis }"
:tabindex="0"
:aria-describedby="`tooltip-${termId}`"
@keydown.enter="$emit('glossary-click')"
@keydown.space.prevent="$emit('glossary-click')"
>
<slot>{{ term }}</slot>
</span>
</UTooltip>
</template>
<script setup lang="ts">
interface Props {
term: string
termId: string
definition: string
emphasis?: boolean
}
const props = withDefaults(defineProps<Props>(), {
emphasis: false
})
defineEmits(['glossary-click'])
</script>

54
components/PayRelationshipChip.vue Normal file
View file

@ -0,0 +1,54 @@
<template>
<UBadge
:color="badgeColor"
:variant="variant"
:size="size"
>
{{ displayText }}
</UBadge>
</template>
<script setup lang="ts">
type PayRelationship = 'FullyPaid' | 'Hybrid' | 'Supplemental' | 'VolunteerOrDeferred'
interface Props {
relationship: PayRelationship
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
size?: 'xs' | 'sm' | 'md' | 'lg'
}
const props = withDefaults(defineProps<Props>(), {
variant: 'subtle',
size: 'sm'
})
const badgeColor = computed(() => {
switch (props.relationship) {
case 'FullyPaid':
return 'green'
case 'Hybrid':
return 'blue'
case 'Supplemental':
return 'yellow'
case 'VolunteerOrDeferred':
return 'gray'
default:
return 'gray'
}
})
const displayText = computed(() => {
switch (props.relationship) {
case 'FullyPaid':
return 'Fully Paid'
case 'Hybrid':
return 'Hybrid'
case 'Supplemental':
return 'Supplemental'
case 'VolunteerOrDeferred':
return 'Volunteer'
default:
return 'Unknown'
}
})
</script>

102
components/ReserveMeter.vue Normal file
View file

@ -0,0 +1,102 @@
<template>
<UCard>
<div class="text-center space-y-3">
<div class="text-3xl font-bold" :class="textColorClass">
{{ progressPct }}%
</div>
<div class="text-sm text-gray-600">{{ label }}</div>
<UProgress
:value="progressPct"
:max="100"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-gray-200' } }"
:aria-label="`Savings progress: ${progressPct}% of target reached`"
role="progressbar"
:aria-valuenow="progressPct"
aria-valuemin="0"
aria-valuemax="100"
:aria-valuetext="`${progressPct}% of savings target, ${statusText.toLowerCase()} status`"
/>
<UBadge
:color="badgeColor"
variant="subtle"
class="text-xs"
>
{{ statusText }}
</UBadge>
<div v-if="showAmounts" class="text-xs text-gray-500 space-y-1">
<div>Current: €{{ currentSavings.toLocaleString() }}</div>
<div>Target: €{{ targetAmount.toLocaleString() }}</div>
<div v-if="shortfall > 0">Need: €{{ shortfall.toLocaleString() }}</div>
</div>
<p v-if="description" class="text-xs text-gray-500 mt-2">
{{ description }}
</p>
</div>
</UCard>
</template>
<script setup lang="ts">
interface Props {
currentSavings: number
savingsTargetMonths: number
monthlyBurn: number
label?: string
description?: string
showAmounts?: boolean
}
const props = withDefaults(defineProps<Props>(), {
label: 'Savings Progress',
showAmounts: true
})
const { analyzeReserveProgress } = useReserveProgress()
const analysis = computed(() =>
analyzeReserveProgress(props.currentSavings, props.savingsTargetMonths, props.monthlyBurn)
)
const progressPct = computed(() => analysis.value.progressPct)
const status = computed(() => analysis.value.status)
const targetAmount = computed(() => analysis.value.targetAmount)
const shortfall = computed(() => analysis.value.shortfall)
const currentSavings = computed(() => props.currentSavings)
const progressColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const badgeColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const textColorClass = computed(() => {
switch (status.value) {
case 'green': return 'text-green-600'
case 'yellow': return 'text-yellow-600'
case 'red': return 'text-red-600'
default: return 'text-gray-600'
}
})
const statusText = computed(() => {
switch (status.value) {
case 'green': return 'On Track'
case 'yellow': return 'Building'
case 'red': return 'Below Target'
default: return 'Unknown'
}
})
</script>

39
components/RestrictionChip.vue Normal file
View file

@ -0,0 +1,39 @@
<template>
<UBadge
:color="badgeColor"
:variant="variant"
:size="size"
>
{{ displayText }}
</UBadge>
</template>
<script setup lang="ts">
type Restriction = 'Restricted' | 'General'
interface Props {
restriction: Restriction
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
size?: 'xs' | 'sm' | 'md' | 'lg'
}
const props = withDefaults(defineProps<Props>(), {
variant: 'subtle',
size: 'sm'
})
const badgeColor = computed(() => {
switch (props.restriction) {
case 'Restricted':
return 'orange'
case 'General':
return 'green'
default:
return 'gray'
}
})
const displayText = computed(() => {
return props.restriction
})
</script>

41
components/RiskBandChip.vue Normal file
View file

@ -0,0 +1,41 @@
<template>
<UBadge
:color="badgeColor"
:variant="variant"
:size="size"
>
{{ displayText }}
</UBadge>
</template>
<script setup lang="ts">
type RiskBand = 'Low' | 'Medium' | 'High'
interface Props {
risk: RiskBand
variant?: 'solid' | 'outline' | 'soft' | 'subtle'
size?: 'xs' | 'sm' | 'md' | 'lg'
}
const props = withDefaults(defineProps<Props>(), {
variant: 'subtle',
size: 'sm'
})
const badgeColor = computed(() => {
switch (props.risk) {
case 'Low':
return 'green'
case 'Medium':
return 'yellow'
case 'High':
return 'red'
default:
return 'gray'
}
})
const displayText = computed(() => {
return `${props.risk} Risk`
})
</script>

91
components/RunwayMeter.vue Normal file
View file

@ -0,0 +1,91 @@
<template>
<UCard>
<div class="text-center space-y-3">
<div class="text-3xl font-bold" :class="textColorClass">
{{ formattedValue }}
</div>
<div class="text-sm text-gray-600">{{ label }}</div>
<UProgress
:value="progressValue"
:max="maxValue"
:color="progressColor"
class="mt-2"
:ui="{ progress: { background: 'bg-gray-200' } }"
:aria-label="`Runway progress: ${formattedValue} out of ${maxValue} months maximum`"
role="progressbar"
:aria-valuenow="progressValue"
:aria-valuemin="0"
:aria-valuemax="maxValue"
:aria-valuetext="`${formattedValue} runway, ${statusText.toLowerCase()} status`"
/>
<UBadge
:color="badgeColor"
variant="subtle"
class="text-xs"
>
{{ statusText }}
</UBadge>
<p v-if="description" class="text-xs text-gray-500 mt-2">
{{ description }}
</p>
</div>
</UCard>
</template>
<script setup lang="ts">
interface Props {
months: number
label?: string
description?: string
maxMonths?: number
}
const props = withDefaults(defineProps<Props>(), {
label: 'Runway',
maxMonths: 12
})
const { formatRunway, getRunwayStatus } = useRunway()
const formattedValue = computed(() => formatRunway(props.months))
const status = computed(() => getRunwayStatus(props.months))
const progressValue = computed(() => Math.min(props.months, props.maxMonths))
const maxValue = computed(() => props.maxMonths)
const progressColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const badgeColor = computed(() => {
switch (status.value) {
case 'green': return 'green'
case 'yellow': return 'yellow'
case 'red': return 'red'
default: return 'gray'
}
})
const textColorClass = computed(() => {
switch (status.value) {
case 'green': return 'text-green-600'
case 'yellow': return 'text-yellow-600'
case 'red': return 'text-red-600'
default: return 'text-gray-600'
}
})
const statusText = computed(() => {
switch (status.value) {
case 'green': return 'Healthy'
case 'yellow': return 'Caution'
case 'red': return 'Critical'
default: return 'Unknown'
}
})
</script>

204
components/WizardCostsStep.vue Normal file
View file

@ -0,0 +1,204 @@
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-4">Operating Costs</h3>
<p class="text-gray-600 mb-6">
Add your monthly overhead costs. Production costs are handled
separately.
</p>
</div>
<!-- Overhead Costs -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="font-medium">Monthly Overhead</h4>
<UButton size="sm" @click="addOverheadCost" icon="i-heroicons-plus">
Add Cost
</UButton>
</div>
<div
v-if="overheadCosts.length === 0"
class="text-center py-8 text-gray-500">
<p>No overhead costs added yet.</p>
<p class="text-sm">
Add costs like rent, tools, insurance, or other recurring expenses.
</p>
</div>
<div
v-for="cost in overheadCosts"
:key="cost.id"
class="p-4 border border-gray-200 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<UFormField label="Cost Name" required>
<UInput
v-model="cost.name"
placeholder="Office rent"
@update:model-value="saveCost(cost)"
@blur="saveCost(cost)" />
</UFormField>
<UFormField label="Monthly Amount" required>
<UInput
v-model.number="cost.amount"
type="number"
min="0"
step="0.01"
placeholder="800.00"
@update:model-value="saveCost(cost)"
@blur="saveCost(cost)">
<template #leading>
<span class="text-gray-500">€</span>
</template>
</UInput>
</UFormField>
<UFormField label="Category">
<USelect
v-model="cost.category"
:items="categoryOptions"
@update:model-value="saveCost(cost)" />
</UFormField>
</div>
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
<UButton
size="sm"
variant="ghost"
color="red"
@click="removeCost(cost.id)">
Remove
</UButton>
</div>
</div>
</div>
<!-- Cost Categories -->
<div class="bg-blue-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-2 text-blue-900">Cost Categories</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
<div>
<span class="font-medium text-blue-800">Operations:</span>
<span class="text-blue-700 ml-1">Rent, utilities, insurance</span>
</div>
<div>
<span class="font-medium text-blue-800">Tools:</span>
<span class="text-blue-700 ml-1">Software, hardware, licenses</span>
</div>
<div>
<span class="font-medium text-blue-800">Professional:</span>
<span class="text-blue-700 ml-1">Legal, accounting, consulting</span>
</div>
<div>
<span class="font-medium text-blue-800">Other:</span>
<span class="text-blue-700 ml-1">Miscellaneous costs</span>
</div>
</div>
</div>
<!-- Summary -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-2">Cost Summary</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<span class="text-gray-600">Total items:</span>
<span class="font-medium ml-1">{{ overheadCosts.length }}</span>
</div>
<div>
<span class="text-gray-600">Monthly overhead:</span>
<span class="font-medium ml-1">€{{ totalMonthlyCosts }}</span>
</div>
<div>
<span class="text-gray-600">Largest cost:</span>
<span class="font-medium ml-1">€{{ largestCost }}</span>
</div>
<div>
<span class="text-gray-600">Avg per item:</span>
<span class="font-medium ml-1">€{{ avgCostPerItem }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
import { storeToRefs } from "pinia";
const emit = defineEmits<{
"save-status": [status: "saving" | "saved" | "error"];
}>();
// Store
const budgetStore = useBudgetStore();
const { overheadCosts } = storeToRefs(budgetStore);
// Category options
const categoryOptions = [
{ label: "Operations", value: "Operations" },
{ label: "Tools & Software", value: "Tools" },
{ label: "Professional Services", value: "Professional" },
{ label: "Marketing", value: "Marketing" },
{ label: "Other", value: "Other" },
];
// Computeds
const totalMonthlyCosts = computed(() =>
overheadCosts.value.reduce((sum, cost) => sum + (cost.amount || 0), 0)
);
const largestCost = computed(() => {
if (overheadCosts.value.length === 0) return 0;
return Math.max(...overheadCosts.value.map((c) => c.amount || 0));
});
const avgCostPerItem = computed(() => {
if (overheadCosts.value.length === 0) return 0;
return Math.round(totalMonthlyCosts.value / overheadCosts.value.length);
});
// Live-write with debounce
const debouncedSave = useDebounceFn((cost: any) => {
emit("save-status", "saving");
try {
// Find and update existing cost
const existingCost = overheadCosts.value.find((c) => c.id === cost.id);
if (existingCost) {
// Store will handle reactivity through the ref
Object.assign(existingCost, cost);
}
emit("save-status", "saved");
} catch (error) {
console.error("Failed to save cost:", error);
emit("save-status", "error");
}
}, 300);
function saveCost(cost: any) {
if (cost.name && cost.amount >= 0) {
debouncedSave(cost);
}
}
function addOverheadCost() {
const newCost = {
id: Date.now().toString(),
name: "",
amount: 0,
category: "Operations",
recurring: true,
};
budgetStore.addOverheadLine({
name: newCost.name,
amountMonthly: newCost.amount,
category: newCost.category,
});
}
function removeCost(id: string) {
budgetStore.removeOverheadLine(id);
}
</script>

196
components/WizardMembersStep.vue Normal file
View file

@ -0,0 +1,196 @@
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-4">Members</h3>
<p class="text-gray-600 mb-6">Add co-op members and their capacity.</p>
</div>
<!-- Members List -->
<div class="space-y-4">
<div
v-for="(member, index) in members"
:key="member.id"
class="p-4 border border-gray-200 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Basic Info -->
<div class="space-y-4">
<UFormField label="Display Name" required>
<UInput
v-model="member.displayName"
placeholder="Alex Chen"
@update:model-value="saveMember(member)"
@blur="saveMember(member)" />
</UFormField>
<UFormField label="Role Focus">
<UInput
v-model="member.roleFocus"
placeholder="Technical Lead"
@update:model-value="saveMember(member)"
@blur="saveMember(member)" />
</UFormField>
<UFormField label="Pay Relationship" required>
<USelect
v-model="member.payRelationship"
:items="payRelationshipOptions"
@update:model-value="saveMember(member)" />
</UFormField>
</div>
<!-- Capacity & Settings -->
<div class="space-y-4">
<UFormField label="Target Hours/Month" required>
<UInput
v-model.number="member.capacity.targetHours"
type="number"
min="0"
placeholder="120"
@update:model-value="saveMember(member)"
@blur="saveMember(member)" />
</UFormField>
<UFormField label="External Coverage %">
<UInput
v-model.number="member.externalCoveragePct"
type="number"
min="0"
max="100"
placeholder="60"
@update:model-value="saveMember(member)"
@blur="saveMember(member)" />
</UFormField>
<UFormField label="Risk Band">
<USelect
v-model="member.riskBand"
:items="riskBandOptions"
@update:model-value="saveMember(member)" />
</UFormField>
</div>
</div>
<!-- Actions -->
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
<UButton
size="sm"
variant="ghost"
color="red"
@click="removeMember(member.id)">
Remove
</UButton>
</div>
</div>
<!-- Add Member -->
<UButton
variant="outline"
@click="addMember"
class="w-full"
icon="i-heroicons-plus">
Add Member
</UButton>
</div>
<!-- Summary -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-2">Capacity Summary</h4>
<div class="grid grid-cols-3 gap-4 text-sm">
<div>
<span class="text-gray-600">Members:</span>
<span class="font-medium ml-1">{{ members.length }}</span>
</div>
<div>
<span class="text-gray-600">Total Hours:</span>
<span class="font-medium ml-1">{{ totalTargetHours }}h</span>
</div>
<div>
<span class="text-gray-600">Avg External:</span>
<span class="font-medium ml-1">{{ avgExternalCoverage }}%</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
import { storeToRefs } from "pinia";
const emit = defineEmits<{
"save-status": [status: "saving" | "saved" | "error"];
}>();
// Store
const membersStore = useMembersStore();
const { members } = storeToRefs(membersStore);
// Options
const payRelationshipOptions = [
{ label: "Fully Paid", value: "FullyPaid" },
{ label: "Hybrid", value: "Hybrid" },
{ label: "Supplemental", value: "Supplemental" },
{ label: "Volunteer/Deferred", value: "VolunteerOrDeferred" },
];
const riskBandOptions = [
{ label: "Low Risk", value: "Low" },
{ label: "Medium Risk", value: "Medium" },
{ label: "High Risk", value: "High" },
];
// Computeds
const totalTargetHours = computed(() =>
members.value.reduce((sum, m) => sum + (m.capacity?.targetHours || 0), 0)
);
const avgExternalCoverage = computed(() => {
if (members.value.length === 0) return 0;
const total = members.value.reduce(
(sum, m) => sum + (m.externalCoveragePct || 0),
0
);
return Math.round(total / members.value.length);
});
// Live-write with debounce
const debouncedSave = useDebounceFn((member: any) => {
emit("save-status", "saving");
try {
membersStore.upsertMember(member);
emit("save-status", "saved");
} catch (error) {
console.error("Failed to save member:", error);
emit("save-status", "error");
}
}, 300);
function saveMember(member: any) {
debouncedSave(member);
}
function addMember() {
const newMember = {
id: Date.now().toString(),
displayName: "",
roleFocus: "",
payRelationship: "FullyPaid",
capacity: {
minHours: 0,
targetHours: 0,
maxHours: 0,
},
riskBand: "Medium",
externalCoveragePct: 0,
privacyNeeds: "aggregate_ok",
deferredHours: 0,
quarterlyDeferredCap: 240,
};
membersStore.upsertMember(newMember);
}
function removeMember(id: string) {
membersStore.removeMember(id);
}
</script>

264
components/WizardPoliciesStep.vue Normal file
View file

@ -0,0 +1,264 @@
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-4">Wage & Policies</h3>
<p class="text-gray-600 mb-6">
Set your equal hourly wage and key policies.
</p>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<!-- Core Wage Settings -->
<UCard title="Equal Wage">
<div class="space-y-4">
<UFormField label="Hourly Wage" required>
<UInput
v-model.number="wageModel"
type="number"
min="0"
step="0.01"
placeholder="25.00">
<template #leading>
<span class="text-gray-500">€</span>
</template>
</UInput>
</UFormField>
<UFormField
label="On-costs %"
hint="Employer taxes, benefits, payroll fees">
<UInput
v-model.number="oncostModel"
type="number"
min="0"
max="100"
placeholder="25">
<template #trailing>
<span class="text-gray-500">%</span>
</template>
</UInput>
</UFormField>
</div>
</UCard>
<!-- Cash Management -->
<UCard title="Cash Management">
<div class="space-y-4">
<UFormField
label="Savings Target"
hint="Months of burn to keep as reserves">
<UInput
v-model.number="savingsMonthsModel"
type="number"
min="0"
step="0.5"
placeholder="3">
<template #trailing>
<span class="text-gray-500">months</span>
</template>
</UInput>
</UFormField>
<UFormField
label="Minimum Cash Cushion"
hint="Weekly floor we won't breach">
<UInput
v-model.number="minCushionModel"
type="number"
min="0"
placeholder="3000">
<template #leading>
<span class="text-gray-500">€</span>
</template>
</UInput>
</UFormField>
</div>
</UCard>
<!-- Deferred Pay Policy -->
<UCard title="Deferred Pay">
<div class="space-y-4">
<UFormField
label="Quarterly Cap"
hint="Max deferred hours per member per quarter">
<UInput
v-model.number="deferredCapModel"
type="number"
min="0"
placeholder="240">
<template #trailing>
<span class="text-gray-500">hours</span>
</template>
</UInput>
</UFormField>
<UFormField
label="Sunset Period"
hint="Months after which deferred pay expires">
<UInput
v-model.number="deferredSunsetModel"
type="number"
min="0"
placeholder="12">
<template #trailing>
<span class="text-gray-500">months</span>
</template>
</UInput>
</UFormField>
</div>
</UCard>
<!-- Volunteer Scope -->
<UCard title="Volunteer Scope">
<div class="space-y-4">
<UFormField label="Allowed Flows" hint="What work can be done unpaid">
<div class="space-y-2">
<UCheckbox
v-for="flow in availableFlows"
:key="flow.value"
:id="'volunteer-flow-' + flow.value"
:name="flow.value"
:value="flow.value"
:checked="selectedVolunteerFlows.includes(flow.value)"
:label="flow.label"
@change="toggleFlow(flow.value, $event)" />
</div>
</UFormField>
</div>
</UCard>
</div>
<!-- Summary -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-2">Policy Summary</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<span class="text-gray-600">Hourly wage:</span>
<span class="font-medium ml-1">€{{ wageModel || 0 }}</span>
</div>
<div>
<span class="text-gray-600">On-costs:</span>
<span class="font-medium ml-1">{{ oncostModel || 0 }}%</span>
</div>
<div>
<span class="text-gray-600">Savings target:</span>
<span class="font-medium ml-1"
>{{ savingsMonthsModel || 0 }} months</span
>
</div>
<div>
<span class="text-gray-600">Cash cushion:</span>
<span class="font-medium ml-1">€{{ minCushionModel || 0 }}</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
const emit = defineEmits<{
"save-status": [status: "saving" | "saved" | "error"];
}>();
// Store
const policiesStore = usePoliciesStore();
function parseNumberInput(val: unknown): number {
if (typeof val === "number") return val;
if (typeof val === "string") {
const cleaned = val.replace(/,/g, ".").replace(/[^0-9.\-]/g, "");
const parsed = parseFloat(cleaned);
return Number.isFinite(parsed) ? parsed : 0;
}
return 0;
}
// Two-way computed models bound directly to the store
const wageModel = computed({
get: () => unref(policiesStore.equalHourlyWage) as number,
set: (val: number | string) =>
policiesStore.setEqualWage(parseNumberInput(val)),
});
const oncostModel = computed({
get: () => unref(policiesStore.payrollOncostPct) as number,
set: (val: number | string) =>
policiesStore.setOncostPct(parseNumberInput(val)),
});
const savingsMonthsModel = computed({
get: () => unref(policiesStore.savingsTargetMonths) as number,
set: (val: number | string) =>
policiesStore.setSavingsTargetMonths(parseNumberInput(val)),
});
const minCushionModel = computed({
get: () => unref(policiesStore.minCashCushionAmount) as number,
set: (val: number | string) =>
policiesStore.setMinCashCushion(parseNumberInput(val)),
});
const deferredCapModel = computed({
get: () => unref(policiesStore.deferredCapHoursPerQtr) as number,
set: (val: number | string) =>
policiesStore.setDeferredCap(parseNumberInput(val)),
});
const deferredSunsetModel = computed({
get: () => unref(policiesStore.deferredSunsetMonths) as number,
set: (val: number | string) =>
policiesStore.setDeferredSunset(parseNumberInput(val)),
});
// Remove old local sync and debounce saving; direct v-model handles persistence
// Volunteer flows
const availableFlows = [
{ label: "Care Work", value: "Care" },
{ label: "Shared Learning", value: "SharedLearning" },
{ label: "Community Building", value: "Community" },
{ label: "Outreach", value: "Outreach" },
];
const selectedVolunteerFlows = ref([
...policiesStore.volunteerScope.allowedFlows,
]);
// Minimal save-status feedback on changes
function notifySaved() {
emit("save-status", "saved");
}
function toggleFlow(flowValue: string, event: any) {
const checked = event.target ? event.target.checked : event;
console.log(
"toggleFlow called:",
flowValue,
checked,
"current array:",
selectedVolunteerFlows.value
);
if (checked) {
if (!selectedVolunteerFlows.value.includes(flowValue)) {
selectedVolunteerFlows.value.push(flowValue);
}
} else {
const index = selectedVolunteerFlows.value.indexOf(flowValue);
if (index > -1) {
selectedVolunteerFlows.value.splice(index, 1);
}
}
console.log("after toggle:", selectedVolunteerFlows.value);
saveVolunteerScope();
}
function saveVolunteerScope() {
emit("save-status", "saving");
try {
policiesStore.setVolunteerScope(selectedVolunteerFlows.value);
emit("save-status", "saved");
} catch (error) {
console.error("Failed to save volunteer scope:", error);
emit("save-status", "error");
}
}
</script>

405
components/WizardRevenueStep.vue Normal file
View file

@ -0,0 +1,405 @@
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-4">Revenue Streams</h3>
<p class="text-gray-600 mb-6">
Plan your revenue mix with target percentages and payout terms.
</p>
</div>
<!-- Revenue Streams -->
<div class="space-y-4">
<div class="flex items-center justify-between">
<h4 class="font-medium">Revenue Sources</h4>
<UButton size="sm" @click="addRevenueStream" icon="i-heroicons-plus">
Add Stream
</UButton>
</div>
<div v-if="streams.length === 0" class="text-center py-8 text-gray-500">
<p>No revenue streams added yet.</p>
<p class="text-sm">
Add streams like client work, grants, sales, or other income sources.
</p>
</div>
<div
v-for="stream in streams"
:key="stream.id"
class="p-4 border border-gray-200 rounded-lg">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- Basic Info -->
<div class="space-y-4">
<UFormField label="Stream Name" required>
<USelectMenu
v-model="stream.name"
:items="nameOptionsByCategory[stream.category] || []"
placeholder="Select or type a source name"
creatable
searchable
@update:model-value="saveStream(stream)" />
</UFormField>
<UFormField label="Category" required>
<USelect
v-model="stream.category"
:items="categoryOptions"
@update:model-value="saveStream(stream)" />
</UFormField>
<UFormField label="Certainty Level">
<USelect
v-model="stream.certainty"
:items="certaintyOptions"
@update:model-value="saveStream(stream)" />
</UFormField>
</div>
<!-- Financial Details -->
<div class="space-y-4">
<UFormField label="Target %" required>
<UInput
v-model.number="stream.targetPct"
type="number"
min="0"
max="100"
placeholder="40"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)">
<template #trailing>
<span class="text-gray-500">%</span>
</template>
</UInput>
</UFormField>
<UFormField label="Monthly Target">
<UInput
v-model.number="stream.targetMonthlyAmount"
type="number"
min="0"
step="0.01"
placeholder="5000.00"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)">
<template #leading>
<span class="text-gray-500">€</span>
</template>
</UInput>
</UFormField>
<UFormField
label="Payout Delay"
hint="Days from earning to payment">
<UInput
v-model.number="stream.payoutDelayDays"
type="number"
min="0"
placeholder="30"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)">
<template #trailing>
<span class="text-gray-500">days</span>
</template>
</UInput>
</UFormField>
</div>
</div>
<!-- Advanced Details (Collapsible) -->
<UAccordion
:items="[
{ label: 'Advanced Settings', slot: 'advanced-' + stream.id },
]"
class="mt-4">
<template #[`advanced-${stream.id}`]>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 pt-2">
<UFormField label="Platform Fee %">
<UInput
v-model.number="stream.platformFeePct"
type="number"
min="0"
max="100"
placeholder="3"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)">
<template #trailing>
<span class="text-gray-500">%</span>
</template>
</UInput>
</UFormField>
<UFormField label="Revenue Share %">
<UInput
v-model.number="stream.revenueSharePct"
type="number"
min="0"
max="100"
placeholder="0"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)">
<template #trailing>
<span class="text-gray-500">%</span>
</template>
</UInput>
</UFormField>
<UFormField label="Payment Terms">
<UInput
v-model="stream.terms"
placeholder="Net 30"
@update:model-value="saveStream(stream)"
@blur="saveStream(stream)" />
</UFormField>
<UFormField label="Fund Restrictions">
<USelect
v-model="stream.restrictions"
:items="restrictionOptions"
@update:model-value="saveStream(stream)" />
</UFormField>
</div>
</template>
</UAccordion>
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
<UButton
size="sm"
variant="ghost"
color="red"
@click="removeStream(stream.id)">
Remove
</UButton>
</div>
</div>
</div>
<!-- Mix Validation -->
<div v-if="streams.length > 0" class="bg-yellow-50 rounded-lg p-4">
<div class="flex items-center gap-2 mb-2">
<UIcon
name="i-heroicons-exclamation-triangle"
class="w-4 h-4 text-yellow-600" />
<h4 class="font-medium text-sm text-yellow-900">Revenue Mix Status</h4>
</div>
<div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
<div>
<span class="text-yellow-700">Total target %:</span>
<span
class="font-medium ml-1"
:class="totalTargetPct === 100 ? 'text-green-700' : 'text-red-700'">
{{ totalTargetPct }}%
</span>
</div>
<div>
<span class="text-yellow-700">Top source:</span>
<span class="font-medium ml-1">{{ topSourcePct }}%</span>
</div>
<div>
<span class="text-yellow-700">Concentration:</span>
<UBadge
:color="concentrationColor"
variant="subtle"
size="xs"
class="ml-1">
{{ concentrationStatus }}
</UBadge>
</div>
</div>
<p v-if="totalTargetPct !== 100" class="text-xs text-yellow-700 mt-2">
Target percentages should add up to 100%. Currently
{{ totalTargetPct > 100 ? "over" : "under" }} by
{{ Math.abs(100 - totalTargetPct) }}%.
</p>
</div>
<!-- Summary -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-2">Revenue Summary</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
<div>
<span class="text-gray-600">Total streams:</span>
<span class="font-medium ml-1">{{ streams.length }}</span>
</div>
<div>
<span class="text-gray-600">Monthly target:</span>
<span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
</div>
<div>
<span class="text-gray-600">Avg payout delay:</span>
<span class="font-medium ml-1">{{ avgPayoutDelay }} days</span>
</div>
<div>
<span class="text-gray-600">Committed %:</span>
<span class="font-medium ml-1">{{ committedPercentage }}%</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { useDebounceFn } from "@vueuse/core";
import { storeToRefs } from "pinia";
const emit = defineEmits<{
"save-status": [status: "saving" | "saved" | "error"];
}>();
// Store
const streamsStore = useStreamsStore();
const { streams } = storeToRefs(streamsStore);
// Options
const categoryOptions = [
{ label: "Games & Products", value: "games" },
{ label: "Services & Contracts", value: "services" },
{ label: "Grants & Funding", value: "grants" },
{ label: "Community Support", value: "community" },
{ label: "Partnerships", value: "partnerships" },
{ label: "Investment Income", value: "investment" },
{ label: "In-Kind Contributions", value: "inkind" },
];
// Suggested names per category
const nameOptionsByCategory: Record<string, string[]> = {
games: [
"Direct sales",
"Platform revenue share",
"DLC/expansions",
"Merchandise",
],
services: [
"Contract development",
"Consulting",
"Workshops/teaching",
"Technical services",
],
grants: [
"Government funding",
"Arts council grants",
"Foundation support",
"Research grants",
],
community: [
"Patreon/subscriptions",
"Crowdfunding",
"Donations",
"Mutual aid received",
],
partnerships: [
"Corporate partnerships",
"Academic partnerships",
"Sponsorships",
],
investment: ["Impact investment", "Venture capital", "Loans"],
inkind: [
"Office space",
"Equipment/hardware",
"Software licenses",
"Professional services",
"Marketing/PR services",
"Legal services",
],
};
const certaintyOptions = [
{ label: "Committed", value: "Committed" },
{ label: "Probable", value: "Probable" },
{ label: "Aspirational", value: "Aspirational" },
];
const restrictionOptions = [
{ label: "General Use", value: "General" },
{ label: "Restricted Use", value: "Restricted" },
];
// Computeds
const totalTargetPct = computed(() => streamsStore.totalTargetPct);
const totalMonthlyTarget = computed(() =>
Math.round(
streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0)
)
);
const topSourcePct = computed(() => {
if (streams.value.length === 0) return 0;
return Math.max(...streams.value.map((s) => s.targetPct || 0));
});
const concentrationStatus = computed(() => {
const topPct = topSourcePct.value;
if (topPct > 50) return "High Risk";
if (topPct > 35) return "Medium Risk";
return "Low Risk";
});
const concentrationColor = computed(() => {
const status = concentrationStatus.value;
if (status === "High Risk") return "red";
if (status === "Medium Risk") return "yellow";
return "green";
});
const avgPayoutDelay = computed(() => {
if (streams.value.length === 0) return 0;
const total = streams.value.reduce(
(sum, s) => sum + (s.payoutDelayDays || 0),
0
);
return Math.round(total / streams.value.length);
});
const committedPercentage = computed(() => {
const committedStreams = streams.value.filter(
(s) => s.certainty === "Committed"
);
const committedPct = committedStreams.reduce(
(sum, s) => sum + (s.targetPct || 0),
0
);
return Math.round(committedPct);
});
// Live-write with debounce
const debouncedSave = useDebounceFn((stream: any) => {
emit("save-status", "saving");
try {
streamsStore.upsertStream(stream);
emit("save-status", "saved");
} catch (error) {
console.error("Failed to save stream:", error);
emit("save-status", "error");
}
}, 300);
function saveStream(stream: any) {
if (stream.name && stream.category && stream.targetPct >= 0) {
debouncedSave(stream);
}
}
function addRevenueStream() {
const newStream = {
id: Date.now().toString(),
name: "",
category: "games",
subcategory: "",
targetPct: 0,
targetMonthlyAmount: 0,
certainty: "Aspirational",
payoutDelayDays: 0,
terms: "",
revenueSharePct: 0,
platformFeePct: 0,
restrictions: "General",
seasonalityWeights: new Array(12).fill(1),
effortHoursPerMonth: 0,
};
streamsStore.upsertStream(newStream);
}
function removeStream(id: string) {
streamsStore.removeStream(id);
}
</script>

319
components/WizardReviewStep.vue Normal file
View file

@ -0,0 +1,319 @@
<template>
<div class="space-y-6">
<div>
<h3 class="text-lg font-medium mb-4">Review & Complete</h3>
<p class="text-gray-600 mb-6">Review your setup and complete the wizard to start using your co-op tool.</p>
</div>
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
<!-- Members Summary -->
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h4 class="font-medium">Members ({{ members.length }})</h4>
<UBadge :color="membersValid ? 'green' : 'red'" variant="subtle">
{{ membersValid ? 'Valid' : 'Incomplete' }}
</UBadge>
</div>
</template>
<div class="space-y-3">
<div v-for="member in members" :key="member.id" class="flex items-center justify-between text-sm">
<div>
<span class="font-medium">{{ member.displayName || 'Unnamed Member' }}</span>
<span v-if="member.roleFocus" class="text-gray-500 ml-1">({{ member.roleFocus }})</span>
</div>
<div class="text-right text-xs text-gray-500">
<div>{{ member.payRelationship || 'No relationship set' }}</div>
<div>{{ member.capacity?.targetHours || 0 }}h/month</div>
</div>
</div>
<div class="pt-3 border-t border-gray-100">
<div class="grid grid-cols-2 gap-4 text-xs">
<div>
<span class="text-gray-600">Total capacity:</span>
<span class="font-medium ml-1">{{ totalCapacity }}h</span>
</div>
<div>
<span class="text-gray-600">Avg external:</span>
<span class="font-medium ml-1">{{ avgExternal }}%</span>
</div>
</div>
</div>
</div>
</UCard>
<!-- Policies Summary -->
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h4 class="font-medium">Policies</h4>
<UBadge :color="policiesValid ? 'green' : 'red'" variant="subtle">
{{ policiesValid ? 'Valid' : 'Incomplete' }}
</UBadge>
</div>
</template>
<div class="space-y-3 text-sm">
<div class="flex justify-between">
<span class="text-gray-600">Equal hourly wage:</span>
<span class="font-medium">€{{ policies.equalHourlyWage || 0 }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Payroll on-costs:</span>
<span class="font-medium">{{ policies.payrollOncostPct || 0 }}%</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Savings target:</span>
<span class="font-medium">{{ policies.savingsTargetMonths || 0 }} months</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Cash cushion:</span>
<span class="font-medium">€{{ policies.minCashCushionAmount || 0 }}</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Deferred cap:</span>
<span class="font-medium">{{ policies.deferredCapHoursPerQtr || 0 }}h/qtr</span>
</div>
<div class="flex justify-between">
<span class="text-gray-600">Volunteer flows:</span>
<span class="font-medium">{{ policies.volunteerScope.allowedFlows.length }} types</span>
</div>
</div>
</UCard>
<!-- Costs Summary -->
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h4 class="font-medium">Overhead Costs ({{ overheadCosts.length }})</h4>
<UBadge color="blue" variant="subtle">Optional</UBadge>
</div>
</template>
<div v-if="overheadCosts.length === 0" class="text-sm text-gray-500 text-center py-4">
No overhead costs added
</div>
<div v-else class="space-y-2">
<div v-for="cost in overheadCosts.slice(0, 3)" :key="cost.id" class="flex justify-between text-sm">
<span class="text-gray-700">{{ cost.name }}</span>
<span class="font-medium">€{{ cost.amount || 0 }}</span>
</div>
<div v-if="overheadCosts.length > 3" class="text-xs text-gray-500">
+{{ overheadCosts.length - 3 }} more items
</div>
<div class="pt-2 border-t border-gray-100">
<div class="flex justify-between text-sm font-medium">
<span>Monthly total:</span>
<span>€{{ totalMonthlyCosts }}</span>
</div>
</div>
</div>
</UCard>
<!-- Revenue Summary -->
<UCard>
<template #header>
<div class="flex items-center justify-between">
<h4 class="font-medium">Revenue Streams ({{ streams.length }})</h4>
<UBadge :color="streamsValid ? 'green' : 'red'" variant="subtle">
{{ streamsValid ? 'Valid' : 'Incomplete' }}
</UBadge>
</div>
</template>
<div v-if="streams.length === 0" class="text-sm text-gray-500 text-center py-4">
No revenue streams added
</div>
<div v-else class="space-y-3">
<div v-for="stream in streams.slice(0, 3)" :key="stream.id" class="space-y-1">
<div class="flex justify-between text-sm">
<span class="font-medium">{{ stream.name || 'Unnamed Stream' }}</span>
<span class="text-gray-600">{{ stream.targetPct || 0 }}%</span>
</div>
<div class="flex justify-between text-xs text-gray-500">
<span>{{ stream.category }} • {{ stream.certainty }}</span>
<span>€{{ stream.targetMonthlyAmount || 0 }}/mo</span>
</div>
</div>
<div v-if="streams.length > 3" class="text-xs text-gray-500">
+{{ streams.length - 3 }} more streams
</div>
<div class="pt-3 border-t border-gray-100">
<div class="grid grid-cols-2 gap-4 text-xs">
<div>
<span class="text-gray-600">Target % total:</span>
<span class="font-medium ml-1" :class="totalTargetPct === 100 ? 'text-green-600' : 'text-red-600'">
{{ totalTargetPct }}%
</span>
</div>
<div>
<span class="text-gray-600">Monthly target:</span>
<span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
</div>
</div>
</div>
</div>
</UCard>
</div>
<!-- Overall Status -->
<div class="bg-gray-50 rounded-lg p-4">
<h4 class="font-medium text-sm mb-3">Setup Status</h4>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
<div class="flex items-center gap-2">
<UIcon
:name="membersValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
:class="membersValid ? 'text-green-500' : 'text-red-500'"
class="w-4 h-4"
/>
<span class="text-sm">Members</span>
</div>
<div class="flex items-center gap-2">
<UIcon
:name="policiesValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
:class="policiesValid ? 'text-green-500' : 'text-red-500'"
class="w-4 h-4"
/>
<span class="text-sm">Policies</span>
</div>
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-check-circle" class="text-blue-500 w-4 h-4" />
<span class="text-sm">Costs (Optional)</span>
</div>
<div class="flex items-center gap-2">
<UIcon
:name="streamsValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'"
:class="streamsValid ? 'text-green-500' : 'text-red-500'"
class="w-4 h-4"
/>
<span class="text-sm">Revenue</span>
</div>
</div>
<div v-if="!canComplete" class="bg-yellow-100 border border-yellow-200 rounded-md p-3 mb-4">
<div class="flex items-center gap-2">
<UIcon name="i-heroicons-exclamation-triangle" class="text-yellow-600 w-4 h-4" />
<span class="text-sm font-medium text-yellow-800">Complete required sections to finish setup</span>
</div>
<ul class="list-disc list-inside text-xs text-yellow-700 mt-2">
<li v-if="!membersValid">Add at least one member with valid details</li>
<li v-if="!policiesValid">Set a valid hourly wage and complete policy fields</li>
<li v-if="!streamsValid">Add at least one revenue stream with valid details</li>
</ul>
</div>
</div>
<!-- Actions -->
<div class="flex justify-between items-center pt-6 border-t">
<UButton variant="ghost" @click="$emit('reset')" color="red">
Reset All Data
</UButton>
<div class="flex gap-3">
<UButton variant="outline" @click="exportSetup">
Export Setup
</UButton>
<UButton
@click="completeSetup"
:disabled="!canComplete"
size="lg"
>
Complete Setup
</UButton>
</div>
</div>
</div>
</template>
<script setup lang="ts">
const emit = defineEmits<{
'complete': []
'reset': []
}>()
// Stores
const membersStore = useMembersStore()
const policiesStore = usePoliciesStore()
const budgetStore = useBudgetStore()
const streamsStore = useStreamsStore()
// Computed data
const members = computed(() => membersStore.members)
const policies = computed(() => ({
equalHourlyWage: policiesStore.equalHourlyWage,
payrollOncostPct: policiesStore.payrollOncostPct,
savingsTargetMonths: policiesStore.savingsTargetMonths,
minCashCushionAmount: policiesStore.minCashCushionAmount,
deferredCapHoursPerQtr: policiesStore.deferredCapHoursPerQtr,
volunteerScope: policiesStore.volunteerScope
}))
const overheadCosts = computed(() => budgetStore.overheadCosts)
const streams = computed(() => streamsStore.streams)
// Validation
const membersValid = computed(() => membersStore.isValid)
const policiesValid = computed(() => policiesStore.isValid)
const streamsValid = computed(() => streamsStore.hasValidStreams)
const canComplete = computed(() => membersValid.value && policiesValid.value && streamsValid.value)
// Summary calculations
const totalCapacity = computed(() =>
members.value.reduce((sum, m) => sum + (m.capacity?.targetHours || 0), 0)
)
const avgExternal = computed(() => {
if (members.value.length === 0) return 0
const total = members.value.reduce((sum, m) => sum + (m.externalCoveragePct || 0), 0)
return Math.round(total / members.value.length)
})
const totalMonthlyCosts = computed(() =>
overheadCosts.value.reduce((sum, c) => sum + (c.amount || 0), 0)
)
const totalTargetPct = computed(() => streamsStore.totalTargetPct)
const totalMonthlyTarget = computed(() =>
Math.round(streams.value.reduce((sum, s) => sum + (s.targetMonthlyAmount || 0), 0))
)
function completeSetup() {
if (canComplete.value) {
// Mark setup as complete in some way (could be a store flag)
emit('complete')
}
}
function exportSetup() {
// Create export data
const setupData = {
members: members.value,
policies: policies.value,
overheadCosts: overheadCosts.value,
streams: streams.value,
exportedAt: new Date().toISOString(),
version: '1.0'
}
// Download as JSON
const blob = new Blob([JSON.stringify(setupData, null, 2)], { type: 'application/json' })
const url = URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = `coop-setup-${new Date().toISOString().split('T')[0]}.json`
document.body.appendChild(a)
a.click()
document.body.removeChild(a)
URL.revokeObjectURL(url)
}
</script>

59
composables/useConcentration.ts Normal file
View file

@ -0,0 +1,59 @@
/**
* Returns Top source % and HHI-based traffic light (HHI hidden from UI)
* Uses Herfindahl-Hirschman Index internally but only exposes traffic light color
*/
export const useConcentration = () => {
const calculateTopSourcePct = (revenueShares: number[]): number => {
if (revenueShares.length === 0) return 0
return Math.max(...revenueShares)
}
const calculateHHI = (revenueShares: number[]): number => {
// HHI = sum of squared market shares (as percentages)
return revenueShares.reduce((sum, share) => sum + (share * share), 0)
}
const getConcentrationStatus = (topSourcePct: number, hhi: number): 'green' | 'yellow' | 'red' => {
// Primary threshold based on top source %
if (topSourcePct > 50) return 'red'
if (topSourcePct > 35) return 'yellow'
// Secondary check using HHI for more nuanced analysis
if (hhi > 2500) return 'red' // Highly concentrated
if (hhi > 1500) return 'yellow' // Moderately concentrated
return 'green'
}
const getConcentrationMessage = (status: 'green' | 'yellow' | 'red'): string => {
switch (status) {
case 'red':
return 'Most of your money comes from one place. Add another stream to reduce risk.'
case 'yellow':
return 'Revenue somewhat concentrated. Consider diversifying further.'
case 'green':
return 'Good revenue diversification.'
}
}
const analyzeConcentration = (revenueStreams: Array<{ targetPct: number }>) => {
const shares = revenueStreams.map(stream => stream.targetPct || 0)
const topSourcePct = calculateTopSourcePct(shares)
const hhi = calculateHHI(shares)
const status = getConcentrationStatus(topSourcePct, hhi)
return {
topSourcePct,
status,
message: getConcentrationMessage(status)
// Note: HHI is deliberately not exposed in return
}
}
return {
calculateTopSourcePct,
getConcentrationStatus,
getConcentrationMessage,
analyzeConcentration
}
}

25
composables/useCoverage.ts Normal file
View file

@ -0,0 +1,25 @@
/**
* Computes coverage: funded paid hours ÷ target hours
*/
export const useCoverage = () => {
const calculateCoverage = (fundedPaidHours: number, targetHours: number): number => {
if (targetHours <= 0) return 0
return (fundedPaidHours / targetHours) * 100
}
const getCoverageStatus = (coveragePct: number): 'green' | 'yellow' | 'red' => {
if (coveragePct >= 80) return 'green'
if (coveragePct >= 60) return 'yellow'
return 'red'
}
const formatCoverage = (coveragePct: number): string => {
return `${Math.round(coveragePct)}%`
}
return {
calculateCoverage,
getCoverageStatus,
formatCoverage
}
}

89
composables/useDeferredMetrics.ts Normal file
View file

@ -0,0 +1,89 @@
/**
* Calculates deferred balance and ratio vs monthly payroll
* Formula: total deferred wage liability ÷ one month of payroll
*/
export const useDeferredMetrics = () => {
const calculateDeferredBalance = (
members: Array<{ deferredHours: number }>,
hourlyWage: number
): number => {
const totalDeferredHours = members.reduce((sum, member) => sum + (member.deferredHours || 0), 0)
return totalDeferredHours * hourlyWage
}
const calculateMonthlyPayroll = (
members: Array<{ targetHours: number }>,
hourlyWage: number,
oncostPct: number
): number => {
const totalTargetHours = members.reduce((sum, member) => sum + (member.targetHours || 0), 0)
const grossPayroll = totalTargetHours * hourlyWage
return grossPayroll * (1 + oncostPct / 100)
}
const calculateDeferredRatio = (
deferredBalance: number,
monthlyPayroll: number
): number => {
if (monthlyPayroll <= 0) return 0
return deferredBalance / monthlyPayroll
}
const getDeferredRatioStatus = (ratio: number): 'green' | 'yellow' | 'red' => {
if (ratio > 1.5) return 'red' // Flag red if >1.5× monthly payroll
if (ratio > 1.0) return 'yellow'
return 'green'
}
const getDeferredRatioMessage = (status: 'green' | 'yellow' | 'red'): string => {
switch (status) {
case 'red':
return 'Deferred balance is high. Consider repaying or reducing scope.'
case 'yellow':
return 'Deferred balance is building up. Monitor closely.'
case 'green':
return 'Deferred balance is manageable.'
}
}
const checkDeferredCap = (
memberHours: number,
capHoursPerQtr: number,
quarterProgress: number
): { withinCap: boolean; remainingHours: number } => {
const quarterlyLimit = capHoursPerQtr * quarterProgress
const withinCap = memberHours <= quarterlyLimit
const remainingHours = Math.max(0, quarterlyLimit - memberHours)
return { withinCap, remainingHours }
}
const analyzeDeferredMetrics = (
members: Array<{ deferredHours?: number; targetHours?: number }>,
hourlyWage: number,
oncostPct: number
) => {
const deferredBalance = calculateDeferredBalance(members, hourlyWage)
const monthlyPayroll = calculateMonthlyPayroll(members, hourlyWage, oncostPct)
const ratio = calculateDeferredRatio(deferredBalance, monthlyPayroll)
const status = getDeferredRatioStatus(ratio)
return {
deferredBalance,
monthlyPayroll,
ratio: Number(ratio.toFixed(2)),
status,
message: getDeferredRatioMessage(status)
}
}
return {
calculateDeferredBalance,
calculateMonthlyPayroll,
calculateDeferredRatio,
getDeferredRatioStatus,
getDeferredRatioMessage,
checkDeferredCap,
analyzeDeferredMetrics
}
}

77
composables/useFixtureIO.ts Normal file
View file

@ -0,0 +1,77 @@
import { useMembersStore } from '~/stores/members'
import { usePoliciesStore } from '~/stores/policies'
import { useStreamsStore } from '~/stores/streams'
import { useBudgetStore } from '~/stores/budget'
import { useScenariosStore } from '~/stores/scenarios'
import { useCashStore } from '~/stores/cash'
import { useSessionStore } from '~/stores/session'
export type AppSnapshot = {
members: any[]
policies: Record<string, any>
streams: any[]
budget: Record<string, any>
scenarios: Record<string, any>
cash: Record<string, any>
session: Record<string, any>
}
export function useFixtureIO() {
const exportAll = (): AppSnapshot => {
const members = useMembersStore()
const policies = usePoliciesStore()
const streams = useStreamsStore()
const budget = useBudgetStore()
const scenarios = useScenariosStore()
const cash = useCashStore()
const session = useSessionStore()
return {
members: members.members,
policies: {
equalHourlyWage: policies.equalHourlyWage,
payrollOncostPct: policies.payrollOncostPct,
savingsTargetMonths: policies.savingsTargetMonths,
minCashCushionAmount: policies.minCashCushionAmount,
deferredCapHoursPerQtr: policies.deferredCapHoursPerQtr,
deferredSunsetMonths: policies.deferredSunsetMonths,
surplusOrder: policies.surplusOrder,
paymentPriority: policies.paymentPriority
},
streams: streams.streams,
budget: {
budgetLines: budget.budgetLines,
overheadCosts: budget.overheadCosts,
productionCosts: budget.productionCosts,
currentPeriod: budget.currentPeriod
},
scenarios: {
sliders: scenarios.sliders,
activeScenario: scenarios.activeScenario
},
cash: {
cashEvents: cash.cashEvents,
paymentQueue: cash.paymentQueue,
currentCash: cash.currentCash,
currentSavings: cash.currentSavings
},
session: {
checklist: session.checklist,
draftAllocations: session.draftAllocations,
rationale: session.rationale,
currentSession: session.currentSession,
savedRecords: session.savedRecords
}
}
}
const importAll = (snapshot: AppSnapshot) => {
// TODO: Implement import functionality for all stores
// This will patch each store with the snapshot data
console.log('Import functionality to be implemented', snapshot)
}
return { exportAll, importAll }
}

246
composables/useFixtures.ts Normal file
View file

@ -0,0 +1,246 @@
/**
* Composable for loading and managing fixture data
* Provides centralized access to demo data for all screens
*/
export const useFixtures = () => {
// Load fixture data (in real app, this would come from API or stores)
const loadMembers = async () => {
// In production, this would fetch from content/fixtures/members.json
// For now, return inline data that matches the fixture structure
return {
members: [
{
id: 'member-1',
displayName: 'Alex Chen',
roleFocus: 'Technical Lead',
payRelationship: 'Hybrid',
capacity: { minHours: 20, targetHours: 120, maxHours: 160 },
riskBand: 'Medium',
externalCoveragePct: 60,
privacyNeeds: 'aggregate_ok',
deferredHours: 85,
quarterlyDeferredCap: 240
},
{
id: 'member-2',
displayName: 'Jordan Silva',
roleFocus: 'Design & UX',
payRelationship: 'FullyPaid',
capacity: { minHours: 30, targetHours: 140, maxHours: 180 },
riskBand: 'Low',
externalCoveragePct: 20,
privacyNeeds: 'aggregate_ok',
deferredHours: 0,
quarterlyDeferredCap: 240
},
{
id: 'member-3',
displayName: 'Sam Rodriguez',
roleFocus: 'Operations & Growth',
payRelationship: 'Supplemental',
capacity: { minHours: 10, targetHours: 60, maxHours: 100 },
riskBand: 'High',
externalCoveragePct: 85,
privacyNeeds: 'steward_only',
deferredHours: 32,
quarterlyDeferredCap: 120
}
]
}
}
const loadStreams = async () => {
return {
revenueStreams: [
{
id: 'stream-1',
name: 'Client Services',
category: 'Services',
subcategory: 'Development',
targetPct: 65,
targetMonthlyAmount: 7800,
certainty: 'Committed',
payoutDelayDays: 30,
terms: 'Net 30',
revenueSharePct: 0,
platformFeePct: 0,
restrictions: 'General',
effortHoursPerMonth: 180
},
{
id: 'stream-2',
name: 'Platform Sales',
category: 'Product',
subcategory: 'Digital Tools',
targetPct: 20,
targetMonthlyAmount: 2400,
certainty: 'Probable',
payoutDelayDays: 14,
terms: 'Platform payout',
revenueSharePct: 0,
platformFeePct: 5,
restrictions: 'General',
effortHoursPerMonth: 40
},
{
id: 'stream-3',
name: 'Innovation Grant',
category: 'Grant',
subcategory: 'Government',
targetPct: 10,
targetMonthlyAmount: 1200,
certainty: 'Committed',
payoutDelayDays: 45,
terms: 'Quarterly disbursement',
revenueSharePct: 0,
platformFeePct: 0,
restrictions: 'Restricted',
effortHoursPerMonth: 8
},
{
id: 'stream-4',
name: 'Community Donations',
category: 'Donation',
subcategory: 'Individual',
targetPct: 3,
targetMonthlyAmount: 360,
certainty: 'Aspirational',
payoutDelayDays: 3,
terms: 'Immediate',
revenueSharePct: 0,
platformFeePct: 2.9,
restrictions: 'General',
effortHoursPerMonth: 5
},
{
id: 'stream-5',
name: 'Consulting & Training',
category: 'Other',
subcategory: 'Professional Services',
targetPct: 2,
targetMonthlyAmount: 240,
certainty: 'Probable',
payoutDelayDays: 21,
terms: 'Net 21',
revenueSharePct: 0,
platformFeePct: 0,
restrictions: 'General',
effortHoursPerMonth: 12
}
]
}
}
const loadFinances = async () => {
return {
currentBalances: {
cash: 5000,
savings: 8000,
totalLiquid: 13000
},
policies: {
equalHourlyWage: 20,
payrollOncostPct: 25,
savingsTargetMonths: 3,
minCashCushionAmount: 3000,
deferredCapHoursPerQtr: 240,
deferredSunsetMonths: 12
},
deferredLiabilities: {
totalDeferred: 2340,
byMember: {
'member-1': 1700,
'member-2': 0,
'member-3': 640
}
}
}
}
const loadCosts = async () => {
return {
overheadCosts: [
{
id: 'overhead-1',
name: 'Coworking Space',
amount: 800,
category: 'Workspace',
recurring: true
},
{
id: 'overhead-2',
name: 'Tools & Software',
amount: 420,
category: 'Technology',
recurring: true
},
{
id: 'overhead-3',
name: 'Business Insurance',
amount: 180,
category: 'Legal & Compliance',
recurring: true
}
],
productionCosts: [
{
id: 'production-1',
name: 'Development Kits',
amount: 500,
category: 'Hardware',
period: '2024-01'
}
]
}
}
// Calculate derived metrics from fixture data
const calculateMetrics = async () => {
const [members, streams, finances, costs] = await Promise.all([
loadMembers(),
loadStreams(),
loadFinances(),
loadCosts()
])
const totalTargetHours = members.members.reduce((sum, member) =>
sum + member.capacity.targetHours, 0
)
const totalTargetRevenue = streams.revenueStreams.reduce((sum, stream) =>
sum + stream.targetMonthlyAmount, 0
)
const totalOverheadCosts = costs.overheadCosts.reduce((sum, cost) =>
sum + cost.amount, 0
)
const monthlyPayroll = totalTargetHours * finances.policies.equalHourlyWage *
(1 + finances.policies.payrollOncostPct / 100)
const monthlyBurn = monthlyPayroll + totalOverheadCosts +
costs.productionCosts.reduce((sum, cost) => sum + cost.amount, 0)
const runway = finances.currentBalances.totalLiquid / monthlyBurn
return {
totalTargetHours,
totalTargetRevenue,
monthlyPayroll,
monthlyBurn,
runway,
members: members.members,
streams: streams.revenueStreams,
finances: finances,
costs: costs
}
}
return {
loadMembers,
loadStreams,
loadFinances,
loadCosts,
calculateMetrics
}
}

58
composables/usePayoutExposure.ts Normal file
View file

@ -0,0 +1,58 @@
/**
* Calculates weighted average payout delay across revenue streams
*/
export const usePayoutExposure = () => {
const calculateWeightedAverageDelay = (
streams: Array<{ targetMonthlyAmount: number; payoutDelayDays: number }>
): number => {
const totalRevenue = streams.reduce((sum, stream) => sum + (stream.targetMonthlyAmount || 0), 0)
if (totalRevenue === 0) return 0
const weightedSum = streams.reduce((sum, stream) => {
const weight = (stream.targetMonthlyAmount || 0) / totalRevenue
return sum + (weight * (stream.payoutDelayDays || 0))
}, 0)
return weightedSum
}
const getPayoutExposureStatus = (avgDelayDays: number, minCashCushion: number): 'green' | 'yellow' | 'red' => {
// Flag if weighted average >30 days and cushion <1 month
if (avgDelayDays > 30 && minCashCushion < 8000) return 'red' // Assuming ~8k = 1 month expenses
if (avgDelayDays > 21) return 'yellow'
return 'green'
}
const getPayoutExposureMessage = (status: 'green' | 'yellow' | 'red'): string => {
switch (status) {
case 'red':
return 'Money is earned now but arrives later. Delays can create mid-month dips.'
case 'yellow':
return 'Some payout delays present. Monitor cash timing.'
case 'green':
return 'Payout timing looks manageable.'
}
}
const analyzePayoutExposure = (
streams: Array<{ targetMonthlyAmount: number; payoutDelayDays: number }>,
minCashCushion: number
) => {
const avgDelayDays = calculateWeightedAverageDelay(streams)
const status = getPayoutExposureStatus(avgDelayDays, minCashCushion)
return {
avgDelayDays: Math.round(avgDelayDays),
status,
message: getPayoutExposureMessage(status)
}
}
return {
calculateWeightedAverageDelay,
getPayoutExposureStatus,
getPayoutExposureMessage,
analyzePayoutExposure
}
}

74
composables/useReserveProgress.ts Normal file
View file

@ -0,0 +1,74 @@
/**
* Calculates percentage of savings target met
* Formula: savings ÷ (savings_target_months × monthly burn)
*/
export const useReserveProgress = () => {
const calculateReserveProgress = (
currentSavings: number,
savingsTargetMonths: number,
monthlyBurn: number
): number => {
const targetAmount = savingsTargetMonths * monthlyBurn
if (targetAmount <= 0) return 100
return Math.min((currentSavings / targetAmount) * 100, 100)
}
const getReserveProgressStatus = (progressPct: number): 'green' | 'yellow' | 'red' => {
if (progressPct >= 80) return 'green'
if (progressPct >= 50) return 'yellow'
return 'red'
}
const getReserveProgressMessage = (status: 'green' | 'yellow' | 'red'): string => {
switch (status) {
case 'red':
return 'Build savings to your target before increasing paid hours.'
case 'yellow':
return 'Savings progress is moderate. Continue building reserves.'
case 'green':
return 'Savings target nearly reached or exceeded.'
}
}
const calculateTargetAmount = (savingsTargetMonths: number, monthlyBurn: number): number => {
return savingsTargetMonths * monthlyBurn
}
const calculateShortfall = (
currentSavings: number,
savingsTargetMonths: number,
monthlyBurn: number
): number => {
const targetAmount = calculateTargetAmount(savingsTargetMonths, monthlyBurn)
return Math.max(0, targetAmount - currentSavings)
}
const analyzeReserveProgress = (
currentSavings: number,
savingsTargetMonths: number,
monthlyBurn: number
) => {
const progressPct = calculateReserveProgress(currentSavings, savingsTargetMonths, monthlyBurn)
const status = getReserveProgressStatus(progressPct)
const targetAmount = calculateTargetAmount(savingsTargetMonths, monthlyBurn)
const shortfall = calculateShortfall(currentSavings, savingsTargetMonths, monthlyBurn)
return {
progressPct: Math.round(progressPct),
status,
message: getReserveProgressMessage(status),
currentSavings,
targetAmount,
shortfall
}
}
return {
calculateReserveProgress,
getReserveProgressStatus,
getReserveProgressMessage,
calculateTargetAmount,
calculateShortfall,
analyzeReserveProgress
}
}

27
composables/useRunway.ts Normal file
View file

@ -0,0 +1,27 @@
/**
* Computes months of runway from cash, reserves, and burn rate
* Formula: (cash + savings) ÷ average monthly burn in scenario
*/
export const useRunway = () => {
const calculateRunway = (cash: number, savings: number, monthlyBurn: number): number => {
if (monthlyBurn <= 0) return Infinity
return (cash + savings) / monthlyBurn
}
const getRunwayStatus = (months: number): 'green' | 'yellow' | 'red' => {
if (months >= 3) return 'green'
if (months >= 2) return 'yellow'
return 'red'
}
const formatRunway = (months: number): string => {
if (months === Infinity) return '∞ months'
return `${months.toFixed(1)} months`
}
return {
calculateRunway,
getRunwayStatus,
formatRunway
}
}

113
content/fixtures/cash-events.json Normal file
View file

@ -0,0 +1,113 @@
{
"cashEvents": [
{
"id": "event-1",
"date": "2024-01-08",
"week": 1,
"type": "Influx",
"amount": 2600,
"sourceRef": "stream-1",
"policyTag": "Revenue",
"description": "Client Services - Project Alpha payment"
},
{
"id": "event-2",
"date": "2024-01-12",
"week": 2,
"type": "Influx",
"amount": 400,
"sourceRef": "stream-2",
"policyTag": "Revenue",
"description": "Platform Sales - December payout"
},
{
"id": "event-3",
"date": "2024-01-15",
"week": 3,
"type": "Outflow",
"amount": 2200,
"sourceRef": "payroll-jan-1",
"policyTag": "Payroll",
"description": "Payroll - First half January"
},
{
"id": "event-4",
"date": "2024-01-22",
"week": 4,
"type": "Influx",
"amount": 4000,
"sourceRef": "stream-1",
"policyTag": "Revenue",
"description": "Client Services - Large project milestone"
},
{
"id": "event-5",
"date": "2024-01-29",
"week": 5,
"type": "Outflow",
"amount": 2200,
"sourceRef": "payroll-jan-2",
"policyTag": "Payroll",
"description": "Payroll - Second half January"
},
{
"id": "event-6",
"date": "2024-02-05",
"week": 6,
"type": "Outflow",
"amount": 1400,
"sourceRef": "overhead-monthly",
"policyTag": "CriticalOps",
"description": "Monthly overhead costs"
},
{
"id": "event-7",
"date": "2024-02-12",
"week": 7,
"type": "Influx",
"amount": 1000,
"sourceRef": "stream-2",
"policyTag": "Revenue",
"description": "Platform Sales - Reduced month"
},
{
"id": "event-8",
"date": "2024-02-19",
"week": 8,
"type": "Outflow",
"amount": 2200,
"sourceRef": "payroll-feb-1",
"policyTag": "Payroll",
"description": "Payroll - First half February"
}
],
"paymentQueue": [
{
"id": "payment-1",
"amount": 500,
"recipient": "Development Kits Supplier",
"scheduledWeek": 9,
"priority": "Vendors",
"canStage": true,
"description": "Hardware purchase for Q1 development"
},
{
"id": "payment-2",
"amount": 1700,
"recipient": "Alex Chen - Deferred Pay",
"scheduledWeek": 10,
"priority": "Payroll",
"canStage": false,
"description": "Deferred wage repayment"
},
{
"id": "payment-3",
"amount": 800,
"recipient": "Tax Authority",
"scheduledWeek": 12,
"priority": "Taxes",
"canStage": false,
"description": "Quarterly tax payment"
}
]
}

38
content/fixtures/costs.json Normal file
View file

@ -0,0 +1,38 @@
{
"overheadCosts": [
{
"id": "overhead-1",
"name": "Coworking Space",
"amount": 800,
"category": "Workspace",
"recurring": true,
"description": "Shared workspace membership for 3 desks"
},
{
"id": "overhead-2",
"name": "Tools & Software",
"amount": 420,
"category": "Technology",
"recurring": true,
"description": "Development tools, design software, project management"
},
{
"id": "overhead-3",
"name": "Business Insurance",
"amount": 180,
"category": "Legal & Compliance",
"recurring": true,
"description": "Professional liability and general business insurance"
}
],
"productionCosts": [
{
"id": "production-1",
"name": "Development Kits",
"amount": 500,
"category": "Hardware",
"period": "2024-01",
"description": "Testing devices and development hardware"
}
]
}

40
content/fixtures/finances.json Normal file
View file

@ -0,0 +1,40 @@
{
"currentBalances": {
"cash": 5000,
"savings": 8000,
"totalLiquid": 13000
},
"policies": {
"equalHourlyWage": 20,
"payrollOncostPct": 25,
"savingsTargetMonths": 3,
"minCashCushionAmount": 3000,
"deferredCapHoursPerQtr": 240,
"deferredSunsetMonths": 12,
"surplusOrder": [
"Deferred",
"Savings",
"Hardship",
"Training",
"Patronage",
"Retained"
],
"paymentPriority": [
"Payroll",
"Taxes",
"CriticalOps",
"Vendors"
],
"volunteerScope": {
"allowedFlows": ["Care", "SharedLearning"]
}
},
"deferredLiabilities": {
"totalDeferred": 2340,
"byMember": {
"member-1": 1700,
"member-2": 0,
"member-3": 640
}
}
}

52
content/fixtures/members.json Normal file
View file

@ -0,0 +1,52 @@
{
"members": [
{
"id": "member-1",
"displayName": "Alex Chen",
"roleFocus": "Technical Lead",
"payRelationship": "Hybrid",
"capacity": {
"minHours": 20,
"targetHours": 120,
"maxHours": 160
},
"riskBand": "Medium",
"externalCoveragePct": 60,
"privacyNeeds": "aggregate_ok",
"deferredHours": 85,
"quarterlyDeferredCap": 240
},
{
"id": "member-2",
"displayName": "Jordan Silva",
"roleFocus": "Design & UX",
"payRelationship": "FullyPaid",
"capacity": {
"minHours": 30,
"targetHours": 140,
"maxHours": 180
},
"riskBand": "Low",
"externalCoveragePct": 20,
"privacyNeeds": "aggregate_ok",
"deferredHours": 0,
"quarterlyDeferredCap": 240
},
{
"id": "member-3",
"displayName": "Sam Rodriguez",
"roleFocus": "Operations & Growth",
"payRelationship": "Supplemental",
"capacity": {
"minHours": 10,
"targetHours": 60,
"maxHours": 100
},
"riskBand": "High",
"externalCoveragePct": 85,
"privacyNeeds": "steward_only",
"deferredHours": 32,
"quarterlyDeferredCap": 120
}
]
}

84
content/fixtures/streams.json Normal file
View file

@ -0,0 +1,84 @@
{
"revenueStreams": [
{
"id": "stream-1",
"name": "Client Services",
"category": "Services",
"subcategory": "Development",
"targetPct": 65,
"targetMonthlyAmount": 7800,
"certainty": "Committed",
"payoutDelayDays": 30,
"terms": "Net 30",
"revenueSharePct": 0,
"platformFeePct": 0,
"restrictions": "General",
"seasonalityWeights": [1.0, 1.0, 1.1, 1.1, 0.9, 0.8, 0.7, 0.8, 1.1, 1.2, 1.1, 1.0],
"effortHoursPerMonth": 180
},
{
"id": "stream-2",
"name": "Platform Sales",
"category": "Product",
"subcategory": "Digital Tools",
"targetPct": 20,
"targetMonthlyAmount": 2400,
"certainty": "Probable",
"payoutDelayDays": 14,
"terms": "Platform payout",
"revenueSharePct": 0,
"platformFeePct": 5,
"restrictions": "General",
"seasonalityWeights": [0.8, 0.9, 1.0, 1.1, 1.2, 1.1, 1.0, 0.9, 1.1, 1.2, 1.3, 1.1],
"effortHoursPerMonth": 40
},
{
"id": "stream-3",
"name": "Innovation Grant",
"category": "Grant",
"subcategory": "Government",
"targetPct": 10,
"targetMonthlyAmount": 1200,
"certainty": "Committed",
"payoutDelayDays": 45,
"terms": "Quarterly disbursement",
"revenueSharePct": 0,
"platformFeePct": 0,
"restrictions": "Restricted",
"seasonalityWeights": [1.0, 1.0, 1.0, 1.5, 1.0, 1.0, 0.5, 1.0, 1.0, 1.5, 1.0, 1.0],
"effortHoursPerMonth": 8
},
{
"id": "stream-4",
"name": "Community Donations",
"category": "Donation",
"subcategory": "Individual",
"targetPct": 3,
"targetMonthlyAmount": 360,
"certainty": "Aspirational",
"payoutDelayDays": 3,
"terms": "Immediate",
"revenueSharePct": 0,
"platformFeePct": 2.9,
"restrictions": "General",
"seasonalityWeights": [0.8, 0.9, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.0, 1.1, 1.3, 1.4],
"effortHoursPerMonth": 5
},
{
"id": "stream-5",
"name": "Consulting & Training",
"category": "Other",
"subcategory": "Professional Services",
"targetPct": 2,
"targetMonthlyAmount": 240,
"certainty": "Probable",
"payoutDelayDays": 21,
"terms": "Net 21",
"revenueSharePct": 0,
"platformFeePct": 0,
"restrictions": "General",
"seasonalityWeights": [1.2, 1.1, 1.0, 0.9, 0.8, 0.7, 0.8, 0.9, 1.2, 1.3, 1.2, 1.0],
"effortHoursPerMonth": 12
}
]
}

20
middleware/setup.global.ts Normal file
View file

@ -0,0 +1,20 @@
export default defineNuxtRouteMiddleware((to) => {
// Skip middleware for wizard and API routes
if (to.path === "/wizard" || to.path.startsWith("/api/")) {
return;
}
// Use actual store state to determine whether setup is complete
const membersStore = useMembersStore();
const policiesStore = usePoliciesStore();
const streamsStore = useStreamsStore();
const setupComplete =
membersStore.isValid &&
policiesStore.isValid &&
streamsStore.hasValidStreams;
if (!setupComplete) {
return navigateTo("/wizard");
}
});

14
nuxt.config.ts
View file

@ -5,8 +5,8 @@ export default defineNuxtConfig({
compatibilityDate: "2025-07-15",
devtools: { enabled: true },
// Keep SSR on (default) with Nitro server
ssr: true,
// Disable SSR to avoid hydration mismatches during wizard work
ssr: false,
// Strict TypeScript
typescript: {
@ -22,5 +22,15 @@ export default defineNuxtConfig({
modules: ["@pinia/nuxt", "@nuxt/ui", "@nuxtjs/color-mode"],
// Runtime configuration for formatting
runtimeConfig: {
public: {
appCurrency: process.env.APP_CURRENCY || "EUR",
appLocale: process.env.APP_LOCALE || "en-CA",
appDecimalPlaces: process.env.APP_DECIMAL_PLACES || "2",
appName: process.env.APP_NAME || "Urgent Tools",
},
},
// Nuxt UI minimal theme customizations live in app.config.ts
});

264
pages/budget.vue Normal file
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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
View 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>

127
plugins/formatting.client.ts Normal file
View file

@ -0,0 +1,127 @@
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig()
// Get configuration from environment
const currency = config.public.appCurrency || 'EUR'
const locale = config.public.appLocale || 'en-CA'
const decimalPlaces = parseInt(config.public.appDecimalPlaces || '2')
// Create formatters with centralized configuration
const currencyFormatter = new Intl.NumberFormat(locale, {
style: 'currency',
currency: currency,
minimumFractionDigits: decimalPlaces,
maximumFractionDigits: decimalPlaces
})
const numberFormatter = new Intl.NumberFormat(locale, {
minimumFractionDigits: 0,
maximumFractionDigits: decimalPlaces
})
const percentFormatter = new Intl.NumberFormat(locale, {
style: 'percent',
minimumFractionDigits: 0,
maximumFractionDigits: 1
})
const dateFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: 'medium'
})
const shortDateFormatter = new Intl.DateTimeFormat(locale, {
dateStyle: 'short'
})
// Helper functions
const formatters = {
/**
* Format currency amount
*/
currency: (amount: number): string => {
return currencyFormatter.format(amount)
},
/**
* Format number with locale-specific formatting
*/
number: (value: number): string => {
return numberFormatter.format(value)
},
/**
* Format percentage (expects decimal, e.g., 0.65 for 65%)
*/
percent: (value: number): string => {
return percentFormatter.format(value)
},
/**
* Format percentage from whole number (e.g., 65 for 65%)
*/
percentFromWhole: (value: number): string => {
return `${Math.round(value)}%`
},
/**
* Format date
*/
date: (date: Date | string): string => {
const dateObj = typeof date === 'string' ? new Date(date) : date
return dateFormatter.format(dateObj)
},
/**
* Format date in short format
*/
shortDate: (date: Date | string): string => {
const dateObj = typeof date === 'string' ? new Date(date) : date
return shortDateFormatter.format(dateObj)
},
/**
* Format compact number for large amounts
*/
compact: (value: number): string => {
return new Intl.NumberFormat(locale, {
notation: 'compact',
maximumFractionDigits: 1
}).format(value)
},
/**
* Format currency without symbol (for inputs)
*/
currencyNumber: (amount: number): string => {
return numberFormatter.format(amount)
},
/**
* Get currency symbol
*/
getCurrencySymbol: (): string => {
return currencyFormatter.formatToParts(1)
.find(part => part.type === 'currency')?.value || currency
},
/**
* Parse currency string back to number
*/
parseCurrency: (value: string): number => {
// Remove currency symbols and formatting, parse as float
const cleaned = value.replace(/[^\d.,\-]/g, '')
.replace(/,/g, '.') // Handle comma as decimal separator
return parseFloat(cleaned) || 0
}
}
// Make formatters available globally
return {
provide: {
format: formatters,
currency,
locale,
decimalPlaces
}
}
})

0
app/plugins/piniaPersistedState.client.ts → plugins/piniaPersistedState.client.ts
View file

131
stores/budget.ts Normal file
View file

@ -0,0 +1,131 @@
import { defineStore } from "pinia";
export const useBudgetStore = defineStore(
"budget",
() => {
// Schema version for persistence
const schemaVersion = "1.0";
// Monthly budget lines by period (YYYY-MM)
const budgetLines = ref({});
// Overhead costs (recurring monthly)
const overheadCosts = ref([]);
// Production costs (variable monthly)
const productionCosts = ref([]);
// Current selected period
const currentPeriod = ref("2024-01");
// Computed current budget
const currentBudget = computed(() => {
return (
budgetLines.value[currentPeriod.value] || {
period: currentPeriod.value,
revenueByStream: {},
payrollCosts: { memberHours: [], oncostApplied: 0 },
overheadCosts: [],
productionCosts: [],
savingsChange: 0,
net: 0,
}
);
});
// Actions
function setBudgetLine(period, budgetData) {
budgetLines.value[period] = {
period,
...budgetData,
};
}
function updateRevenue(period, streamId, type, amount) {
if (!budgetLines.value[period]) {
budgetLines.value[period] = { period, revenueByStream: {} };
}
if (!budgetLines.value[period].revenueByStream[streamId]) {
budgetLines.value[period].revenueByStream[streamId] = {};
}
budgetLines.value[period].revenueByStream[streamId][type] = amount;
}
// Wizard-required actions
function addOverheadLine(cost) {
// Allow creating a blank line so the user can fill it out in the UI
const safeName = cost?.name ?? "";
const safeAmountMonthly =
typeof cost?.amountMonthly === "number" &&
!Number.isNaN(cost.amountMonthly)
? cost.amountMonthly
: 0;
overheadCosts.value.push({
id: Date.now().toString(),
name: safeName,
amount: safeAmountMonthly,
category: cost?.category || "Operations",
recurring: cost?.recurring ?? true,
...cost,
});
}
function removeOverheadLine(id) {
const index = overheadCosts.value.findIndex((c) => c.id === id);
if (index > -1) {
overheadCosts.value.splice(index, 1);
}
}
function addOverheadCost(cost) {
addOverheadLine({ name: cost.name, amountMonthly: cost.amount, ...cost });
}
function addProductionCost(cost) {
productionCosts.value.push({
id: Date.now().toString(),
name: cost.name,
amount: cost.amount,
category: cost.category || "Production",
period: cost.period,
...cost,
});
}
function setCurrentPeriod(period) {
currentPeriod.value = period;
}
// Reset function
function resetBudgetOverhead() {
overheadCosts.value = [];
productionCosts.value = [];
}
return {
budgetLines,
overheadCosts,
productionCosts,
currentPeriod: readonly(currentPeriod),
currentBudget,
schemaVersion,
setBudgetLine,
updateRevenue,
// Wizard actions
addOverheadLine,
removeOverheadLine,
resetBudgetOverhead,
// Legacy actions
addOverheadCost,
addProductionCost,
setCurrentPeriod,
};
},
{
persist: {
key: "urgent-tools-budget",
paths: ["overheadCosts", "productionCosts", "currentPeriod"],
},
}
);

114
stores/cash.ts Normal file
View file

@ -0,0 +1,114 @@
import { defineStore } from "pinia";
export const useCashStore = defineStore("cash", () => {
// 13-week cash flow events
const cashEvents = ref([]);
// Payment queue - staged payments within policy
const paymentQueue = ref([]);
// Week that first breaches minimum cushion
const firstBreachWeek = ref(null);
// Current cash and savings balances
const currentCash = ref(5000);
const currentSavings = ref(8000);
// Computed weekly projections
const weeklyProjections = computed(() => {
const weeks = [];
let runningBalance = currentCash.value;
for (let week = 1; week <= 13; week++) {
const weekEvents = cashEvents.value.filter((e) => e.week === week);
const weekInflow = weekEvents
.filter((e) => e.type === "Influx")
.reduce((sum, e) => sum + e.amount, 0);
const weekOutflow = weekEvents
.filter((e) => e.type === "Outflow")
.reduce((sum, e) => sum + e.amount, 0);
const net = weekInflow - weekOutflow;
runningBalance += net;
weeks.push({
number: week,
inflow: weekInflow,
outflow: weekOutflow,
net,
balance: runningBalance,
cushion: runningBalance, // Will be calculated properly later
breachesCushion: false, // Will be calculated properly later
});
}
return weeks;
});
// Actions
function addCashEvent(event) {
cashEvents.value.push({
id: Date.now().toString(),
date: event.date,
week: event.week,
type: event.type, // Influx|Outflow
amount: event.amount,
sourceRef: event.sourceRef,
policyTag: event.policyTag, // Payroll|Tax|Vendor|SavingsSweep
...event,
});
}
function updateCashEvent(id, updates) {
const event = cashEvents.value.find((e) => e.id === id);
if (event) {
Object.assign(event, updates);
}
}
function removeCashEvent(id) {
const index = cashEvents.value.findIndex((e) => e.id === id);
if (index > -1) {
cashEvents.value.splice(index, 1);
}
}
function addToPaymentQueue(payment) {
paymentQueue.value.push({
id: Date.now().toString(),
amount: payment.amount,
recipient: payment.recipient,
scheduledWeek: payment.scheduledWeek,
priority: payment.priority,
canStage: payment.canStage !== false,
...payment,
});
}
function stagePayment(paymentId, newWeek) {
const payment = paymentQueue.value.find((p) => p.id === paymentId);
if (payment && payment.canStage) {
payment.scheduledWeek = newWeek;
}
}
function updateCurrentBalances(cash, savings) {
currentCash.value = cash;
currentSavings.value = savings;
}
return {
cashEvents: readonly(cashEvents),
paymentQueue: readonly(paymentQueue),
firstBreachWeek: readonly(firstBreachWeek),
currentCash: readonly(currentCash),
currentSavings: readonly(currentSavings),
weeklyProjections,
addCashEvent,
updateCashEvent,
removeCashEvent,
addToPaymentQueue,
stagePayment,
updateCurrentBalances,
};
});

217
stores/members.ts Normal file
View file

@ -0,0 +1,217 @@
import { defineStore } from "pinia";
export const useMembersStore = defineStore(
"members",
() => {
// Member list and profiles
const members = ref([]);
// Schema version for persistence
const schemaVersion = "1.0";
// Capacity totals across all members
const capacityTotals = computed(() => ({
minHours: members.value.reduce(
(sum, m) => sum + (m.capacity?.minHours || 0),
0
),
targetHours: members.value.reduce(
(sum, m) => sum + (m.capacity?.targetHours || 0),
0
),
maxHours: members.value.reduce(
(sum, m) => sum + (m.capacity?.maxHours || 0),
0
),
}));
// Privacy flags - aggregate vs individual visibility
const privacyFlags = ref({
showIndividualNeeds: false,
showIndividualCapacity: false,
stewardOnlyDetails: true,
});
// Normalize a member object to ensure required structure and sane defaults
function normalizeMember(raw) {
const normalized = {
id: raw.id || Date.now().toString(),
displayName: typeof raw.displayName === "string" ? raw.displayName : "",
roleFocus: typeof raw.roleFocus === "string" ? raw.roleFocus : "",
payRelationship: raw.payRelationship || "FullyPaid",
capacity: {
minHours: Number(raw.capacity?.minHours) || 0,
targetHours: Number(raw.capacity?.targetHours) || 0,
maxHours: Number(raw.capacity?.maxHours) || 0,
},
riskBand: raw.riskBand || "Medium",
externalCoveragePct: Number(raw.externalCoveragePct ?? 0),
privacyNeeds: raw.privacyNeeds || "aggregate_ok",
deferredHours: Number(raw.deferredHours ?? 0),
quarterlyDeferredCap: Number(raw.quarterlyDeferredCap ?? 240),
...raw,
};
return normalized;
}
// Initialize normalization for any persisted members
if (Array.isArray(members.value) && members.value.length) {
members.value = members.value.map(normalizeMember);
}
// Validation details for debugging
const validationDetails = computed(() =>
members.value.map((m) => {
const nameOk =
typeof m.displayName === "string" && m.displayName.trim().length > 0;
const relOk = Boolean(m.payRelationship);
const target = Number(m.capacity?.targetHours);
const targetOk = Number.isFinite(target) && target > 0;
const pctRaw = m.externalCoveragePct;
const pct =
pctRaw === undefined || pctRaw === null ? 0 : Number(pctRaw);
const pctOk =
pctRaw === undefined ||
pctRaw === null ||
(Number.isFinite(pct) && pct >= 0 && pct <= 100);
return {
id: m.id,
displayName: m.displayName,
payRelationship: m.payRelationship,
targetHours: m.capacity?.targetHours,
externalCoveragePct: m.externalCoveragePct,
checks: { nameOk, relOk, targetOk, pctOk },
valid: nameOk && relOk && targetOk && pctOk,
};
})
);
// Validation computed (robust against NaN/empty values)
const isValid = computed(() => {
// A member is valid if core required fields pass
const isMemberValid = (m: any) => {
const nameOk =
typeof m.displayName === "string" && m.displayName.trim().length > 0;
const relOk = Boolean(m.payRelationship);
const target = Number(m.capacity?.targetHours);
const targetOk = Number.isFinite(target) && target > 0;
// External coverage is optional; when present it must be within 0..100
const pctRaw = m.externalCoveragePct;
const pct =
pctRaw === undefined || pctRaw === null ? 0 : Number(pctRaw);
const pctOk =
pctRaw === undefined ||
pctRaw === null ||
(Number.isFinite(pct) && pct >= 0 && pct <= 100);
return nameOk && relOk && targetOk && pctOk;
};
// Require at least one valid member
return members.value.some(isMemberValid);
});
// Wizard-required actions
function upsertMember(member) {
const existingIndex = members.value.findIndex((m) => m.id === member.id);
if (existingIndex > -1) {
members.value[existingIndex] = normalizeMember({
...members.value[existingIndex],
...member,
});
} else {
members.value.push(
normalizeMember({
id: member.id || Date.now().toString(),
...member,
})
);
}
}
function setCapacity(memberId, capacity) {
const member = members.value.find((m) => m.id === memberId);
if (member) {
member.capacity = { ...member.capacity, ...capacity };
}
}
function setPayRelationship(memberId, payRelationship) {
const member = members.value.find((m) => m.id === memberId);
if (member) {
member.payRelationship = payRelationship;
}
}
function setRiskBand(memberId, riskBand) {
const member = members.value.find((m) => m.id === memberId);
if (member) {
member.riskBand = riskBand;
}
}
function setExternalCoveragePct(memberId, pct) {
const member = members.value.find((m) => m.id === memberId);
if (member && pct >= 0 && pct <= 100) {
member.externalCoveragePct = pct;
}
}
function setPrivacy(memberId, privacyNeeds) {
const member = members.value.find((m) => m.id === memberId);
if (member) {
member.privacyNeeds = privacyNeeds;
}
}
// Actions
function addMember(member) {
upsertMember(member);
}
function updateMember(id, updates) {
const member = members.value.find((m) => m.id === id);
if (member) {
Object.assign(member, updates);
}
}
function removeMember(id) {
const index = members.value.findIndex((m) => m.id === id);
if (index > -1) {
members.value.splice(index, 1);
}
}
// Reset function
function resetMembers() {
members.value = [];
}
return {
members,
capacityTotals,
privacyFlags,
validationDetails,
isValid,
schemaVersion,
// Wizard actions
upsertMember,
setCapacity,
setPayRelationship,
setRiskBand,
setExternalCoveragePct,
setPrivacy,
resetMembers,
// Legacy actions
addMember,
updateMember,
removeMember,
};
},
{
persist: {
key: "urgent-tools-members",
paths: ["members", "privacyFlags"],
},
}
);

182
stores/policies.ts Normal file
View file

@ -0,0 +1,182 @@
import { defineStore } from "pinia";
export const usePoliciesStore = defineStore(
"policies",
() => {
// Schema version for persistence
const schemaVersion = "1.0";
// Core policies
const equalHourlyWage = ref(0);
const payrollOncostPct = ref(25);
const savingsTargetMonths = ref(3);
const minCashCushionAmount = ref(3000);
// Deferred pay limits
const deferredCapHoursPerQtr = ref(240);
const deferredSunsetMonths = ref(12);
// Surplus distribution order
const surplusOrder = ref([
"Deferred",
"Savings",
"Hardship",
"Training",
"Patronage",
"Retained",
]);
// Payment priority order
const paymentPriority = ref(["Payroll", "Taxes", "CriticalOps", "Vendors"]);
// Volunteer scope - allowed flows
const volunteerScope = ref({
allowedFlows: ["Care", "SharedLearning"],
});
// Validation computed
const isValid = computed(() => {
return (
equalHourlyWage.value > 0 &&
payrollOncostPct.value >= 0 &&
payrollOncostPct.value <= 100 &&
savingsTargetMonths.value >= 0 &&
minCashCushionAmount.value >= 0 &&
deferredCapHoursPerQtr.value >= 0 &&
deferredSunsetMonths.value >= 0
);
});
// Wizard-required actions
function setEqualWage(amount) {
if (amount > 0) {
equalHourlyWage.value = amount;
}
}
function setOncostPct(pct) {
if (pct >= 0 && pct <= 100) {
payrollOncostPct.value = pct;
}
}
function setSavingsTargetMonths(months) {
if (months >= 0) {
savingsTargetMonths.value = months;
}
}
function setMinCashCushion(amount) {
if (amount >= 0) {
minCashCushionAmount.value = amount;
}
}
function setDeferredCap(hours) {
if (hours >= 0) {
deferredCapHoursPerQtr.value = hours;
}
}
function setDeferredSunset(months) {
if (months >= 0) {
deferredSunsetMonths.value = months;
}
}
function setVolunteerScope(allowedFlows) {
volunteerScope.value = { allowedFlows: [...allowedFlows] };
}
function setSurplusOrder(order) {
surplusOrder.value = [...order];
}
function setPaymentPriority(priority) {
paymentPriority.value = [...priority];
}
// Legacy actions
function updatePolicy(key, value) {
if (key === "equalHourlyWage") setEqualWage(value);
else if (key === "payrollOncostPct") setOncostPct(value);
else if (key === "savingsTargetMonths") setSavingsTargetMonths(value);
else if (key === "minCashCushionAmount") setMinCashCushion(value);
else if (key === "deferredCapHoursPerQtr") setDeferredCap(value);
else if (key === "deferredSunsetMonths") setDeferredSunset(value);
}
function updateSurplusOrder(newOrder) {
setSurplusOrder(newOrder);
}
function updatePaymentPriority(newOrder) {
setPaymentPriority(newOrder);
}
// Reset function
function resetPolicies() {
equalHourlyWage.value = 0;
payrollOncostPct.value = 25;
savingsTargetMonths.value = 3;
minCashCushionAmount.value = 3000;
deferredCapHoursPerQtr.value = 240;
deferredSunsetMonths.value = 12;
surplusOrder.value = [
"Deferred",
"Savings",
"Hardship",
"Training",
"Patronage",
"Retained",
];
paymentPriority.value = ["Payroll", "Taxes", "CriticalOps", "Vendors"];
volunteerScope.value = { allowedFlows: ["Care", "SharedLearning"] };
}
return {
equalHourlyWage,
payrollOncostPct,
savingsTargetMonths,
minCashCushionAmount,
deferredCapHoursPerQtr,
deferredSunsetMonths,
surplusOrder,
paymentPriority,
volunteerScope,
isValid,
schemaVersion,
// Wizard actions
setEqualWage,
setOncostPct,
setSavingsTargetMonths,
setMinCashCushion,
setDeferredCap,
setDeferredSunset,
setVolunteerScope,
setSurplusOrder,
setPaymentPriority,
resetPolicies,
// Legacy actions
updatePolicy,
updateSurplusOrder,
updatePaymentPriority,
};
},
{
persist: {
key: "urgent-tools-policies",
paths: [
"equalHourlyWage",
"payrollOncostPct",
"savingsTargetMonths",
"minCashCushionAmount",
"deferredCapHoursPerQtr",
"deferredSunsetMonths",
"surplusOrder",
"paymentPriority",
"volunteerScope",
],
},
}
);

95
stores/scenarios.ts Normal file
View file

@ -0,0 +1,95 @@
import { defineStore } from "pinia";
export const useScenariosStore = defineStore("scenarios", () => {
// Scenario presets
const presets = ref({
current: {
name: "Operate Current Plan",
description: "Continue with existing revenue and capacity",
settings: {},
},
quitDayJobs: {
name: "Quit Day Jobs",
description: "Members leave external work, increase co-op hours",
settings: {
targetHoursMultiplier: 1.5,
externalCoverageReduction: 0.8,
},
},
startProduction: {
name: "Start Production",
description: "Launch product development phase",
settings: {
productionCostsIncrease: 2000,
effortHoursIncrease: 100,
},
},
sixMonth: {
name: "6-Month Plan",
description: "Extended planning horizon",
settings: {
timeHorizonMonths: 6,
},
},
});
// What-if sliders state
const sliders = ref({
monthlyRevenue: 12000,
paidHoursPerMonth: 320,
winRatePct: 70,
avgPayoutDelayDays: 30,
hourlyWageAdjust: 0,
});
// Selected scenario
const activeScenario = ref("current");
// Computed scenario results (will be calculated by composables)
const scenarioResults = computed(() => ({
runway: 2.8,
monthlyCosts: 8700,
cashflowRisk: "medium",
recommendations: [],
}));
// Actions
function setActiveScenario(scenarioKey) {
activeScenario.value = scenarioKey;
}
function updateSlider(key, value) {
if (key in sliders.value) {
sliders.value[key] = value;
}
}
function resetSliders() {
sliders.value = {
monthlyRevenue: 12000,
paidHoursPerMonth: 320,
winRatePct: 70,
avgPayoutDelayDays: 30,
hourlyWageAdjust: 0,
};
}
function saveCustomScenario(name, settings) {
presets.value[name.toLowerCase().replace(/\s+/g, "")] = {
name,
description: "Custom scenario",
settings,
};
}
return {
presets: readonly(presets),
sliders,
activeScenario: readonly(activeScenario),
scenarioResults,
setActiveScenario,
updateSlider,
resetSliders,
saveCustomScenario,
};
});

132
stores/session.ts Normal file
View file

@ -0,0 +1,132 @@
import { defineStore } from "pinia";
export const useSessionStore = defineStore("session", () => {
// Value Accounting session checklist state
const checklist = ref({
monthClosed: false,
contributionsLogged: false,
surplusCalculated: false,
needsReviewed: false,
});
// Draft distribution allocations
const draftAllocations = ref({
deferredRepay: 0,
savings: 0,
hardship: 0,
training: 0,
patronage: 0,
retained: 0,
});
// Session rationale text
const rationale = ref("");
// Current session period
const currentSession = ref("2024-01");
// Saved distribution records
const savedRecords = ref([]);
// Available amounts for distribution
const availableAmounts = ref({
surplus: 0,
deferredOwed: 0,
savingsNeeded: 0,
});
// Computed total allocated
const totalAllocated = computed(() =>
Object.values(draftAllocations.value).reduce(
(sum, amount) => sum + amount,
0
)
);
// Computed checklist completion
const checklistComplete = computed(() =>
Object.values(checklist.value).every(Boolean)
);
// Actions
function updateChecklistItem(key, value) {
if (key in checklist.value) {
checklist.value[key] = value;
}
}
function updateAllocation(key, amount) {
if (key in draftAllocations.value) {
draftAllocations.value[key] = Number(amount) || 0;
}
}
function resetAllocations() {
Object.keys(draftAllocations.value).forEach((key) => {
draftAllocations.value[key] = 0;
});
}
function updateRationale(text) {
rationale.value = text;
}
function saveSession() {
const record = {
id: Date.now().toString(),
period: currentSession.value,
date: new Date().toISOString(),
allocations: { ...draftAllocations.value },
rationale: rationale.value,
checklist: { ...checklist.value },
};
savedRecords.value.push(record);
// Reset for next session
resetAllocations();
rationale.value = "";
Object.keys(checklist.value).forEach((key) => {
checklist.value[key] = false;
});
return record;
}
function loadSession(period) {
const record = savedRecords.value.find((r) => r.period === period);
if (record) {
currentSession.value = period;
Object.assign(draftAllocations.value, record.allocations);
rationale.value = record.rationale;
Object.assign(checklist.value, record.checklist);
}
}
function setCurrentSession(period) {
currentSession.value = period;
}
function updateAvailableAmounts(amounts) {
Object.assign(availableAmounts.value, amounts);
}
return {
checklist,
draftAllocations,
rationale,
currentSession: readonly(currentSession),
savedRecords: readonly(savedRecords),
availableAmounts: readonly(availableAmounts),
totalAllocated,
checklistComplete,
updateChecklistItem,
updateAllocation,
resetAllocations,
updateRationale,
saveSession,
loadSession,
setCurrentSession,
updateAvailableAmounts,
};
});

117
stores/streams.ts Normal file
View file

@ -0,0 +1,117 @@
import { defineStore } from "pinia";
export const useStreamsStore = defineStore(
"streams",
() => {
// Schema version for persistence
const schemaVersion = "1.0";
// Revenue streams with all properties
const streams = ref([]);
// Computed totals
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
)
);
// Validation computed
const targetPctDeviation = computed(() => {
const total = totalTargetPct.value;
return Math.abs(100 - total);
});
const hasValidStreams = computed(() => {
return streams.value.every(
(stream) =>
stream.name &&
stream.category &&
stream.payoutDelayDays >= 0 &&
(stream.targetPct >= 0 || stream.targetMonthlyAmount >= 0)
);
});
// Wizard-required actions
function upsertStream(stream) {
const existingIndex = streams.value.findIndex((s) => s.id === stream.id);
if (existingIndex > -1) {
streams.value[existingIndex] = {
...streams.value[existingIndex],
...stream,
};
} else {
const newStream = {
id: stream.id || Date.now().toString(),
name: stream.name,
category: stream.category,
subcategory: stream.subcategory || "",
targetPct: stream.targetPct || 0,
targetMonthlyAmount: stream.targetMonthlyAmount || 0,
certainty: stream.certainty || "Aspirational", // Committed|Probable|Aspirational
payoutDelayDays: stream.payoutDelayDays || 0,
terms: stream.terms || "",
revenueSharePct: stream.revenueSharePct || 0,
platformFeePct: stream.platformFeePct || 0,
restrictions: stream.restrictions || "General", // Restricted|General
seasonalityWeights:
stream.seasonalityWeights || new Array(12).fill(1),
effortHoursPerMonth: stream.effortHoursPerMonth || 0,
...stream,
};
streams.value.push(newStream);
}
}
// Legacy actions
function addStream(stream) {
upsertStream(stream);
}
function updateStream(id, updates) {
const stream = streams.value.find((s) => s.id === id);
if (stream) {
Object.assign(stream, updates);
}
}
function removeStream(id) {
const index = streams.value.findIndex((s) => s.id === id);
if (index > -1) {
streams.value.splice(index, 1);
}
}
// Reset function
function resetStreams() {
streams.value = [];
}
return {
streams,
totalTargetPct,
totalMonthlyAmount,
targetPctDeviation,
hasValidStreams,
schemaVersion,
// Wizard actions
upsertStream,
resetStreams,
// Legacy actions
addStream,
updateStream,
removeStream,
};
},
{
persist: {
key: "urgent-tools-streams",
paths: ["streams"],
},
}
);

28
stores/wizard.ts Normal file
View file

@ -0,0 +1,28 @@
import { defineStore } from "pinia";
export const useWizardStore = defineStore(
"wizard",
() => {
const currentStep = ref(1);
function setStep(step: number) {
currentStep.value = Math.min(Math.max(1, step), 5);
}
function reset() {
currentStep.value = 1;
}
return {
currentStep,
setStep,
reset,
};
},
{
persist: {
key: "urgent-tools-wizard",
paths: ["currentStep"],
},
}
);