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