367 lines
13 KiB
Vue
367 lines
13 KiB
Vue
<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>
|