app/components/advanced/ScenariosPanel.vue

49 lines
No EOL
1.5 KiB
Vue

<template>
<UCard>
<template #header>
<h4 class="font-medium">Scenarios</h4>
</template>
<div class="space-y-3">
<USelect
:model-value="scenario"
:options="scenarioOptions"
@update:model-value="setScenario"
/>
<div v-if="scenario !== 'current'" class="p-3 bg-blue-50 border border-blue-200 rounded text-sm">
<div class="flex items-center gap-2 text-blue-800">
<UIcon name="i-heroicons-information-circle" class="w-4 h-4" />
<span class="font-medium">Scenario Active</span>
</div>
<p class="text-blue-700 mt-1">
{{ getScenarioDescription(scenario) }}
</p>
</div>
</div>
</UCard>
</template>
<script setup lang="ts">
const { scenario, setScenario } = useCoopBuilder()
const scenarioOptions = [
{ label: 'Current', value: 'current' },
{ label: 'Quit Day Jobs', value: 'quit-jobs' },
{ label: 'Start Production', value: 'start-production' },
{ label: 'Custom', value: 'custom', disabled: true }
]
function getScenarioDescription(scenario: string): string {
switch (scenario) {
case 'quit-jobs':
return 'All external income removed. Shows runway if everyone works full-time for the co-op.'
case 'start-production':
return 'Service revenue reduced by 30%. Models transition from services to product development.'
case 'custom':
return 'Custom scenario configuration coming soon.'
default:
return ''
}
}
</script>