refactor: streamline WizardPoliciesStep component layout and improve budget management forms with enhanced initial value handling
This commit is contained in:
parent
4cea1f71fe
commit
fc2d9ed56b
3 changed files with 272 additions and 267 deletions
423
pages/budget.vue
423
pages/budget.vue
|
|
@ -95,15 +95,12 @@
|
|||
>
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex-1">
|
||||
<button
|
||||
@click="openHelperForItem(item)"
|
||||
class="text-left hover:underline focus:outline-none focus:underline w-full"
|
||||
>
|
||||
<div class="text-left w-full">
|
||||
<div class="font-medium">{{ item.name }}</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
{{ item.subcategory }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
@click="removeItem('revenue', item.id)"
|
||||
|
|
@ -204,15 +201,12 @@
|
|||
>
|
||||
<div class="flex items-center justify-between group">
|
||||
<div class="flex-1">
|
||||
<button
|
||||
@click="openHelperForItem(item)"
|
||||
class="text-left hover:underline focus:outline-none focus:underline w-full"
|
||||
>
|
||||
<div class="text-left w-full">
|
||||
<div class="font-medium">{{ item.name }}</div>
|
||||
<div class="text-xs text-gray-600">
|
||||
{{ item.subcategory }}
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<UButton
|
||||
@click="removeItem('expenses', item.id)"
|
||||
|
|
@ -308,11 +302,20 @@
|
|||
<UFormGroup label="Category" required>
|
||||
<USelectMenu
|
||||
v-model="newRevenue.category"
|
||||
:options="revenueCategories"
|
||||
:items="revenueCategories"
|
||||
placeholder="Select a category"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Subcategory" :required="false">
|
||||
<USelectMenu
|
||||
v-model="newRevenue.subcategory"
|
||||
:items="revenueSubcategories"
|
||||
placeholder="Select a subcategory"
|
||||
:disabled="!newRevenue.category"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup label="Revenue Name" required>
|
||||
<UInput
|
||||
v-model="newRevenue.name"
|
||||
|
|
@ -321,20 +324,59 @@
|
|||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Initial Monthly Amount"
|
||||
description="Starting amount for each month"
|
||||
>
|
||||
<UInput
|
||||
v-model.number="newRevenue.initialAmount"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
<div class="border-t-2 border-gray-200 pt-5">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3">Initial Values</h4>
|
||||
|
||||
<UTabs v-model="revenueInitialTab" :items="revenueHelperTabs" class="w-full">
|
||||
<template #content="{ item }">
|
||||
<!-- Annual Distribution -->
|
||||
<div v-if="item.key === 'annual'" class="pt-4 space-y-4">
|
||||
<UFormGroup label="Annual Total Amount">
|
||||
<UInput
|
||||
v-model.number="newRevenue.annualAmount"
|
||||
type="number"
|
||||
placeholder="Enter annual amount (e.g., 12000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will divide ${{ newRevenue.annualAmount || 0 }} equally across all 12 months
|
||||
(${{ newRevenue.annualAmount ? Math.round(newRevenue.annualAmount / 12) : 0 }} per month)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Amount -->
|
||||
<div v-else-if="item.key === 'monthly'" class="pt-4 space-y-4">
|
||||
<UFormGroup label="Monthly Amount">
|
||||
<UInput
|
||||
v-model.number="newRevenue.monthlyAmount"
|
||||
type="number"
|
||||
placeholder="Enter monthly amount (e.g., 1000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will set ${{ newRevenue.monthlyAmount || 0 }} for all months
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Start Empty -->
|
||||
<div v-else class="pt-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
The revenue item will be created with no initial values. You can fill them in later.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
</UTabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -356,79 +398,6 @@
|
|||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- Helper Modal -->
|
||||
<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 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">
|
||||
<UFormGroup label="Annual Total Amount">
|
||||
<UInput
|
||||
v-model.number="helperConfig.annualAmount"
|
||||
type="number"
|
||||
placeholder="Enter annual amount (e.g., 12000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will divide the amount equally across all 12 months
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Amount Content -->
|
||||
<div v-else-if="item.key === 'monthly'" class="pt-4 space-y-4">
|
||||
<UFormGroup label="Monthly Amount">
|
||||
<UInput
|
||||
v-model.number="helperConfig.monthlyAmount"
|
||||
type="number"
|
||||
placeholder="Enter monthly amount (e.g., 1000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will set the same value for all months
|
||||
</p>
|
||||
</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 -->
|
||||
<UModal v-model:open="showAddExpenseModal">
|
||||
|
|
@ -453,7 +422,7 @@
|
|||
<UFormGroup label="Category" required>
|
||||
<USelectMenu
|
||||
v-model="newExpense.category"
|
||||
:options="expenseCategories"
|
||||
:items="expenseCategories"
|
||||
placeholder="Select a category"
|
||||
/>
|
||||
</UFormGroup>
|
||||
|
|
@ -466,20 +435,59 @@
|
|||
/>
|
||||
</UFormGroup>
|
||||
|
||||
<UFormGroup
|
||||
label="Initial Monthly Amount"
|
||||
description="Starting amount for each month"
|
||||
>
|
||||
<UInput
|
||||
v-model.number="newExpense.initialAmount"
|
||||
type="number"
|
||||
placeholder="0.00"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
<div class="border-t-2 border-gray-200 pt-5">
|
||||
<h4 class="text-sm font-semibold text-gray-700 mb-3">Initial Values</h4>
|
||||
|
||||
<UTabs v-model="expenseInitialTab" :items="expenseHelperTabs" class="w-full">
|
||||
<template #content="{ item }">
|
||||
<!-- Annual Distribution -->
|
||||
<div v-if="item.key === 'annual'" class="pt-4 space-y-4">
|
||||
<UFormGroup label="Annual Total Amount">
|
||||
<UInput
|
||||
v-model.number="newExpense.annualAmount"
|
||||
type="number"
|
||||
placeholder="Enter annual amount (e.g., 12000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will divide ${{ newExpense.annualAmount || 0 }} equally across all 12 months
|
||||
(${{ newExpense.annualAmount ? Math.round(newExpense.annualAmount / 12) : 0 }} per month)
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Monthly Amount -->
|
||||
<div v-else-if="item.key === 'monthly'" class="pt-4 space-y-4">
|
||||
<UFormGroup label="Monthly Amount">
|
||||
<UInput
|
||||
v-model.number="newExpense.monthlyAmount"
|
||||
type="number"
|
||||
placeholder="Enter monthly amount (e.g., 1000)"
|
||||
size="lg"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-gray-500">$</span>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
<p class="text-sm text-gray-600">
|
||||
This will set ${{ newExpense.monthlyAmount || 0 }} for all months
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Start Empty -->
|
||||
<div v-else class="pt-4">
|
||||
<p class="text-sm text-gray-600">
|
||||
The expense item will be created with no initial values. You can fill them in later.
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
</UInput>
|
||||
</UFormGroup>
|
||||
</UTabs>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -513,7 +521,6 @@ const policiesStore = usePoliciesStore();
|
|||
// State
|
||||
const showAddRevenueModal = ref(false);
|
||||
const showAddExpenseModal = ref(false);
|
||||
const showHelperModal = ref(false);
|
||||
const activeTab = ref(0);
|
||||
const highlightedItemId = ref<string | null>(null);
|
||||
|
||||
|
|
@ -523,6 +530,8 @@ const newRevenue = ref({
|
|||
subcategory: "",
|
||||
name: "",
|
||||
initialAmount: 0,
|
||||
annualAmount: 0,
|
||||
monthlyAmount: 0,
|
||||
});
|
||||
|
||||
const newExpense = ref({
|
||||
|
|
@ -530,27 +539,14 @@ const newExpense = ref({
|
|||
subcategory: "",
|
||||
name: "",
|
||||
initialAmount: 0,
|
||||
});
|
||||
|
||||
// Helper config
|
||||
const helperConfig = ref({
|
||||
selectedItem: null as string | null,
|
||||
annualAmount: 0,
|
||||
monthlyAmount: 0,
|
||||
startAmount: 0,
|
||||
percentChange: 0,
|
||||
baseAmount: 0,
|
||||
});
|
||||
|
||||
// Selected item details for helper modal
|
||||
const selectedItemDetails = computed(() => {
|
||||
if (!helperConfig.value.selectedItem) return null;
|
||||
return allBudgetItems.value.find((item) => item.id === helperConfig.value.selectedItem);
|
||||
});
|
||||
|
||||
// Helper tabs configuration
|
||||
const activeHelperTab = ref(0); // UTabs uses index, not key
|
||||
const helperTabs = [
|
||||
// New modal helper tabs
|
||||
const revenueInitialTab = ref(0);
|
||||
const revenueHelperTabs = [
|
||||
{
|
||||
key: "annual",
|
||||
label: "Annual Distribution",
|
||||
|
|
@ -561,12 +557,49 @@ const helperTabs = [
|
|||
label: "Set All Months",
|
||||
icon: "i-heroicons-squares-2x2",
|
||||
},
|
||||
{
|
||||
key: "empty",
|
||||
label: "Start Empty",
|
||||
icon: "i-heroicons-minus",
|
||||
},
|
||||
];
|
||||
|
||||
// Data from store
|
||||
const expenseInitialTab = ref(0);
|
||||
const expenseHelperTabs = [
|
||||
{
|
||||
key: "annual",
|
||||
label: "Annual Distribution",
|
||||
icon: "i-heroicons-calendar",
|
||||
},
|
||||
{
|
||||
key: "monthly",
|
||||
label: "Set All Months",
|
||||
icon: "i-heroicons-squares-2x2",
|
||||
},
|
||||
{
|
||||
key: "empty",
|
||||
label: "Start Empty",
|
||||
icon: "i-heroicons-minus",
|
||||
},
|
||||
];
|
||||
|
||||
// Data from store - just use the string arrays directly
|
||||
const revenueCategories = computed(() => budgetStore.revenueCategories);
|
||||
const expenseCategories = computed(() => budgetStore.expenseCategories);
|
||||
|
||||
// Revenue subcategories based on selected category
|
||||
const revenueSubcategories = computed(() => {
|
||||
if (!newRevenue.value.category) return [];
|
||||
return budgetStore.revenueSubcategories[newRevenue.value.category] || [];
|
||||
});
|
||||
|
||||
// Clear subcategory when category changes
|
||||
watch(() => newRevenue.value.category, (newCategory, oldCategory) => {
|
||||
if (newCategory !== oldCategory) {
|
||||
newRevenue.value.subcategory = "";
|
||||
}
|
||||
});
|
||||
|
||||
// Generate monthly headers
|
||||
const monthlyHeaders = computed(() => {
|
||||
const headers = [];
|
||||
|
|
@ -591,41 +624,11 @@ const groupedRevenue = computed(() => budgetStore.groupedRevenue);
|
|||
const groupedExpenses = computed(() => budgetStore.groupedExpenses);
|
||||
const monthlyTotals = computed(() => budgetStore.monthlyTotals);
|
||||
|
||||
// All budget items for helper dropdown
|
||||
const allBudgetItems = computed(() => {
|
||||
const items: Array<{
|
||||
id: string;
|
||||
label: string;
|
||||
type: "revenue" | "expenses";
|
||||
data: any;
|
||||
}> = [];
|
||||
|
||||
budgetStore.budgetWorksheet.revenue.forEach((item: any) => {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: `[Revenue] ${item.name}`,
|
||||
type: "revenue",
|
||||
data: item,
|
||||
});
|
||||
});
|
||||
|
||||
budgetStore.budgetWorksheet.expenses.forEach((item: any) => {
|
||||
items.push({
|
||||
id: item.id,
|
||||
label: `[Expense] ${item.name}`,
|
||||
type: "expenses",
|
||||
data: item,
|
||||
});
|
||||
});
|
||||
|
||||
return items;
|
||||
});
|
||||
|
||||
// Initialize on mount
|
||||
onMounted(async () => {
|
||||
try {
|
||||
// Always re-initialize to get latest wizard data
|
||||
budgetStore.isInitialized = false;
|
||||
// Only initialize if not already done (preserve persisted data)
|
||||
await budgetStore.initializeFromWizardData();
|
||||
} catch (error) {
|
||||
console.error("Error initializing budget page:", error);
|
||||
|
|
@ -637,20 +640,36 @@ function addRevenueItem() {
|
|||
const id = budgetStore.addBudgetItem(
|
||||
"revenue",
|
||||
newRevenue.value.name,
|
||||
newRevenue.value.category
|
||||
newRevenue.value.category,
|
||||
newRevenue.value.subcategory
|
||||
);
|
||||
|
||||
// Set initial amount for all months if provided
|
||||
if (newRevenue.value.initialAmount > 0) {
|
||||
// Apply helper values based on selected tab
|
||||
const activeTab = revenueHelperTabs[revenueInitialTab.value];
|
||||
|
||||
if (activeTab?.key === 'annual' && Number(newRevenue.value.annualAmount) > 0) {
|
||||
// Annual distribution
|
||||
const monthlyAmount = Math.round(newRevenue.value.annualAmount / 12);
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
"revenue",
|
||||
id,
|
||||
month.key,
|
||||
newRevenue.value.initialAmount.toString()
|
||||
monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
} else if (activeTab?.key === 'monthly' && Number(newRevenue.value.monthlyAmount) > 0) {
|
||||
// Set all months
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
"revenue",
|
||||
id,
|
||||
month.key,
|
||||
newRevenue.value.monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
}
|
||||
// If tab === 2 (empty), don't set any values
|
||||
|
||||
// Reset form and close modal
|
||||
newRevenue.value = {
|
||||
|
|
@ -658,7 +677,10 @@ function addRevenueItem() {
|
|||
subcategory: "",
|
||||
name: "",
|
||||
initialAmount: 0,
|
||||
annualAmount: 0,
|
||||
monthlyAmount: 0,
|
||||
};
|
||||
revenueInitialTab.value = 0;
|
||||
showAddRevenueModal.value = false;
|
||||
}
|
||||
|
||||
|
|
@ -670,17 +692,32 @@ function addExpenseItem() {
|
|||
newExpense.value.category
|
||||
);
|
||||
|
||||
// Set initial amount for all months if provided
|
||||
if (newExpense.value.initialAmount > 0) {
|
||||
// Apply helper values based on selected tab
|
||||
const activeExpenseTab = expenseHelperTabs[expenseInitialTab.value];
|
||||
|
||||
if (activeExpenseTab?.key === 'annual' && Number(newExpense.value.annualAmount) > 0) {
|
||||
// Annual distribution
|
||||
const monthlyAmount = Math.round(newExpense.value.annualAmount / 12);
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
"expenses",
|
||||
id,
|
||||
month.key,
|
||||
newExpense.value.initialAmount.toString()
|
||||
monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
} else if (activeExpenseTab?.key === 'monthly' && Number(newExpense.value.monthlyAmount) > 0) {
|
||||
// Set all months
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
"expenses",
|
||||
id,
|
||||
month.key,
|
||||
newExpense.value.monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
}
|
||||
// If tab === 2 (empty), don't set any values
|
||||
|
||||
// Reset form and close modal
|
||||
newExpense.value = {
|
||||
|
|
@ -688,7 +725,10 @@ function addExpenseItem() {
|
|||
subcategory: "",
|
||||
name: "",
|
||||
initialAmount: 0,
|
||||
annualAmount: 0,
|
||||
monthlyAmount: 0,
|
||||
};
|
||||
expenseInitialTab.value = 0;
|
||||
showAddExpenseModal.value = false;
|
||||
}
|
||||
|
||||
|
|
@ -726,14 +766,6 @@ function handleEnter(event: KeyboardEvent) {
|
|||
input.blur();
|
||||
}
|
||||
|
||||
// Open helper modal for specific item
|
||||
function openHelperForItem(item: any) {
|
||||
helperConfig.value.selectedItem = item.id;
|
||||
helperConfig.value.annualAmount = 0;
|
||||
helperConfig.value.monthlyAmount = 0;
|
||||
activeTab.value = 0; // Reset to first tab
|
||||
showHelperModal.value = true;
|
||||
}
|
||||
|
||||
// Highlight row after changes
|
||||
function highlightRow(itemId: string) {
|
||||
|
|
@ -743,47 +775,6 @@ function highlightRow(itemId: string) {
|
|||
}, 1500);
|
||||
}
|
||||
|
||||
// Helper functions
|
||||
function distributeAnnualAmount() {
|
||||
if (!helperConfig.value.selectedItem || !helperConfig.value.annualAmount) return;
|
||||
|
||||
const item = allBudgetItems.value.find((i) => i.id === helperConfig.value.selectedItem);
|
||||
if (!item) return;
|
||||
|
||||
const monthlyAmount = Math.round(helperConfig.value.annualAmount / 12);
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
item.type,
|
||||
item.id,
|
||||
month.key,
|
||||
monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
|
||||
helperConfig.value.annualAmount = 0;
|
||||
highlightRow(item.id);
|
||||
showHelperModal.value = false;
|
||||
}
|
||||
|
||||
function setAllMonths() {
|
||||
if (!helperConfig.value.selectedItem || !helperConfig.value.monthlyAmount) return;
|
||||
|
||||
const item = allBudgetItems.value.find((i) => i.id === helperConfig.value.selectedItem);
|
||||
if (!item) return;
|
||||
|
||||
monthlyHeaders.value.forEach((month) => {
|
||||
budgetStore.updateMonthlyValue(
|
||||
item.type,
|
||||
item.id,
|
||||
month.key,
|
||||
helperConfig.value.monthlyAmount.toString()
|
||||
);
|
||||
});
|
||||
|
||||
helperConfig.value.monthlyAmount = 0;
|
||||
highlightRow(item.id);
|
||||
showHelperModal.value = false;
|
||||
}
|
||||
|
||||
// Reset worksheet
|
||||
function resetWorksheet() {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue