chore: update application configuration and UI components for improved styling and functionality
This commit is contained in:
parent
0af6b17792
commit
37ab8d7bab
54 changed files with 23293 additions and 1666 deletions
|
|
@ -4,33 +4,28 @@
|
|||
<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"
|
||||
<div class="text-sm text-neutral-600">{{ label }}</div>
|
||||
<UProgress
|
||||
:value="coveragePct"
|
||||
:max="100"
|
||||
:color="progressColor"
|
||||
class="mt-2"
|
||||
:ui="{ progress: { background: 'bg-gray-200' } }"
|
||||
:ui="{ progress: { background: 'bg-neutral-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"
|
||||
>
|
||||
: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 v-if="showHours" class="text-xs text-neutral-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">
|
||||
<p v-if="description" class="text-xs text-neutral-500 mt-2">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -39,63 +34,81 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
fundedPaidHours: number
|
||||
targetHours: number
|
||||
label?: string
|
||||
description?: string
|
||||
showHours?: boolean
|
||||
fundedPaidHours: number;
|
||||
targetHours: number;
|
||||
label?: string;
|
||||
description?: string;
|
||||
showHours?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Coverage vs Capacity',
|
||||
showHours: true
|
||||
})
|
||||
label: "Coverage vs Capacity",
|
||||
showHours: true,
|
||||
});
|
||||
|
||||
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage()
|
||||
const { calculateCoverage, getCoverageStatus, formatCoverage } = useCoverage();
|
||||
|
||||
const coveragePct = computed(() =>
|
||||
const coveragePct = computed(() =>
|
||||
Math.round(calculateCoverage(props.fundedPaidHours, props.targetHours))
|
||||
)
|
||||
);
|
||||
|
||||
const status = computed(() => getCoverageStatus(coveragePct.value))
|
||||
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 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'
|
||||
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'
|
||||
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'
|
||||
case "green":
|
||||
return "text-green-600";
|
||||
case "yellow":
|
||||
return "text-yellow-600";
|
||||
case "red":
|
||||
return "text-red-600";
|
||||
default:
|
||||
return "text-neutral-600";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (status.value) {
|
||||
case 'green': return 'Well Funded'
|
||||
case 'yellow': return 'Moderate'
|
||||
case 'red': return 'Underfunded'
|
||||
default: return 'Unknown'
|
||||
case "green":
|
||||
return "Well Funded";
|
||||
case "yellow":
|
||||
return "Moderate";
|
||||
case "red":
|
||||
return "Underfunded";
|
||||
default:
|
||||
return "Unknown";
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,38 +1,35 @@
|
|||
<template>
|
||||
<UTooltip
|
||||
<UTooltip
|
||||
:text="definition"
|
||||
:ui="{
|
||||
background: 'bg-white dark:bg-gray-900',
|
||||
ring: 'ring-1 ring-gray-200 dark:ring-gray-800',
|
||||
:ui="{
|
||||
background: 'bg-white dark:bg-neutral-900',
|
||||
ring: 'ring-1 ring-neutral-200 dark:ring-neutral-800',
|
||||
rounded: 'rounded-lg',
|
||||
shadow: 'shadow-lg',
|
||||
base: 'px-3 py-2 text-sm max-w-xs'
|
||||
base: 'px-3 py-2 text-sm max-w-xs',
|
||||
}"
|
||||
:popper="{ arrow: true }"
|
||||
>
|
||||
: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}`"
|
||||
<div class="text-neutral-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')"
|
||||
>
|
||||
@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"
|
||||
|
||||
<span
|
||||
class="underline decoration-dotted decoration-neutral-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')"
|
||||
>
|
||||
@keydown.space.prevent="$emit('glossary-click')">
|
||||
<slot>{{ term }}</slot>
|
||||
</span>
|
||||
</UTooltip>
|
||||
|
|
@ -40,15 +37,15 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
term: string
|
||||
termId: string
|
||||
definition: string
|
||||
emphasis?: boolean
|
||||
term: string;
|
||||
termId: string;
|
||||
definition: string;
|
||||
emphasis?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
emphasis: false
|
||||
})
|
||||
emphasis: false,
|
||||
});
|
||||
|
||||
defineEmits(['glossary-click'])
|
||||
defineEmits(["glossary-click"]);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,33 +4,28 @@
|
|||
<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"
|
||||
<div class="text-sm text-neutral-600">{{ label }}</div>
|
||||
<UProgress
|
||||
:value="progressPct"
|
||||
:max="100"
|
||||
:color="progressColor"
|
||||
class="mt-2"
|
||||
:ui="{ progress: { background: 'bg-gray-200' } }"
|
||||
:ui="{ progress: { background: 'bg-neutral-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"
|
||||
>
|
||||
: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 v-if="showAmounts" class="text-xs text-neutral-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">
|
||||
<p v-if="description" class="text-xs text-neutral-500 mt-2">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -39,64 +34,84 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
currentSavings: number
|
||||
savingsTargetMonths: number
|
||||
monthlyBurn: number
|
||||
label?: string
|
||||
description?: string
|
||||
showAmounts?: boolean
|
||||
currentSavings: number;
|
||||
savingsTargetMonths: number;
|
||||
monthlyBurn: number;
|
||||
label?: string;
|
||||
description?: string;
|
||||
showAmounts?: boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Savings Progress',
|
||||
showAmounts: true
|
||||
})
|
||||
label: "Savings Progress",
|
||||
showAmounts: true,
|
||||
});
|
||||
|
||||
const { analyzeReserveProgress } = useReserveProgress()
|
||||
const { analyzeReserveProgress } = useReserveProgress();
|
||||
|
||||
const analysis = computed(() =>
|
||||
analyzeReserveProgress(props.currentSavings, props.savingsTargetMonths, props.monthlyBurn)
|
||||
)
|
||||
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 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'
|
||||
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'
|
||||
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'
|
||||
case "green":
|
||||
return "text-green-600";
|
||||
case "yellow":
|
||||
return "text-yellow-600";
|
||||
case "red":
|
||||
return "text-red-600";
|
||||
default:
|
||||
return "text-neutral-600";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (status.value) {
|
||||
case 'green': return 'On Track'
|
||||
case 'yellow': return 'Building'
|
||||
case 'red': return 'Below Target'
|
||||
default: return 'Unknown'
|
||||
case "green":
|
||||
return "On Track";
|
||||
case "yellow":
|
||||
return "Building";
|
||||
case "red":
|
||||
return "Below Target";
|
||||
default:
|
||||
return "Unknown";
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -4,28 +4,23 @@
|
|||
<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' } }"
|
||||
<div class="text-sm text-neutral-600">{{ label }}</div>
|
||||
<UProgress
|
||||
:value="progressValue"
|
||||
:max="maxValue"
|
||||
:color="progressColor"
|
||||
class="mt-2"
|
||||
:ui="{ progress: { background: 'bg-neutral-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"
|
||||
>
|
||||
: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">
|
||||
<p v-if="description" class="text-xs text-neutral-500 mt-2">
|
||||
{{ description }}
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -34,58 +29,74 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
interface Props {
|
||||
months: number
|
||||
label?: string
|
||||
description?: string
|
||||
maxMonths?: number
|
||||
months: number;
|
||||
label?: string;
|
||||
description?: string;
|
||||
maxMonths?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Runway',
|
||||
maxMonths: 12
|
||||
})
|
||||
label: "Runway",
|
||||
maxMonths: 12,
|
||||
});
|
||||
|
||||
const { formatRunway, getRunwayStatus } = useRunway()
|
||||
const { formatRunway, getRunwayStatus } = useRunway();
|
||||
|
||||
const formattedValue = computed(() => formatRunway(props.months))
|
||||
const status = computed(() => getRunwayStatus(props.months))
|
||||
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 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'
|
||||
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'
|
||||
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'
|
||||
case "green":
|
||||
return "text-green-600";
|
||||
case "yellow":
|
||||
return "text-yellow-600";
|
||||
case "red":
|
||||
return "text-red-600";
|
||||
default:
|
||||
return "text-neutral-600";
|
||||
}
|
||||
})
|
||||
});
|
||||
|
||||
const statusText = computed(() => {
|
||||
switch (status.value) {
|
||||
case 'green': return 'Healthy'
|
||||
case 'yellow': return 'Caution'
|
||||
case 'red': return 'Critical'
|
||||
default: return 'Unknown'
|
||||
case "green":
|
||||
return "Healthy";
|
||||
case "yellow":
|
||||
return "Caution";
|
||||
case "red":
|
||||
return "Critical";
|
||||
default:
|
||||
return "Unknown";
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,55 +1,74 @@
|
|||
<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>
|
||||
<h3 class="text-2xl font-black text-black mb-4">
|
||||
Where does your money go?
|
||||
</h3>
|
||||
</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">
|
||||
<div
|
||||
v-if="overheadCosts.length > 0"
|
||||
class="flex items-center justify-between">
|
||||
<h4 class="text-lg font-bold text-black">Monthly Overhead</h4>
|
||||
<UButton
|
||||
size="sm"
|
||||
@click="addOverheadCost"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-1" />
|
||||
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">
|
||||
class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
|
||||
<h4 class="font-medium text-neutral-900 mb-2">No overhead costs yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add costs like rent, tools, insurance, or other recurring expenses.
|
||||
</p>
|
||||
<UButton
|
||||
@click="addOverheadCost"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="primary">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add your first cost
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="cost in overheadCosts"
|
||||
:key="cost.id"
|
||||
class="p-4 border border-gray-200 rounded-lg">
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<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"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@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"
|
||||
v-model="cost.amount"
|
||||
type="text"
|
||||
placeholder="800.00"
|
||||
@update:model-value="saveCost(cost)"
|
||||
size="xl"
|
||||
class="text-lg font-bold w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, cost)"
|
||||
@blur="saveCost(cost)">
|
||||
<template #leading>
|
||||
<span class="text-gray-500">€</span>
|
||||
<span class="text-neutral-500">€</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
|
|
@ -58,65 +77,40 @@
|
|||
<USelect
|
||||
v-model="cost.category"
|
||||
:items="categoryOptions"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="saveCost(cost)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="red"
|
||||
@click="removeCost(cost.id)">
|
||||
Remove
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="error"
|
||||
@click="removeCost(cost.id)"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
||||
}">
|
||||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</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>
|
||||
<!-- Add Cost Button (when items exist) -->
|
||||
<div v-if="overheadCosts.length > 0" class="flex justify-center">
|
||||
<UButton
|
||||
@click="addOverheadCost"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add another cost
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -182,6 +176,13 @@ function saveCost(cost: any) {
|
|||
}
|
||||
}
|
||||
|
||||
// Validation function for amount
|
||||
function validateAndSaveAmount(value: string, cost: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
cost.amount = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveCost(cost);
|
||||
}
|
||||
|
||||
function addOverheadCost() {
|
||||
const newCost = {
|
||||
id: Date.now().toString(),
|
||||
|
|
|
|||
|
|
@ -1,113 +1,123 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<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 class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-black text-black">Who's on your team?</h3>
|
||||
<UButton
|
||||
v-if="members.length > 0"
|
||||
@click="addMember"
|
||||
size="sm"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-1" />
|
||||
Add member
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Members List -->
|
||||
<div class="space-y-4">
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-if="members.length === 0"
|
||||
class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
|
||||
<h4 class="font-medium text-neutral-900 mb-2">No team members yet</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add everyone who'll be working in the co-op, even if they're not ready
|
||||
to be paid yet.
|
||||
</p>
|
||||
<UButton @click="addMember" size="lg" variant="solid" color="primary">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add your first member
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
<UFormField label="Name" required class="md:col-span-2">
|
||||
<UInput
|
||||
v-model="member.displayName"
|
||||
placeholder="Alex Chen"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@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"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
|
||||
<UFormField label="Pay Relationship" required>
|
||||
<USelect
|
||||
v-model="member.payRelationship"
|
||||
:items="payRelationshipOptions"
|
||||
@update:model-value="saveMember(member)" />
|
||||
</UFormField>
|
||||
</div>
|
||||
<UFormField label="Hours/month" required>
|
||||
<UInput
|
||||
v-model="member.capacity.targetHours"
|
||||
type="text"
|
||||
placeholder="120"
|
||||
size="xl"
|
||||
class="text-xl font-bold w-full"
|
||||
@update:model-value="validateAndSaveHours($event, member)"
|
||||
@blur="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 class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-3">
|
||||
<UFormField label="External income coverage %" class="md:col-span-1">
|
||||
<UInput
|
||||
v-model="member.externalCoveragePct"
|
||||
type="text"
|
||||
placeholder="50"
|
||||
size="xl"
|
||||
class="text-lg font-medium w-full"
|
||||
@update:model-value="validateAndSavePercentage($event, member)"
|
||||
@blur="saveMember(member)" />
|
||||
<template #help>
|
||||
<span class="text-xs text-neutral-500"
|
||||
>% of needs covered by other income</span
|
||||
>
|
||||
</template>
|
||||
</UFormField>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
|
||||
<div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="red"
|
||||
@click="removeMember(member.id)">
|
||||
Remove
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="error"
|
||||
@click="removeMember(member.id)"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
||||
}">
|
||||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</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 v-if="members.length > 0" class="flex justify-center">
|
||||
<UButton
|
||||
@click="addMember"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add another member
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -169,19 +179,34 @@ function saveMember(member: any) {
|
|||
debouncedSave(member);
|
||||
}
|
||||
|
||||
// Validation functions
|
||||
function validateAndSaveHours(value: string, member: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member.capacity.targetHours = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
function validateAndSavePercentage(value: string, member: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
member.externalCoveragePct = isNaN(numValue)
|
||||
? 0
|
||||
: Math.min(100, Math.max(0, numValue));
|
||||
saveMember(member);
|
||||
}
|
||||
|
||||
function addMember() {
|
||||
const newMember = {
|
||||
id: Date.now().toString(),
|
||||
displayName: "",
|
||||
roleFocus: "",
|
||||
roleFocus: "", // Hidden but kept for compatibility
|
||||
payRelationship: "FullyPaid",
|
||||
capacity: {
|
||||
minHours: 0,
|
||||
targetHours: 0,
|
||||
maxHours: 0,
|
||||
},
|
||||
riskBand: "Medium",
|
||||
externalCoveragePct: 0,
|
||||
riskBand: "Medium", // Hidden but kept with default
|
||||
externalCoveragePct: 50,
|
||||
privacyNeeds: "aggregate_ok",
|
||||
deferredHours: 0,
|
||||
quarterlyDeferredCap: 240,
|
||||
|
|
|
|||
|
|
@ -1,162 +1,28 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<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>
|
||||
<h3 class="text-2xl font-black text-black mb-6">
|
||||
What's your equal hourly wage?
|
||||
</h3>
|
||||
</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 class="max-w-md">
|
||||
<UInput
|
||||
v-model="wageText"
|
||||
type="text"
|
||||
placeholder="0.00"
|
||||
size="xl"
|
||||
class="text-4xl font-black w-full h-20"
|
||||
@update:model-value="validateAndSaveWage">
|
||||
<template #leading>
|
||||
<span class="text-neutral-500 text-3xl">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
|
@ -174,91 +40,65 @@ function parseNumberInput(val: unknown): number {
|
|||
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)),
|
||||
});
|
||||
// Text input for wage with validation
|
||||
const wageText = ref(
|
||||
policiesStore.equalHourlyWage > 0
|
||||
? policiesStore.equalHourlyWage.toString()
|
||||
: ""
|
||||
);
|
||||
|
||||
// Remove old local sync and debounce saving; direct v-model handles persistence
|
||||
// Watch for store changes to update text field
|
||||
watch(
|
||||
() => policiesStore.equalHourlyWage,
|
||||
(newWage) => {
|
||||
wageText.value = newWage > 0 ? newWage.toString() : "";
|
||||
}
|
||||
);
|
||||
|
||||
// Volunteer flows
|
||||
const availableFlows = [
|
||||
{ label: "Care Work", value: "Care" },
|
||||
{ label: "Shared Learning", value: "SharedLearning" },
|
||||
{ label: "Community Building", value: "Community" },
|
||||
{ label: "Outreach", value: "Outreach" },
|
||||
];
|
||||
function validateAndSaveWage(value: string) {
|
||||
const cleanValue = value.replace(/[^\d.]/g, "");
|
||||
const numValue = parseFloat(cleanValue);
|
||||
|
||||
const selectedVolunteerFlows = ref([
|
||||
...policiesStore.volunteerScope.allowedFlows,
|
||||
]);
|
||||
wageText.value = cleanValue;
|
||||
|
||||
// Minimal save-status feedback on changes
|
||||
function notifySaved() {
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
if (!isNaN(numValue) && numValue >= 0) {
|
||||
policiesStore.setEqualWage(numValue);
|
||||
|
||||
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);
|
||||
// Set sensible defaults when wage is set
|
||||
if (numValue > 0) {
|
||||
setDefaults();
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
}
|
||||
|
||||
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");
|
||||
// Set reasonable defaults for hidden fields
|
||||
function setDefaults() {
|
||||
if (policiesStore.payrollOncostPct === 0) {
|
||||
policiesStore.setOncostPct(25); // 25% on-costs
|
||||
}
|
||||
if (policiesStore.savingsTargetMonths === 0) {
|
||||
policiesStore.setSavingsTargetMonths(3); // 3 months savings
|
||||
}
|
||||
if (policiesStore.minCashCushionAmount === 0) {
|
||||
policiesStore.setMinCashCushion(3000); // €3k cushion
|
||||
}
|
||||
if (policiesStore.deferredCapHoursPerQtr === 0) {
|
||||
policiesStore.setDeferredCap(240); // 240 hours quarterly cap
|
||||
}
|
||||
if (policiesStore.deferredSunsetMonths === 0) {
|
||||
policiesStore.setDeferredSunset(12); // 12 month sunset
|
||||
}
|
||||
// Set default volunteer flows
|
||||
if (policiesStore.volunteerScope.allowedFlows.length === 0) {
|
||||
policiesStore.setVolunteerScope(["Care", "SharedLearning"]);
|
||||
}
|
||||
}
|
||||
|
||||
// Set defaults on mount if needed
|
||||
onMounted(() => {
|
||||
if (policiesStore.equalHourlyWage > 0) {
|
||||
setDefaults();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,237 +1,116 @@
|
|||
<template>
|
||||
<div class="space-y-6">
|
||||
<div class="space-y-4">
|
||||
<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
|
||||
<div class="flex items-center justify-between mb-6">
|
||||
<h3 class="text-2xl font-black text-black">
|
||||
Where will your money come from?
|
||||
</h3>
|
||||
<UButton
|
||||
v-if="streams.length > 0"
|
||||
@click="addRevenueStream"
|
||||
size="sm"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-1" />
|
||||
Add stream
|
||||
</UButton>
|
||||
</div>
|
||||
</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.
|
||||
<div class="space-y-3">
|
||||
<div
|
||||
v-if="streams.length === 0"
|
||||
class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
|
||||
<h4 class="font-medium text-neutral-900 mb-2">
|
||||
No revenue streams yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500 mb-4">
|
||||
Add sources like client work, grants, product sales, or donations.
|
||||
</p>
|
||||
<UButton
|
||||
@click="addRevenueStream"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="primary">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add your first revenue stream
|
||||
</UButton>
|
||||
</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>
|
||||
class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<UFormField label="Category" required>
|
||||
<USelect
|
||||
v-model="stream.category"
|
||||
:items="categoryOptions"
|
||||
size="xl"
|
||||
class="text-xl font-bold w-full"
|
||||
@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="Revenue source name" required>
|
||||
<USelectMenu
|
||||
v-model="stream.name"
|
||||
:items="nameOptionsByCategory[stream.category] || []"
|
||||
placeholder="Select or type a source name"
|
||||
creatable
|
||||
searchable
|
||||
size="xl"
|
||||
class="text-xl font-bold w-full"
|
||||
@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>
|
||||
<UFormField label="Monthly amount" required>
|
||||
<UInput
|
||||
v-model="stream.targetMonthlyAmount"
|
||||
type="text"
|
||||
placeholder="5000"
|
||||
size="xl"
|
||||
class="text-xl font-black w-full"
|
||||
@update:model-value="validateAndSaveAmount($event, stream)"
|
||||
@blur="saveStream(stream)">
|
||||
<template #leading>
|
||||
<span class="text-neutral-500 text-xl">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormField>
|
||||
</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">
|
||||
<div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
|
||||
<UButton
|
||||
size="sm"
|
||||
variant="ghost"
|
||||
color="red"
|
||||
@click="removeStream(stream.id)">
|
||||
Remove
|
||||
size="xs"
|
||||
variant="solid"
|
||||
color="error"
|
||||
@click="removeStream(stream.id)"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:opacity-90 transition-opacity',
|
||||
}">
|
||||
<UIcon name="i-heroicons-trash" class="w-4 h-4" />
|
||||
</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>
|
||||
<!-- Add Stream Button (when items exist) -->
|
||||
<div v-if="streams.length > 0" class="flex justify-center">
|
||||
<UButton
|
||||
@click="addRevenueStream"
|
||||
size="lg"
|
||||
variant="solid"
|
||||
color="success"
|
||||
:ui="{
|
||||
base: 'cursor-pointer hover:scale-105 transition-transform',
|
||||
leadingIcon: 'hover:rotate-90 transition-transform',
|
||||
}">
|
||||
<UIcon name="i-heroicons-plus" class="mr-2" />
|
||||
Add another stream
|
||||
</UButton>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -240,6 +119,7 @@
|
|||
<script setup lang="ts">
|
||||
import { useDebounceFn } from "@vueuse/core";
|
||||
import { storeToRefs } from "pinia";
|
||||
|
||||
const emit = defineEmits<{
|
||||
"save-status": [status: "saving" | "saved" | "error"];
|
||||
}>();
|
||||
|
|
@ -248,7 +128,7 @@ const emit = defineEmits<{
|
|||
const streamsStore = useStreamsStore();
|
||||
const { streams } = storeToRefs(streamsStore);
|
||||
|
||||
// Options
|
||||
// Original category options
|
||||
const categoryOptions = [
|
||||
{ label: "Games & Products", value: "games" },
|
||||
{ label: "Services & Contracts", value: "services" },
|
||||
|
|
@ -259,7 +139,7 @@ const categoryOptions = [
|
|||
{ label: "In-Kind Contributions", value: "inkind" },
|
||||
];
|
||||
|
||||
// Suggested names per category
|
||||
// Suggested names per category (subcategories)
|
||||
const nameOptionsByCategory: Record<string, string[]> = {
|
||||
games: [
|
||||
"Direct sales",
|
||||
|
|
@ -301,69 +181,27 @@ const nameOptionsByCategory: Record<string, string[]> = {
|
|||
],
|
||||
};
|
||||
|
||||
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)
|
||||
)
|
||||
// Computed
|
||||
const totalMonthlyAmount = computed(() =>
|
||||
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 {
|
||||
// Set sensible defaults for hidden fields
|
||||
stream.targetPct = 0; // Will be calculated automatically later
|
||||
stream.certainty = "Aspirational";
|
||||
stream.payoutDelayDays = 30; // Default 30 days
|
||||
stream.terms = "Net 30";
|
||||
stream.revenueSharePct = 0;
|
||||
stream.platformFeePct = 0;
|
||||
stream.restrictions = "General";
|
||||
stream.seasonalityWeights = new Array(12).fill(1);
|
||||
stream.effortHoursPerMonth = 0;
|
||||
|
||||
streamsStore.upsertStream(stream);
|
||||
emit("save-status", "saved");
|
||||
} catch (error) {
|
||||
|
|
@ -373,11 +211,18 @@ const debouncedSave = useDebounceFn((stream: any) => {
|
|||
}, 300);
|
||||
|
||||
function saveStream(stream: any) {
|
||||
if (stream.name && stream.category && stream.targetPct >= 0) {
|
||||
if (stream.name && stream.category && stream.targetMonthlyAmount >= 0) {
|
||||
debouncedSave(stream);
|
||||
}
|
||||
}
|
||||
|
||||
// Validation function for amount
|
||||
function validateAndSaveAmount(value: string, stream: any) {
|
||||
const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
|
||||
stream.targetMonthlyAmount = isNaN(numValue) ? 0 : Math.max(0, numValue);
|
||||
saveStream(stream);
|
||||
}
|
||||
|
||||
function addRevenueStream() {
|
||||
const newStream = {
|
||||
id: Date.now().toString(),
|
||||
|
|
@ -387,8 +232,8 @@ function addRevenueStream() {
|
|||
targetPct: 0,
|
||||
targetMonthlyAmount: 0,
|
||||
certainty: "Aspirational",
|
||||
payoutDelayDays: 0,
|
||||
terms: "",
|
||||
payoutDelayDays: 30,
|
||||
terms: "Net 30",
|
||||
revenueSharePct: 0,
|
||||
platformFeePct: 0,
|
||||
restrictions: "General",
|
||||
|
|
|
|||
|
|
@ -2,7 +2,10 @@
|
|||
<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>
|
||||
<p class="text-neutral-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">
|
||||
|
|
@ -12,31 +15,38 @@
|
|||
<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' }}
|
||||
{{ 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
|
||||
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>
|
||||
<span class="font-medium">{{
|
||||
member.displayName || "Unnamed Member"
|
||||
}}</span>
|
||||
<span v-if="member.roleFocus" class="text-neutral-500 ml-1"
|
||||
>({{ member.roleFocus }})</span
|
||||
>
|
||||
</div>
|
||||
<div class="text-right text-xs text-gray-500">
|
||||
<div>{{ member.payRelationship || 'No relationship set' }}</div>
|
||||
<div class="text-right text-xs text-neutral-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="pt-3 border-t border-neutral-100">
|
||||
<div class="grid grid-cols-2 gap-4 text-xs">
|
||||
<div>
|
||||
<span class="text-gray-600">Total capacity:</span>
|
||||
<span class="text-neutral-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="text-neutral-600">Avg external:</span>
|
||||
<span class="font-medium ml-1">{{ avgExternal }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -50,35 +60,47 @@
|
|||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Policies</h4>
|
||||
<UBadge :color="policiesValid ? 'green' : 'red'" variant="subtle">
|
||||
{{ policiesValid ? 'Valid' : 'Incomplete' }}
|
||||
{{ 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>
|
||||
<span class="text-neutral-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>
|
||||
<span class="text-neutral-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>
|
||||
<span class="text-neutral-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>
|
||||
<span class="text-neutral-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>
|
||||
<span class="text-neutral-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>
|
||||
<span class="text-neutral-600">Volunteer flows:</span>
|
||||
<span class="font-medium"
|
||||
>{{ policies.volunteerScope.allowedFlows.length }} types</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</UCard>
|
||||
|
|
@ -87,25 +109,33 @@
|
|||
<UCard>
|
||||
<template #header>
|
||||
<div class="flex items-center justify-between">
|
||||
<h4 class="font-medium">Overhead Costs ({{ overheadCosts.length }})</h4>
|
||||
<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 v-if="overheadCosts.length === 0" class="text-center py-8">
|
||||
<h4 class="font-medium text-neutral-900 mb-1">
|
||||
No overhead costs yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500">Optional - add costs in step 3</p>
|
||||
</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>
|
||||
<div
|
||||
v-for="cost in overheadCosts.slice(0, 3)"
|
||||
:key="cost.id"
|
||||
class="flex justify-between text-sm">
|
||||
<span class="text-neutral-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">
|
||||
<div v-if="overheadCosts.length > 3" class="text-xs text-neutral-500">
|
||||
+{{ overheadCosts.length - 3 }} more items
|
||||
</div>
|
||||
|
||||
<div class="pt-2 border-t border-gray-100">
|
||||
|
||||
<div class="pt-2 border-t border-neutral-100">
|
||||
<div class="flex justify-between text-sm font-medium">
|
||||
<span>Monthly total:</span>
|
||||
<span>€{{ totalMonthlyCosts }}</span>
|
||||
|
|
@ -120,41 +150,55 @@
|
|||
<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' }}
|
||||
{{ 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 v-if="streams.length === 0" class="text-center py-8">
|
||||
<h4 class="font-medium text-neutral-900 mb-1">
|
||||
No revenue streams yet
|
||||
</h4>
|
||||
<p class="text-sm text-neutral-500">
|
||||
Required - add streams in step 4
|
||||
</p>
|
||||
</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
|
||||
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>
|
||||
<span class="font-medium">{{
|
||||
stream.name || "Unnamed Stream"
|
||||
}}</span>
|
||||
<span class="text-neutral-600">{{ stream.targetPct || 0 }}%</span>
|
||||
</div>
|
||||
<div class="flex justify-between text-xs text-gray-500">
|
||||
<div class="flex justify-between text-xs text-neutral-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">
|
||||
|
||||
<div v-if="streams.length > 3" class="text-xs text-neutral-500">
|
||||
+{{ streams.length - 3 }} more streams
|
||||
</div>
|
||||
|
||||
<div class="pt-3 border-t border-gray-100">
|
||||
|
||||
<div class="pt-3 border-t border-neutral-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'">
|
||||
<span class="text-neutral-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="text-neutral-600">Monthly target:</span>
|
||||
<span class="font-medium ml-1">€{{ totalMonthlyTarget }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -164,71 +208,91 @@
|
|||
</div>
|
||||
|
||||
<!-- Overall Status -->
|
||||
<div class="bg-gray-50 rounded-lg p-4">
|
||||
<div class="bg-neutral-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'"
|
||||
<UIcon
|
||||
:name="
|
||||
membersValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="membersValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
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'"
|
||||
<UIcon
|
||||
:name="
|
||||
policiesValid
|
||||
? 'i-heroicons-check-circle'
|
||||
: 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="policiesValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
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" />
|
||||
<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'"
|
||||
<UIcon
|
||||
:name="
|
||||
streamsValid ? 'i-heroicons-check-circle' : 'i-heroicons-x-circle'
|
||||
"
|
||||
:class="streamsValid ? 'text-green-500' : 'text-red-500'"
|
||||
class="w-4 h-4"
|
||||
/>
|
||||
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
|
||||
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>
|
||||
<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>
|
||||
<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">
|
||||
<UButton variant="ghost" color="red" @click="$emit('reset')">
|
||||
Reset All Data
|
||||
</UButton>
|
||||
|
||||
|
||||
<div class="flex gap-3">
|
||||
<UButton variant="outline" @click="exportSetup">
|
||||
<UButton variant="outline" color="gray" @click="exportSetup">
|
||||
Export Setup
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="completeSetup"
|
||||
<UButton
|
||||
@click="completeSetup"
|
||||
:disabled="!canComplete"
|
||||
size="lg"
|
||||
>
|
||||
variant="solid"
|
||||
color="primary">
|
||||
Complete Setup
|
||||
</UButton>
|
||||
</div>
|
||||
|
|
@ -238,59 +302,66 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
const emit = defineEmits<{
|
||||
'complete': []
|
||||
'reset': []
|
||||
}>()
|
||||
complete: [];
|
||||
reset: [];
|
||||
}>();
|
||||
|
||||
// Stores
|
||||
const membersStore = useMembersStore()
|
||||
const policiesStore = usePoliciesStore()
|
||||
const budgetStore = useBudgetStore()
|
||||
const streamsStore = useStreamsStore()
|
||||
const membersStore = useMembersStore();
|
||||
const policiesStore = usePoliciesStore();
|
||||
const budgetStore = useBudgetStore();
|
||||
const streamsStore = useStreamsStore();
|
||||
|
||||
// Computed data
|
||||
const members = computed(() => membersStore.members)
|
||||
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)
|
||||
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)
|
||||
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(() =>
|
||||
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)
|
||||
})
|
||||
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(() =>
|
||||
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))
|
||||
)
|
||||
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')
|
||||
emit("complete");
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -302,18 +373,20 @@ function exportSetup() {
|
|||
overheadCosts: overheadCosts.value,
|
||||
streams: streams.value,
|
||||
exportedAt: new Date().toISOString(),
|
||||
version: '1.0'
|
||||
}
|
||||
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)
|
||||
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>
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue