93 lines
No EOL
2.8 KiB
Vue
93 lines
No EOL
2.8 KiB
Vue
<template>
|
|
<UCard>
|
|
<template #header>
|
|
<h4 class="font-medium">Stress Test</h4>
|
|
</template>
|
|
|
|
<div class="space-y-4">
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block">
|
|
Revenue Delay: {{ stress.revenueDelay }} months
|
|
</label>
|
|
<input
|
|
type="range"
|
|
:value="stress.revenueDelay"
|
|
min="0"
|
|
max="6"
|
|
step="1"
|
|
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
|
@input="(e) => updateStress({ revenueDelay: Number(e.target.value) })"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="text-sm font-medium text-gray-700 mb-2 block">
|
|
Cost Shock: +{{ stress.costShockPct }}%
|
|
</label>
|
|
<input
|
|
type="range"
|
|
:value="stress.costShockPct"
|
|
min="0"
|
|
max="30"
|
|
step="5"
|
|
class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"
|
|
@input="(e) => updateStress({ costShockPct: Number(e.target.value) })"
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<UCheckbox
|
|
:model-value="stress.grantLost"
|
|
label="Major Grant Lost"
|
|
@update:model-value="(val) => updateStress({ grantLost: val })"
|
|
/>
|
|
</div>
|
|
|
|
<div v-if="isStressActive" class="p-3 bg-orange-50 border border-orange-200 rounded">
|
|
<div class="text-sm">
|
|
<div class="flex items-center gap-2 text-orange-800 mb-1">
|
|
<UIcon name="i-heroicons-exclamation-triangle" class="w-4 h-4" />
|
|
<span class="font-medium">Stress Test Active</span>
|
|
</div>
|
|
<div class="text-orange-700">
|
|
Projected runway: <span class="font-semibold">{{ displayStressedRunway }}</span>
|
|
<span v-if="runwayChange !== 0" class="ml-2">
|
|
({{ runwayChange > 0 ? '+' : '' }}{{ runwayChange }} months)
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
const { stress, updateStress, runwayMonths } = useCoopBuilder()
|
|
|
|
const isStressActive = computed(() =>
|
|
stress.value.revenueDelay > 0 ||
|
|
stress.value.costShockPct > 0 ||
|
|
stress.value.grantLost
|
|
)
|
|
|
|
const stressedRunway = computed(() => runwayMonths(undefined, { useStress: true }))
|
|
const normalRunway = computed(() => runwayMonths())
|
|
|
|
const displayStressedRunway = computed(() => {
|
|
const months = stressedRunway.value
|
|
if (!isFinite(months)) return '∞'
|
|
if (months < 1) return '<1 month'
|
|
return `${Math.round(months)} months`
|
|
})
|
|
|
|
const runwayChange = computed(() => {
|
|
const normal = normalRunway.value
|
|
const stressed = stressedRunway.value
|
|
|
|
if (!isFinite(normal) && !isFinite(stressed)) return 0
|
|
if (!isFinite(normal)) return -99 // Very large negative change
|
|
if (!isFinite(stressed)) return 0
|
|
|
|
return Math.round(stressed - normal)
|
|
})
|
|
</script> |