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:
parent
848386e3dd
commit
4cea1f71fe
55 changed files with 4053 additions and 1486 deletions
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue