121 lines
3.9 KiB
Vue
121 lines
3.9 KiB
Vue
<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>
|