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
|
|
@ -3,19 +3,13 @@
|
|||
<!-- Section Header with Export Controls -->
|
||||
<div class="flex items-center justify-between mb-8">
|
||||
<div>
|
||||
<h3 class="text-2xl font-black text-black mb-2">
|
||||
Set your wage & pay policy
|
||||
</h3>
|
||||
<h3 class="text-2xl font-black text-black mb-2">Set your wage & pay policy</h3>
|
||||
<p class="text-neutral-600">
|
||||
Choose how to allocate payroll among members and set the base hourly rate.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex items-center gap-3">
|
||||
<UButton
|
||||
variant="outline"
|
||||
color="gray"
|
||||
size="sm"
|
||||
@click="exportPolicies">
|
||||
<UButton variant="outline" color="neutral" size="sm" @click="exportPolicies">
|
||||
<UIcon name="i-heroicons-arrow-down-tray" class="mr-1" />
|
||||
Export
|
||||
</UButton>
|
||||
|
|
@ -26,7 +20,11 @@
|
|||
<div class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<h4 class="font-bold mb-4">Pay Allocation Policy</h4>
|
||||
<div class="space-y-3">
|
||||
<label v-for="option in policyOptions" :key="option.value" class="flex items-start gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors">
|
||||
<label
|
||||
v-for="option in policyOptions"
|
||||
:key="option.value"
|
||||
class="flex items-start gap-3 cursor-pointer hover:bg-gray-50 p-2 rounded-lg transition-colors"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:value="option.value"
|
||||
|
|
@ -37,13 +35,17 @@
|
|||
<span class="text-sm flex-1">{{ option.label }}</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Role bands editor if role-banded is selected -->
|
||||
<div v-if="selectedPolicy === 'role-banded'" class="mt-4 p-4 bg-gray-50 rounded-lg">
|
||||
<h5 class="text-sm font-medium mb-3">Role Bands (monthly € or weight)</h5>
|
||||
<div class="space-y-2">
|
||||
<div v-for="member in uniqueRoles" :key="member.role" class="flex items-center gap-2">
|
||||
<span class="text-sm w-32">{{ member.role || 'No role' }}</span>
|
||||
<div
|
||||
v-for="member in uniqueRoles"
|
||||
:key="member.role"
|
||||
class="flex items-center gap-2"
|
||||
>
|
||||
<span class="text-sm w-32">{{ member.role || "No role" }}</span>
|
||||
<UInput
|
||||
v-model="roleBands[member.role || '']"
|
||||
type="text"
|
||||
|
|
@ -55,7 +57,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<UAlert
|
||||
class="mt-4"
|
||||
color="primary"
|
||||
|
|
@ -67,7 +69,7 @@
|
|||
</template>
|
||||
</UAlert>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Hourly Wage Input -->
|
||||
<div class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
|
||||
<h4 class="font-bold mb-4">Base Hourly Wage</h4>
|
||||
|
|
@ -78,7 +80,8 @@
|
|||
placeholder="0.00"
|
||||
size="xl"
|
||||
class="text-4xl font-black w-full h-20"
|
||||
@update:model-value="validateAndSaveWage">
|
||||
@update:model-value="validateAndSaveWage"
|
||||
>
|
||||
<template #leading>
|
||||
<span class="text-neutral-500 text-3xl">€</span>
|
||||
</template>
|
||||
|
|
@ -98,9 +101,9 @@ const coop = useCoopBuilder();
|
|||
const store = useCoopBuilderStore();
|
||||
|
||||
// Initialize from store
|
||||
const selectedPolicy = ref(coop.policy.value?.relationship || 'equal-pay')
|
||||
const roleBands = ref(coop.policy.value?.roleBands || {})
|
||||
const wageText = ref(String(store.equalHourlyWage || ''))
|
||||
const selectedPolicy = ref(coop.policy.value?.relationship || "equal-pay");
|
||||
const roleBands = ref(coop.policy.value?.roleBands || {});
|
||||
const wageText = ref(String(store.equalHourlyWage || ""));
|
||||
|
||||
function parseNumberInput(val: unknown): number {
|
||||
if (typeof val === "number") return val;
|
||||
|
|
@ -114,43 +117,54 @@ function parseNumberInput(val: unknown): number {
|
|||
|
||||
// Pay policy options
|
||||
const policyOptions = [
|
||||
{ value: 'equal-pay', label: 'Equal pay - Everyone gets the same monthly amount' },
|
||||
{ value: 'needs-weighted', label: 'Needs-weighted - Allocate based on minimum needs' },
|
||||
{ value: 'hours-weighted', label: 'Hours-weighted - Allocate based on hours worked' },
|
||||
{ value: 'role-banded', label: 'Role-banded - Different amounts per role' }
|
||||
]
|
||||
{
|
||||
value: "equal-pay",
|
||||
label: "Equal pay - Everyone gets the same monthly amount",
|
||||
},
|
||||
{
|
||||
value: "needs-weighted",
|
||||
label: "Needs-weighted - Allocate based on minimum needs",
|
||||
},
|
||||
{
|
||||
value: "hours-weighted",
|
||||
label: "Hours-weighted - Allocate based on hours worked",
|
||||
},
|
||||
{ value: "role-banded", label: "Role-banded - Different amounts per role" },
|
||||
];
|
||||
|
||||
// Already initialized above with store values
|
||||
|
||||
const uniqueRoles = computed(() => {
|
||||
const roles = new Set(coop.members.value.map(m => m.role || ''))
|
||||
return Array.from(roles).map(role => ({ role }))
|
||||
})
|
||||
const roles = new Set(coop.members.value.map((m) => m.role || ""));
|
||||
return Array.from(roles).map((role) => ({ role }));
|
||||
});
|
||||
|
||||
function updatePolicy(value: string) {
|
||||
selectedPolicy.value = value
|
||||
coop.setPolicy(value as "equal-pay" | "needs-weighted" | "hours-weighted" | "role-banded")
|
||||
|
||||
selectedPolicy.value = value;
|
||||
coop.setPolicy(
|
||||
value as "equal-pay" | "needs-weighted" | "hours-weighted" | "role-banded"
|
||||
);
|
||||
|
||||
// Trigger payroll reallocation after policy change
|
||||
const allocatedMembers = coop.allocatePayroll()
|
||||
allocatedMembers.forEach(m => {
|
||||
coop.upsertMember(m)
|
||||
})
|
||||
|
||||
const allocatedMembers = coop.allocatePayroll();
|
||||
allocatedMembers.forEach((m) => {
|
||||
coop.upsertMember(m);
|
||||
});
|
||||
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
|
||||
function updateRoleBands() {
|
||||
coop.setRoleBands(roleBands.value)
|
||||
|
||||
coop.setRoleBands(roleBands.value);
|
||||
|
||||
// Trigger payroll reallocation after role bands change
|
||||
if (selectedPolicy.value === 'role-banded') {
|
||||
const allocatedMembers = coop.allocatePayroll()
|
||||
allocatedMembers.forEach(m => {
|
||||
coop.upsertMember(m)
|
||||
})
|
||||
if (selectedPolicy.value === "role-banded") {
|
||||
const allocatedMembers = coop.allocatePayroll();
|
||||
allocatedMembers.forEach((m) => {
|
||||
coop.upsertMember(m);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
|
||||
|
|
@ -163,14 +177,14 @@ function validateAndSaveWage(value: string) {
|
|||
wageText.value = cleanValue;
|
||||
|
||||
if (!isNaN(numValue) && numValue >= 0) {
|
||||
coop.setEqualWage(numValue)
|
||||
|
||||
coop.setEqualWage(numValue);
|
||||
|
||||
// Trigger payroll reallocation after wage change
|
||||
const allocatedMembers = coop.allocatePayroll()
|
||||
allocatedMembers.forEach(m => {
|
||||
coop.upsertMember(m)
|
||||
})
|
||||
|
||||
const allocatedMembers = coop.allocatePayroll();
|
||||
allocatedMembers.forEach((m) => {
|
||||
coop.upsertMember(m);
|
||||
});
|
||||
|
||||
emit("save-status", "saved");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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() {
|
||||
|
|
|
|||
|
|
@ -661,7 +661,7 @@ export const useBudgetStore = defineStore(
|
|||
}
|
||||
}
|
||||
|
||||
function addBudgetItem(category, name, selectedCategory = "") {
|
||||
function addBudgetItem(category, name, selectedCategory = "", subcategory = "") {
|
||||
const id = `${category}-${Date.now()}`;
|
||||
|
||||
// Create empty monthly values for next 12 months
|
||||
|
|
@ -681,7 +681,7 @@ export const useBudgetStore = defineStore(
|
|||
mainCategory:
|
||||
selectedCategory ||
|
||||
(category === "revenue" ? "Games & Products" : "Other Expenses"),
|
||||
subcategory: "", // Will be set by user via dropdown
|
||||
subcategory: subcategory || "",
|
||||
source: "user",
|
||||
monthlyValues,
|
||||
values: {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue