refactor: enhance routing and state management in CoopBuilder, add migration checks on startup, and update Tailwind configuration for improved component styling

This commit is contained in:
Jennie Robinson Faber 2025-08-23 18:24:31 +01:00
parent 848386e3dd
commit 4cea1f71fe
55 changed files with 4053 additions and 1486 deletions

View file

@ -357,30 +357,15 @@
</UModal>
<!-- Helper Modal -->
<UModal v-model:open="showHelperModal" :ui="{ wrapper: 'sm:max-w-lg' }">
<template #header>
<div class="flex items-center justify-between">
<div>
<h3 class="text-lg font-semibold text-gray-900 modal-header">
Quick Entry Tools
</h3>
<p class="mt-1 text-sm text-gray-500 modal-header">
{{ selectedItemDetails?.label || "Budget item" }}
</p>
</div>
<UButton
@click="showHelperModal = false"
variant="ghost"
size="sm"
icon="i-heroicons-x-mark-20-solid"
class="-mr-2"
/>
</div>
</template>
<UModal
v-model:open="showHelperModal"
:ui="{ wrapper: 'sm:max-w-lg', footer: 'justify-end' }"
title="Quick Entry Tools"
:description="selectedItemDetails?.label || 'Budget item'"
>
<template #body>
<div class="isolate">
<UTabs :items="helperTabs" class="w-full">
<UTabs v-model="activeHelperTab" :items="helperTabs" class="w-full">
<template #content="{ item }">
<!-- Annual Distribution Content -->
<div v-if="item.key === 'annual'" class="pt-4 space-y-4">
@ -399,18 +384,6 @@
<p class="text-sm text-gray-600">
This will divide the amount equally across all 12 months
</p>
<div class="flex justify-end gap-3 pt-2">
<UButton @click="showHelperModal = false" variant="ghost" color="neutral">
Cancel
</UButton>
<UButton
@click="distributeAnnualAmount"
:disabled="!helperConfig.annualAmount || helperConfig.annualAmount <= 0"
color="primary"
>
Distribute Amount
</UButton>
</div>
</div>
<!-- Monthly Amount Content -->
@ -430,25 +403,31 @@
<p class="text-sm text-gray-600">
This will set the same value for all months
</p>
<div class="flex justify-end gap-3 pt-2">
<UButton @click="showHelperModal = false" variant="ghost" color="neutral">
Cancel
</UButton>
<UButton
@click="setAllMonths"
:disabled="
!helperConfig.monthlyAmount || helperConfig.monthlyAmount <= 0
"
color="primary"
>
Apply to All Months
</UButton>
</div>
</div>
</template>
</UTabs>
</div>
</template>
<template #footer="{ close }">
<UButton @click="close" variant="outline" color="neutral"> Cancel </UButton>
<UButton
v-if="activeHelperTab === 0"
@click="distributeAnnualAmount"
:disabled="!helperConfig.annualAmount || helperConfig.annualAmount <= 0"
color="primary"
>
Distribute Amount
</UButton>
<UButton
v-else
@click="setAllMonths"
:disabled="!helperConfig.monthlyAmount || helperConfig.monthlyAmount <= 0"
color="primary"
>
Apply to All Months
</UButton>
</template>
</UModal>
<!-- Add Expense Modal -->
@ -525,8 +504,11 @@
</template>
<script setup lang="ts">
// Store
// Stores
const budgetStore = useBudgetStore();
const streamsStore = useStreamsStore();
const membersStore = useMembersStore();
const policiesStore = usePoliciesStore();
// State
const showAddRevenueModal = ref(false);
@ -567,6 +549,7 @@ const selectedItemDetails = computed(() => {
});
// Helper tabs configuration
const activeHelperTab = ref(0); // UTabs uses index, not key
const helperTabs = [
{
key: "annual",
@ -641,9 +624,9 @@ const allBudgetItems = computed(() => {
// Initialize on mount
onMounted(async () => {
try {
if (!budgetStore.isInitialized) {
await budgetStore.initializeFromWizardData();
}
// Always re-initialize to get latest wizard data
budgetStore.isInitialized = false;
await budgetStore.initializeFromWizardData();
} catch (error) {
console.error("Error initializing budget page:", error);
}
@ -807,7 +790,9 @@ function resetWorksheet() {
if (confirm("Are you sure you want to reset all budget data? This cannot be undone.")) {
budgetStore.resetBudgetWorksheet();
budgetStore.isInitialized = false;
budgetStore.initializeFromWizardData();
nextTick(() => {
budgetStore.initializeFromWizardData();
});
}
}